charts.js堆叠条形图-选择选定的行和数据集
charts.js堆叠条形图-选择选定的行和数据集
提问于 2021-05-08 19:05:26
我们创建了一个堆叠的条形图，但我需要一种方法来识别我选择了哪个条形图和条形图的部分/元素。我可以解决酒吧的问题。因此，在下面的图像中，这将是4-这样我就可以检索标签"Report Edit Complete"：
如下所示：
如果我点击粉红色，我想检索第三个元素/数据集"6-9周“的标签。有什么办法可以做到这一点吗？
回答 1
Stack Overflow用户
发布于 2021-05-08 21:35:42
这可以通过使用自定义onclick处理程序来实现，如下所示：
options: {
onClick: (evt,elements,chart) => {
const clickedPoint = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
const label = chart.data.datasets[clickedPoint[0].datasetIndex].label;
alert(label)
}
}工作示例：
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
borderColor: 'red',
backgroundColor: 'red',
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
borderColor: 'blue',
backgroundColor: 'blue',
}
]
},
options: {
onClick: (evt,elements,chart) => {
const clickedPoint = chart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
const label = chart.data.datasets[clickedPoint[0].datasetIndex].label;
alert(label)
},
indexAxis: 'y',
scales: {
y: {
stacked: true
},
x: {
stacked: true
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67446843
复制相关文章
相似问题
腾讯云开发者
