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

【问题标题】：How to get date label of line Chart?如何获取折线图的日期标签？
【发布时间】：2018-10-04 06:37:44
【问题描述】：

我在我的应用程序中使用 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

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

谢谢！

【问题讨论】：

你的元素到底是什么？

标签： javascript chart.js2

【解决方案1】：

Ivan 我已经使用了你的 jsfidlle：jsfiddle.net/e8n4xd4z/19925，你已经为所有变量完成了 console.log，
所以我看到您使用 Array 作为对象，请参见此处

var firstPoint = lineChart.getElementAtEvent(e)

折线图返回索引为 0 的数组，但您直接访问该属性，您正在使用firstPoint._index，但实际上该属性存在于更深一层意味着它位于firstPoint[0]._index。

我还分叉了你的 jsfiddle 这里是 my jsfiddle，或者我还在 stackoverflow 的内置 sn-p 中实现了你的示例，请参见下面的工作示例：

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>

【讨论】：

在小提琴示例行 Chart.getElementAtEvent(e)[0];返回未定义。我尝试了我的应用程序，它也返回未定义。哪个是有效的决定？
@Ivan 请在这个小提琴 (jsfiddle.net/e8n4xd4z/19925) 中看到你写的是 var firstPoint = lineChart.getElementAtEvent(e); 而不是 var firstPoint = lineChart.getElementAtEvent(e)[0];
我固定在 var firstPoint = lineChart.getElementAtEvent(e)[0];并得到 firstPoint 是未定义的。请看jsfiddle.net/e8n4xd4z/19938。
我已经在我的电脑上打开了你的新小提琴它工作正常，我认为你必须努力刷新页面或者你必须尝试清空缓存并重新加载，快捷方式 ctrl+f5 或 ctrl+shift+R 或如果您使用的是 Mac，则应用 command+f5 进行硬刷新。
@Ivan 我想你可以在本地环境中运行这个演示来测试它。

【解决方案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.7.2）jsfiddle.net/e8n4xd4z/19925 ？我得到了 firstPoint 的未定义变量和后来的错误......
不要忘记 getElementAtEvent 返回一个数组 - 在你的小提琴中，你正在获取数组，然后使用变量，就好像它是数组的第一个元素，而它仍然是整个数组。另外，请记住，即使样条线和 X 轴之间的区域是彩色的 - 它不是 Chart.js 元素的一部分。元素（至少对于您的情况而言）是样条线上的点 - 如果您在点外单击，那么您将从 getElementAtEvent 获得 undefined