我正在使用chart.js制作一个雷达图,用户应该能够自己进行交互,其想法是,如果用户点击了红色点,应用程序应该知道绿色点是否是刻度线和Angular 线最近的交点,这样它就可以将索引1(对应于B)处的数据集值从2(对应于中低)更改为4(对应于中高)。
它是这样设置的:
const chartData = {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
fill: true,
backgroundColor: 'rgba(6,211,248,0.5)',
borderColor: 'rgb(6,211,248)',
data: mockData.presetValues.a,
}]
};
const chartConfig = {
type: 'radar',
data: chartData,
options: {
elements: {
line: {
borderWidth: 3
},
},
scales: {
r: {
min: 0,
max: 5,
ticks: {
stepSize: 1,
callback: function (value) {
return ['none', 'low', 'mid-low', 'mid', 'mid-high', 'high'][value]
}
},
grid: {
circular: true,
lineWidth: 5
},
angleLines: {
color: 'black',
}
}
},
plugins: {
legend: {
display: false
}
},
events: ['click']
}
};
const actionChart = new Chart(
canvas,
chartConfig
);
然后,我为它设置了一个侦听器,如下所示:
canvas.addEventListener('click', handleChartClick)
最后,我有一个这样的处理程序,这就是我的问题所在:
function handleChartClick(ev) {
let clickPosition = Chart.helpers.getRelativePosition(ev, actionChart);
console.log(clickPosition);
//Find closest tick to click and change values in dataset before refresh
}
在搜索了文档和这个站点几个小时之后,我无法找到一种方法来将从getRelativePosition方法接收到的单击位置与Angular 线和刻度之间的交点位置关联起来。但如果有人能帮助我找出如何获得离单击最近的交叉点,我将非常感激。
1条答案
按热度按时间umuewwlo1#
您可以使用chart的
onClick
选项来捕获click事件(而不是在画布上添加一个侦听器)。这样,传递的事件已经被规范化。回调可以是这样的,以便获得最接近的分笔成交点: