我正在嘗試使用 javascript 向 Chart.js 中條形圖的每一列添加一個點擊事件

Question

我一直在嘗試使用 Chart.js 向條形圖中的每一列添加一個點擊事件。 我想弄清楚的是如何使每列上的點擊事件執行我想要的代碼。

這樣做的目的是當用戶單擊圖表的特定欄時，它會執行一個 php 表單提交，將他們帶到網站上的另一個頁面。

當用戶進入頁面時，條形圖數據是通過 php 從 SQL 數據庫填充的。

這是我到目前為止的代碼示例...

<canvas id="briskChart" style="margin:auto;display:block;background-color:white;border-style:solid;border-width:1px;padding:10px;"></canvas>

<script>
var red = <?=json_encode($count1[0]);?>;
var yellow = <?=json_encode($count2[0]);?>;
var green = <?=json_encode($count3[0]);?>;
var blue = <?=json_encode($count4[0]);?>;
var grey = <?=json_encode($count5[0]);?>;

var dept = <?=json_encode($row['dept']);?>;


var c1 = document.getElementById('briskChart')
var ctx = c1.getContext("2d");
var briskChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'],
        datasets: [{
            data: [red, yellow, green, blue, grey],
            backgroundColor: [
                'rgba(255, 0, 0, 0.4)',
                'rgba(255, 216, 0, 0.4)',
                'rgba(0, 255, 0, 0.4)',
                'rgba(0, 0, 255, 0.4)',
                'rgba(160, 160, 160, 0.4)'
            ],
            borderColor: [
                'rgba(255, 0, 0, 1)',
                'rgba(255, 216, 0, 1)',
                'rgba(0, 255, 0, 1)',
                'rgba(0, 0, 255, 1)',
                'rgba(160, 160, 160, 1)'

            ],
            borderWidth: 1
        }]

    },
    options: {
    onClick: event => {
        document.bred.submit();
        },
        title: {
            display: true,
            fontSize: 24,
            text: dept + ' Dept Risk Summary',
            fontColor: '#000000'
        },
        legend: {
            display: false,
        },
        scales: {
                xAxes: [{
                        display: true,
                        gridLines: {color: '#000000'},
                        ticks: {
                            fontColor: "black",
                            fontSize: 16
                            }
                        }],
                yAxes: [{
                        display: true,
                        gridLines: {color: '#000000'},
                        ticks: {
                            beginAtZero: true,
                            fontColor: "black",
                            fontSize: 16,
                            stepSize: 1
                            }
                        }],
        }
    }
});

</script>

這是html：

<form action='../php/bred.php' method='POST' name='bred'>
</form>

Chart.js 的文檔在點擊事件方面非常有限。 對於每個數據系列，當點擊該列時，我想運行一個相應的document.[form name].submit以將用戶帶到該新頁面。

如果有人有任何使用 Chart.js 做這件事的經驗，並且可以為我指明正確的方向，我將永遠感激不盡。

Answer 1

您可以創建從圖表中檢索x和y值的click處理程序。 然后，使用該數據，您可以向 PHP 腳本發送GET或POST請求。

從條形圖中獲取值的示例（這里的關鍵是查看onClick函數）：

 var red, yellow, green, blue, grey, dept = ""; var c1 = document.getElementById('briskChart') var ctx = c1.getContext("2d"); var briskChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Yellow', 'Green', 'Watch', 'Retired'], datasets: [{ data: [1, 2, 3, 4, 5], backgroundColor: [ 'rgba(255, 0, 0, 0.4)', 'rgba(255, 216, 0, 0.4)', 'rgba(0, 255, 0, 0.4)', 'rgba(0, 0, 255, 0.4)', 'rgba(160, 160, 160, 0.4)' ], borderColor: [ 'rgba(255, 0, 0, 1)', 'rgba(255, 216, 0, 1)', 'rgba(0, 255, 0, 1)', 'rgba(0, 0, 255, 1)', 'rgba(160, 160, 160, 1)' ], borderWidth: 1 }] }, options: { onClick: function(c, i) { element = i[0]; // the chart element you clicked on var xValue = this.data.labels[element._index]; // the x-value of the bar var yValue = this.data.datasets[0].data[element._index]; // the y-value of the bar console.log(xValue); console.log(yValue); // then, here, you could send a GET/POST request to your PHP function }, title: { display: true, fontSize: 24, text: dept + ' Dept Risk Summary', fontColor: '#000000' }, legend: { display: false, }, scales: { xAxes: [{ display: true, gridLines: { color: '#000000' }, ticks: { fontColor: "black", fontSize: 16 } }], yAxes: [{ display: true, gridLines: { color: '#000000' }, ticks: { beginAtZero: true, fontColor: "black", fontSize: 16, stepSize: 1 } }], } } });

 <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <canvas id="briskChart"> </canvas>