javascript - 获取在 Chart.js 3 中单击饼图的点的值
问题描述
我正在用 Chart.js 3 制作一个饼图,并且想在有人点击饼图的一部分时调用一个函数。当然,我想确定单击了哪个数据点并在函数中使用它。我似乎无法在 Chart.js V3 的文档中找到一个很好的解释。我在这里搜索过,看到很多 V1 和 V2 的解决方案,但不是 V3。任何帮助将不胜感激。
chart = new Chart(thecomplexeschart, {
type: 'pie',
data: {
labels: Object.keys(dataset),
datasets: [{
label: label,
data: Object.values(dataset),
hoverOffset: 4,
backgroundColor: makeRandomColorsString(Object.keys(dataset).length),
}]
},
options: {
onClick: (e) => {
const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
},
interaction: {
mode: 'index'
},
responsive: false,
maintainAspectRatio: false,
plugins: {
legend: {
display: false
},
title: {
font: {
size: 20,
weight: 'bolder'
},
display: true,
text: label,
padding: {
top: 10,
bottom: 30
}
}
}
}
}
);
解决方案
click 事件确实会在事件旁边获得所有活动元素和图表的列表,因此您可以使用活动元素列表来获取数据点,或者您可以使用getElementsAtEventForMode
:
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: (evt, el, chart) => {
console.log('Active el list: ', chart.data.datasets[el[0].datasetIndex].label, chart.data.datasets[el[0].datasetIndex].data[el[0].index])
let point = chart.getElementsAtEventForMode(evt, 'point', {
intersect: true
}, true);
console.log('Mode point list: ', chart.data.datasets[point[0].datasetIndex].label, chart.data.datasets[point[0].datasetIndex].data[point[0].index])
}
}
}
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 - 从 HTML 内容中提取平铺图像
- visual-studio-code - 如何在 VS Code 中编辑默认日志片段
- c++ - 使用向量进行 C++ 类初始化
- java - 在flyingsacer pdf中重复表格标题和thead
- ios - 在 Swift 中返回后更改对象
- office-js - 安装期间具有可配置选项的 Office 加载项?
- c# - 如何移动到最后一个表单域以结束表单流并开始新的意图
- php - 我想在“mysqli_error”之后向数据库添加记录
- python - 为什么 TF-IDF 计算要花这么多时间?
- php - 使用 PHP 从 HTML 表单中获取“n”个单选选项的有效方法