如何獲取Chartjs中單擊區域的索引？

Question

我有一個圖表，它不一定在指定的索引處具有元素，但是我想知道被單擊區域的索引。

如果我將鼠標懸停在沒有元素的區域上，則會顯示分配給該區域的工具提示。 我只需要單擊並獲得該區域的索引即可。

Answer 1

在chart js選項中，您可以擁有onClick事件，您可以在此處閱讀ChartJS onClick 。

使用onClick您將獲取事件，您可以檢查以下代碼以獲取索引。

除此以外，還將記錄x和y值。

我希望以下代碼能解決您的問題。

 var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09", "2015-10", "2015-11", "2015-12"], datasets: [{ label: '# of Tomatoes', data: [12, 19, 3, 5, 2, 3, 20, 3, 5, 6, 2, 1], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)', 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { responsive: false, onClick: function(c,i){ e = i[0]; console.log("index",e._index) var x_value = this.data.labels[e._index]; var y_value = this.data.datasets[0].data[e._index]; console.log("x value",x_value); console.log("y value",y_value); }, scales: { xAxes: [{ ticks: { maxRotation: 90, minRotation: 80 } }], yAxes: [{ ticks: { beginAtZero: true } }] } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> <canvas id="myChart"></canvas>