显示折线图中每个数据点的标签答案

【问题标题】：Show label for every data point in line chart显示折线图中每个数据点的标签
【发布时间】：2017-05-03 01:47:03
【问题描述】：

我使用 Chart.js 渲染的折线图。我使用多个数据集，而数据集仅包含一个数据点 (x,y)（来自业务领域）。

图表在悬停时显示有关每个点的信息（x，y，标签），但是我希望默认/每次都在每个点旁边有一个标签，以显示相应的标签。

我在研究过程中找不到任何解决方案。

有什么建议吗？这真的可以用 Chart.js 实现吗？

【问题讨论】：

真的需要一个 plunkr 的东西。能够运行代码示例而无需使用 Charts.js 等进行设置可能会更快地揭示答案。

标签： chart.js

【解决方案1】：

可以使用plugins API 对 chart.js 执行此操作。这是我在生产中使用的插件示例，用于在图表呈现时显示所有数据点的标签。

注意，我目前只使用条形图，因此您可能需要对折线图进行一些调整。您还将看到，我添加了一个名为 showDatapoints 的新选项属性，我可以将其设置为 true 以便在某些图表上使用该插件。

Chart.plugins.register({
  afterDraw: function(chartInstance) {
    if (chartInstance.config.options.showDatapoints) {
      var helpers = Chart.helpers;
      var ctx = chartInstance.chart.ctx;
      var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);

      // render the value of the chart above the bar
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      ctx.fillStyle = fontColor;

      chartInstance.data.datasets.forEach(function (dataset) {
        for (var i = 0; i < dataset.data.length; i++) {
          var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
          var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
          var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
          ctx.fillText(dataset.data[i], model.x, yPos);
        }
      });
    }
  }
});

【讨论】：