如何在 chartjs 2.6.0 中单击时获取条形高度

Question

我有一个条形图。当我单击其中一个栏时，我希望它返回其高度。我尝试将鼠标 clcik 事件添加到图表中，但这不起作用。那么如何获得单击时条的高度呢？

这是我用来创建图表的代码。

new Chart(ctx, {
type: 'bar',
data: {
labels: cm_labels,
datasets: [{
label: 'Number of votes',
data: cm_data,
backgroundColor: 'red'
}]
},
}}

感谢您的任何帮助！

Answer 1

首先，将onClick方法添加到图表选项中，当图表检测到任何点击时，该方法将触发。

然后，要在触发onClick方法时获取实际柱线高度，您可以使用getElementAtEvent()方法，如下所示：

onClick: function(event) {
var bar = this.getElementAtEvent(event);
if (!bar.length) return; //return if not clicked on bar
var barHeight = bar[0].height();
alert(barHeight);
}

ᴅᴇᴍᴏ

var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
datasets: [{
label: 'LINE',
data: [3, 1, 4, 2, 5],
backgroundColor: 'rgba(0, 119, 290, 0.2)',
borderColor: 'rgba(0, 119, 290, 0.6)'
}]
},
options: {
onClick: function(event) {
var bar = this.getElementAtEvent(event);
if (!bar.length) return; //return if not clicked on bar
var barHeight = bar[0].height();
alert(barHeight);
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});

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