如何使用 ChartJS 中的 x，y 像素坐标从单击事件计算 x，y 值

Question

当用户单击图表时，我想从 ChartJS 中的折线图中接收 x，y 值。与通常讨论的技术相比，模具难度在于，我需要从图表中的任何位置接收 x，y 值，而不仅仅是当我单击数据集中的某些样本时。

因此，当我单击某个空白位置时，我需要知道它的 x 和 y 轴值。

有一些例子，里面有一个评论，我在那里说：

var randomInt = function() {
  return (Math.random() * 100) - 50;
};
//needs it for the test
var labels = ["Management", "Finance", "Human Resources", "Business Development and Marketing", "Information Technology", "Professional Development and Training", "Knowledge Management", "Logistics", "Support", "Business Services", "Other"];
var datas = [{
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }, {
      x: randomInt(),
      y: randomInt(),
    }];
var scatterChartData = {
  labels: labels,
  datasets: [{
    label: "My First dataset",
    data: datas
  }]
};
var ctx = document.getElementById("canvas").getContext("2d");
var myScatter = new Chart.Scatter(ctx, {
  data: scatterChartData,
  options: {
    title: {
      display: true,
      text: 'Chart.js Scatter Chart'
    },
    scales: {
      xAxes: [{
        position: 'bottom',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
       
        },
        scaleLabel: {
          display: true,
          labelString: 'x axis'
        }
      }],
      yAxes: [{
        position: 'right',
        gridLines: {
          zeroLineColor: "rgba(0,255,0,1)"
        },
        scaleLabel: {
          display: true,
          labelString: 'y axis'
        }
      }]
    }
  }
});
//
		canvas.onclick = function(evt){
    //HERE I have the x,y pixel coordinates inside the evt object.
    //How to get the x,y values from the x and y axis??
    //this works only if I click on one of the samples...
			var activePoints = myScatter.getElementsAtEvent(evt);
			var firstPoint = activePoints[0];
      if(firstPoint !== undefined){
      	var label = myScatter.data.labels[firstPoint._index];
				var value = myScatter.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
        
        alert(label + ": " + value.x);
        alert(label + ": " + value.y);
      }
		};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta2/Chart.min.js"></script>
<div>
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>

Answer 1

我找到了至少一种方法来提取 y 轴值。x 轴值的计算应类似：

//inside the click callback...
var scaler=that.chart.scales['y-axis-0'];
var chart_height_px=scaler.bottom+scaler.top;
var y=evt.clientY-that.canvas[0].getBoundingClientRect().top-scaler.top;
var yval=scaler.max-y/scaler.height*(scaler.max-scaler.min);
console.log("value clicked: %o, ypx: %o", yval, y);
that.trigger("onTickerYClick", yval);