Диаграмма Js clickable bar

Question

Я хочу, чтобы мой график js bar был доступен клиенту. Я хочу добавить такие функции, как ссылки. Не знаю, как действовать. Прочитал документацию раз 10 ...

<script> var ctx = document.getElementById('myChart').getContext('2d'); 


var myChart = new Chart(ctx, { 
type: 'bar', 
data: { 
labels: ['Now', '-1h', '-2h', '-3h', '-4h', '-5h', '-6h', '-7h', '-8h', '-9h', '-10h', '-11h', '-12h', '-13h', '-14h', '-15h', '-16h', '-17h', '-18h', '-19h', '-20h', '-21h', '-22h', '-23h'], 
datasets: [{ 
    label: 'Litraa', 
    data: [<?php echo "$chart_readings[0]";?>, <?php echo "$chart_readings[1]";?>, <?php echo "$chart_readings[2]";?>, <?php echo "$chart_readings[3]";?>, <?php echo "$chart_readings[4]";?>, <?php echo "$chart_readings3[5]";?>, <?php echo "$chart_readings3[6]";?>, <?php echo "$chart_readings[7]";?>, <?php echo "$chart_readings[8]";?>, <?php echo "$chart_readings[9]";?>, <?php echo "$chart_readings[10]";?>, <?php echo "$chart_readings[11]";?>, <?php echo "$chart_readings[12]";?>, <?php echo "$chart_readings[13]";?>, <?php echo "$chart_readings[14]";?>, <?php echo "$chart_readings[15]";?>, <?php echo "$chart_readings[16]";?>, <?php echo "$chart_readings[17]";?>, <?php echo "$chart_readings[18]";?>, <?php echo "$chart_readings[19]";?>, <?php echo "$chart_readings[20]";?>, <?php echo "$chart_readings[21]";?>, <?php echo "$chart_readings[22]";?>, <?php echo "$chart_readings[23]";?>], 
    backgroundColor: "rgb(255, 255, 255)" 
}] 
}, 
    options: { 
    tooltips: { 
     mode: 'label' 
    } 
} 
}); 
/*Global settings*/ 
Chart.defaults.global.defaultFontColor = '#fff'; 
</script> 

Answer 1

Если вы используете chart.js 2.4+ (возможно erlier), есть OnClick событие, которое очень полезно. Я использую его на штабелированной гистограмме, поэтому он тоже будет работать для вас. Его можно найти в общей конфигурации диаграммы в документации.

options:{ 
    onClick: graphClickEvent 
} 

function graphClickEvent(event, array){ 
    if(array[0]){ 
    foo.bar; 
    } 
} 

Надеюсь, это поможет.

Answer 2

Вот моя попытка. Не совсем сейчас, что здесь не так.

<canvas id="myChart"></canvas> 
<script> var ctx = document.getElementById('myChart').getContext('2d'); 


var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
    labels: ['Now', '-1h', '-2h', '-3h', '-4h', '-5h', '-6h', '-7h', '-8h', '-9h', '-10h', '-11h', '-12h', '-13h', '-14h', '-15h', '-16h', '-17h', '-18h', '-19h', '-20h', '-21h', '-22h', '-23h'], 
    datasets: [{ 
     label: 'Litraa', 
     data: [<?php echo "$chart_readings[0]";?>, <?php echo "$chart_readings[1]";?>, <?php echo "$chart_readings[2]";?>, <?php echo "$chart_readings[3]";?>, <?php echo "$chart_readings[4]";?>, <?php echo "$chart_readings3[5]";?>, <?php echo "$chart_readings3[6]";?>, <?php echo "$chart_readings[7]";?>, <?php echo "$chart_readings[8]";?>, <?php echo "$chart_readings[9]";?>, <?php echo "$chart_readings[10]";?>, <?php echo "$chart_readings[11]";?>, <?php echo "$chart_readings[12]";?>, <?php echo "$chart_readings[13]";?>, <?php echo "$chart_readings[14]";?>, <?php echo "$chart_readings[15]";?>, <?php echo "$chart_readings[16]";?>, <?php echo "$chart_readings[17]";?>, <?php echo "$chart_readings[18]";?>, <?php echo "$chart_readings[19]";?>, <?php echo "$chart_readings[20]";?>, <?php echo "$chart_readings[21]";?>, <?php echo "$chart_readings[22]";?>, <?php echo "$chart_readings[23]";?>], 
     backgroundColor: "rgb(255, 255, 255)" 
    }] 
    }, 
    options: { 
     tooltips: { 
      mode: 'index', 
      callbacks: { 
       label: function(tooltipItem) { 
       return + Number(tooltipItem.yLabel) + " litraa"; 
     } 
    }, 
      onClick: myFunction 
     } 
    } 
}); 
    /*Global settings*/ 
    Chart.defaults.global.defaultFontColor = '#fff'; 
</script> 
    <script> 
function myFunction() { 
    alert("I am an alert box!"); 
} 
</script>