Question

我的Chart.js有问题。

当我点击图表中的某个点时，我想要一个警报显示数据集中设置的ID值。

我尝试使用getElementsAtEvent(evt);，但它并没有像我预期的那样工作。

有人能帮助我吗？谢谢！

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"> </script>
</head>

<body>

<canvas id="myChart" width="400" height="100"></canvas>

<script>
var ctx = document.getElementById("myChart");
var color = ["#ff6384", "#5959e6", "#2babab", "#8c4d15", "#8bc34a", "#607d8b", "#009688"];

var scatterChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
                label: 'Linea A',
                backgroundColor: "transparent",
                borderColor: color[1],
                pointBackgroundColor: color[1],
                pointBorderColor: color[1],
                pointHoverBackgroundColor: color[1],
                pointHoverBorderColor: color[1],
                data: [{
                    x: "2014-09-02",
                    y: 90,
                    id: '1A'
                }, {
                    x: "2014-11-02",
                    y: 96,
                    id: '2A'
                }, {
                    x: "2014-12-03",
                    y: 97,
                    id: '3A'
                }]
            },
            {
                label: 'Linea B',
                backgroundColor: "transparent",
                borderColor: color[2],
                pointBackgroundColor: color[2],
                pointBorderColor: color[2],
                pointHoverBackgroundColor: color[2],
                pointHoverBorderColor: color[2],
                data: [{
                    x: "2014-09-01",
                    y: 96,
                    id: "1B"
                }, {
                    x: "2014-10-04",
                    y: 95.8,
                    id: "2B"
                }, {
                    x: "2014-11-06",
                    y: 99,
                    id: "3B"
                }]
            }
        ]
    },
    options: {
        title: {
            display: true,
            text: 'Polveri',
            fontSize: 18
        },
        legend: {
            display: true,
            position: "bottom"
        },
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        'millisecond': 'MM/YY',
                        'second': 'MM/YY',
                        'minute': 'MM/YY',
                        'hour': 'MM/YY',
                        'day': 'MM/YY',
                        'week': 'MM/YY',
                        'month': 'MM/YY',
                        'quarter': 'MM/YY',
                        'year': 'MM/YY',
                    },
                    tooltipFormat: "DD/MM/YY"
                }
            }]
        }
    }
});

document.getElementById("myChart").onclick = function(evt) {
    var activePoints = scatterChart.getElementsAtEvent(evt);
    var firstPoint = activePoints[1];
    console.log(firstPoint._datasetIndex);
    console.log(firstPoint._index);
    var label = scatterChart.data.labels[firstPoint._index];
    console.log(scatterChart.data.datasets[0].data[0].id);
    var value = scatterChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
    if (firstPoint !== undefined)
        alert(label + ": " + value);
    };  
    </script>
</body>

Answer 1

您必须更改label变量分配，

var label = scatterChart.data.labels[firstPoint._index];

要，

var label = scatterChart.data.datasets[firstPoint._index].label;

您可能还需要将alert声明更改为

alert(label + ": " + value.x);

以下是有效的演示： https://jsfiddle.net/dt6c9jev/

希望这有帮助！

Answer 2

您需要使用.getElementAtEvent()原型方法而不是.getElementsAtEvent()。差异是第一个只返回您单击的单个点而另一个返回X轴上的所有点。

这是一个例子。

document.getElementById("canvas").onclick = function(evt) {
  var activePoint = myLine.getElementAtEvent(event);

  // make sure click was on an actual point
  if (activePoint.length > 0) {
    var clickedDatasetIndex = activePoint[0]._datasetIndex;
    var clickedElementindex = activePoint[0]._index;
    var label = myLine.data.labels[clickedElementindex];
    var value = myLine.data.datasets[clickedDatasetIndex].data[clickedElementindex];     
    alert("Clicked: " + label + " - " + value);
  }
};

您可以在此codepen看到演示。

Chart.js多个数据集

2 个答案: