Question

如何使用ChartJS V中的事件onClick获取相对于图表的X，Y坐标＆gt; 2.0

以this JSFiddle为例。在#canvas中创建分散。当点击图表的中心时，我应该得到0,0 即使那里没有数据点。

Answer 1

抱歉旧代码我没有看到文档可能是你可以在doc中找到更多用户，我在旧学校模式下做了:)。

基于高度客户的位置：

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

从那里采取:) Click events on Pie Charts in Chart.js感谢他。问候。

Answer 2

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

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 current mouse coordinates tooltip

获取ChartJS中的X，Y onClick图表坐标

2 个答案: