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

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

根据 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];
    }
}

Answer 2

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

var firstPoint = lineChart.getElementAtEvent(e)

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

我也在这里分叉了你的 jsfiddle my jsfiddle，或者我也在 Whosebug 的内置片段中实现了你的示例，请参见下面的工作示例：

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>

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

How to get date label of line Chart?

javascript

chart.js2