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

1 回答

• 0

  可以使用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);
          }
        });
      }
    }
  });
  

  回复于 2024-05-05T21:39:51+08:00