グラフJsのクリック可能なバー

Question

グラフのjsバーをクリック可能にしたい。リンクなどのクリック機能を追加したいどのように進むかわからない。ドキュメント時間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>