我使用 ChartJS 创建了一个饼图。
现在我想创建一个点击处理程序，我可以在其中获取我创建的图表部分的标签和值。我如何做到这一点？
let my_chart = new Chart('tot_pop_chart', {
type: 'pie',
data: {
labels: ['NSW', 'VIC', 'QSD', 'SA', 'WA', 'TAS', 'NT', 'ACT'],
datasets: [{
data: [1, 2, 3, 4, 5, 6, 7, 8],
backgroundColor: ['rgba(63, 75, 59, 1)', 'rgba(242, 246, 208, 1)', 'rgba(197, 123, 87, 1)', 'rgba(118, 159, 182, 1)', 'rgba(58, 110, 165, 1)', 'rgba(88, 12, 31, 1)', 'rgba(157, 172, 255, 1)', 'rgba(122, 48, 108, 1)']
}
]
},
options: {
animation: {},
plugins: {
legend: {
display: true,
position: 'bottom'
}
},
onClick: ... //see below
}
}
);
我目前的尝试如下:
onClick:
e => {
console.log("In click", e.chart);
// find the index of the clicked item
let canvasPosition = Chart.helpers.getRelativePosition(e, e.chart);
let index = e.chart.scales.x.getValueForPixel(canvasPosition.x);
// now I want to retrieve the label/data using the index, how to?
}
但是，错误发生为 TypeError: Cannot read property 'getValueForPixel' of undefined。另外，如何使用 onClick 函数中的索引检索标签/数据？
非常感谢您的帮助!
最佳答案
饼图/ donut chart 不使用比例，因此您不能使用 getValueForPixel。相反，您可以只收听第二个参数，该参数包含一个包含所有事件元素的数组，默认交互模式仅包含一项:
var options = {
type: 'pie',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
}]
},
options: {
onClick: (e, activeEls) => {
let datasetIndex = activeEls[0].datasetIndex;
let dataIndex = activeEls[0].index;
let datasetLabel = e.chart.data.datasets[datasetIndex].label;
let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
let label = e.chart.data.labels[dataIndex];
console.log("In click", datasetLabel, label, value);
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>关于javascript - 如何在 ChartJS 中单击时获取事件标签元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69093845/