Chart.js 多数据集答案

【问题标题】：Chart.js Multiple datasetChart.js 多数据集
【发布时间】：2017-03-29 06:12:42
【问题描述】：

我对 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>

【问题讨论】：

您是否忘记在上面的代码中添加Moment.js？.. 它不适合我。
+1 因为在阅读您的示例代码之前，我实际上并不知道如何创建包含多个数据集的图表。

标签： javascript charts chart.js

【解决方案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/

希望这会有所帮助！

【讨论】：

感谢您的回复，但它没有按我的预期工作；如果我单击第二个紫色点（Linea A），它会打印：“Linea B 04/10/14”，而不是“Linea A 02-11-14”，因为它会这样做：/
您需要动态获取activePoints。目前，您似乎正在获取硬编码值var firstPoint = activePoints[1];

【解决方案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看到一个演示。

【讨论】：