数据标签ChartJS,删除重复项?

时间:2017-12-12 17:07:58

标签: javascript chart.js

有没有一种方法可以删除Chartjs中的重复数据标签?或者一种很好的方法可以将标签更好地放在数据点以上,这样它们就不会相互叠加了?

Chart.plugins.register({
  afterDatasetsDraw: function(chart, easing) {
    // To only draw at the end of animation, check for easing === 1
    var ctx = chart.ctx;

    chart.data.datasets.forEach(function (dataset, i) {
      var meta = chart.getDatasetMeta(i);
      if (!meta.hidden) {
        meta.data.forEach(function(element, index) {
          // Draw the text in black, with the specified font
          ctx.fillStyle = 'rgb(255, 255, 255)';

          var fontSize = 12;
          var fontStyle = 'normal';
          var fontFamily = 'Arial';
          ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

          // Just naively convert to string for now
          var dataString = dataset.data[index].toString();

          // Make sure alignment settings are correct
          ctx.textAlign = 'center';
          ctx.textBaseline = 'middle';
          var bodySpacing = 3;
          var padding = 10;
          var position = element.tooltipPosition();
          ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
        });
      }
    });
  }
});

enter image description here

澄清一下,数据是我的数据。代码取自chartjs样本数据标签页,基本上粘贴在。

1 个答案:

答案 0 :(得分:0)

在chart.js图书馆中访问此图表样式。它显示特定点的所有数据列表。 Here is link