Chart.js 多个数据集

Question

我在使用Chart.js时遇到了问题。

我想在图表上点击某个点时弹出一个警告框，告诉我该数据集中设置的ID值。

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

有人能帮帮我吗？谢谢！

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 src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js">
</script>
<canvas id="myChart" width="400" height="100"></canvas>

- PietroR91

---

你是否忘记在上面的代码中添加 Moment.js 了？.. 它对我来说不起作用。 - David R

+1 是因为在阅读了你的示例代码之前，我实际上不知道如何创建具有多个数据集的图表。 - F1Krazy

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/

希望这有所帮助！

- David R

---

谢谢您的回复，但它并没有按照我的预期工作； 如果我点击第二个紫色点（Linea A），它会打印：“Linea B 04/10/14”，而不是像应该做的那样打印“Linea A 02-11-14” :/ - PietroR91

你需要动态获取 activePoints。目前，看起来你正在获取硬编码值作为 var firstPoint = activePoints[1];。 - David R

DEMO中提供的解决方案非常完美，但是答案与此处提供的解释毫不相关... - Alexa

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上看到演示。

- jordanwillis