在ChartJS中，如何在点击图表时获取X和Y坐标？

Question

我该如何在ChartJS V > 2.0中使用onClick事件获取相对于图表的X、Y坐标？请参考此JSFiddle。在#canvas中创建了一个散点图。当单击图表中心时，即使没有数据点，我也应该得到0,0的坐标。

- adelriosantiago

Answer 1

对于未来的读者，一个可行的解决方案：

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);
};

感谢chart.js 2.0当前鼠标坐标工具提示的作者。

- MJ_Wales

---

对我来说可以工作，但我不得不将“y-axis-0”和“x-axis-0”更改为“y-axis-1”和“x-axis-1”。 - Tom Thomson

Answer 2

抱歉我之前的代码有些老旧，我没有看到文档，也许你可以在文档中找到更有用的信息。我是按照老派模式编写的代码 :).

基于客户端高度的位置：

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中饼图上的事件 感谢他。 问候。

- user8556290

---

谢谢，但这并没有得到XY图表坐标，我知道它可以被计算出来，但我想知道是否有一个已经计算它的ChartJS。 - adelriosantiago

抱歉，我在睡觉 ;) ，我需要一些时间来展示文档并进行了一些尝试。您可以在 https://jsfiddle.net/w64a9jod/ 上查看，它是基于您的第一个项目。祝好！ - user8556290

Answer 3

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文档中查看将事件转换为数据值。

- Unmitigated