gpt4 book ai didi

javascript - 如何在 chartjs 2.6.0 中单击时获得条形高度

转载 作者:行者123 更新时间:2023-11-30 15:05:43 25 4
gpt4 key购买 nike

我有一个条形图。当我点击其中一个栏时,我希望它返回它的高度。我曾尝试向图表添加鼠标点击事件,但没有成功。那么点击时如何获取bar的高度呢?

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

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

感谢您的帮助!

最佳答案

首先,将 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>

关于javascript - 如何在 chartjs 2.6.0 中单击时获得条形高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45765886/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com