Question

我在我的应用程序中使用Chart.js（版本：2.7.2）行，并在单击某些元素时打开对话框，我需要获取当前元素的标签（xAxes上的日期）。谷歌搜索我发现了一些例子，并试图做下一个：

        var lineCanvas = document.getElementById("canvasVotesByDays");
        var ctx = lineCanvas.getContext('2d');

        var lineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: monthsXCoordItems,
                datasets: [
                    {
                        label: 'Correct Votes',
                ...

        lineCanvas.onclick = function (e) {
            console.log("INSIDE lineChart::")
            console.log(lineChart)

            var slice = lineChart.getPointsAtEvent(e);
            ...

但是在最后一行我得到了错误：

Uncaught TypeError: lineChart.getPointsAtEvent is not a function
    at HTMLCanvasElement.lineCanvas.onclick

在控制台中，我看到了LineChart对象的特性： https://imgur.com/a/E7jsoBc

为什么出错以及如何获取标签属性？

谢谢！

Answer 1

伊凡（Ivan），我使用了您的jsfidlle：jsfiddle.net/e8n4xd4z/19925，其中您已为所有变量完成了console.log，
所以我已经看到您正在使用Array作为对象，请参见

var firstPoint = lineChart.getElementAtEvent(e)

linechart返回索引为0的数组，但是您直接访问该属性，您正在使用firstPoint._index，但实际上该属性位于更深一层，表示该属性位于firstPoint[0]._index。

我也为您的jsfiddle分叉了，这里是my jsfiddle，或者我也已在stackoverflow的内置代码段中实现了您的示例，请参见以下工作示例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
	    {
	      label: '# of Votes',
	      data: [12, 19, 3, 5, 2, 3],
      	      borderWidth: 1
    	    },	
	    {
              label: '# of Points',
	      data: [7, 11, 5, 8, 3, 7],
	      borderWidth: 1
	    }
	  ]
  },
  options: {
  	scales: {
    	yAxes: [{
          ticks: { 
                    reverse: false
          }
        }]
     }
  } 
};

var lineCanvas = document.getElementById("chartJSContainer");
       
var ctx = lineCanvas.getContext('2d');
var lineChart = new Chart(ctx, options);

lineCanvas.onclick = function (e) {


   var firstPoint  = lineChart.getElementAtEvent(e)[0];
   if (firstPoint) {
     var first_point_index= firstPoint._index
     console.log("+1 first_point_index::")
     console.log( first_point_index )

     var firstPoint_dataset_index= firstPoint._datasetIndex
     console.log("+2 first_point_index::")
     console.log( first_point_index )
     
     var label = lineChart.data.labels[firstPoint._index];
     console.log("+3 label::")
     console.log( label )
     
     var value = lineChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
     alert( "label::"+(label) + "  value::"+(value) )
   }
}

canvas { 
  background-color : #eee;
}

<html>
 <head>   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
 </head>
<body>
    <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>
 </html>

Answer 2

根据documentation，正确的方法似乎是 getElementAtEvent 或 getElementsAtEvent ：

function clickHandler(evt) {
    var firstPoint = myChart.getElementAtEvent(evt)[0];

    if (firstPoint) {
        var label = myChart.data.labels[firstPoint._index];
        var value = myChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    }
}

如何获取折线图的日期标签？

2 个答案: