如何使用 ChartJS V > 2.0 中的 onClick
事件获取
相对于图表的 X、Y 坐标?
以这个 JSFiddle 为例。在
#canvas
中创建散点图。当点击图表中心时,我想得到“0, 0”即使那里没有数据点。
对于未来的读者,一个可行的解决方案:
chartClicked(event){
var yTop = this.chart.chartArea.top;
var yBottom = this.chart.chartArea.bottom;
var yMin = this.chart.scales['y-axis-0'].min;
var yMax = this.chart.scales['y-axis-0'].max;
var newY = 0;
if (event.offsetY <= yBottom && event.offsetY >= yTop) {
newY = Math.abs((event.offsetY - yTop) / (yBottom - yTop));
newY = (newY - 1) * -1;
newY = newY * (Math.abs(yMax - yMin)) + yMin;
};
var xTop = this.chart.chartArea.left;
var xBottom = this.chart.chartArea.right;
var xMin = this.chart.scales['x-axis-0'].min;
var xMax = this.chart.scales['x-axis-0'].max;
var newX = 0;
if (event.offsetX <= xBottom && event.offsetX >= xTop) {
newX = Math.abs((event.offsetX - xTop) / (xBottom - xTop));
newX = newX * (Math.abs(xMax - xMin)) + xMin;
};
console.log(newX, newY);
};
抱歉,旧代码我没有看到文档,也许你可以在文档中找到更多有用的信息,我在旧学校模式下做了:)。
基于客户身高的位置:
canvas.onclick = function(evt){
alert(evt.pageX, evt.pageY)
};
基于图表的位置:
var config = {}; //different (data, datasets, tooltips ...)
var ctx = document.getElementById("canvas").getContext("2d");
var Charts= new Chart.Scatter(ctx, config);
canvas.onclick = function(evt){
var activePoints = Charts.getElementsAtEvent(evt);
var firstPoint = activePoints[0];
if(firstPoint !== undefined){
var label = Charts.data.labels[firstPoint._index];
var value = Charts.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
alert(label + ": " + value.x);
alert(label + ": " + value.y);
}
};
取自那里:) Chart.js 中饼图上的点击事件感谢他。 问候。
getValueForPixel
可用于获取与图表上特定像素关联的轴的值。
const chart = new Chart(document.querySelector('canvas'), {
// other configuration...
data: someData,
options: {
onClick(e) {
// coordinates of click relative to canvas
const { x, y } = Chart.helpers.getRelativePosition(e, chart);
// can also use const x = e.native.offsetX, y = e.native.offsetY;
// get values relative to chart axes
const dataX = chart.scales.x.getValueForPixel(x);
const dataY = chart.scales.y.getValueForPixel(y);
}
}
});
请参阅 Chart.js 4.3.1 文档中的将事件转换为数据值。