Chart.js-在饼图上显示数据标签前导行

Question

我一直在使用Chart.Js，但由于时间限制和个人对D3等人的SVG路线的偏好，我尽最大努力避免进入画布本身。

我在仪表板页面上混合了各种图表，除了一个问题外，其他一切看起来都很棒——你必须将鼠标悬停在饼图段上才能看到潜在的%或值。

对于仪表板视图，我的用户更喜欢快速查看数据段上的一些数据标签，就像Excel一样，可能更容易用图像进行解释：

https://support.office.com/en-gb/article/Display-or-hide-data-label-leader-lines-in-a-pie-chart-d7e7c62e-aaa5-483a-aa00-6d2c437df61b

我在这里发现的其他解决方案的问题是，它们只是在段中显示值，但是有些段太小，不能作为前进的方向。

还有一些解决方案总是显示工具提示，但是有很多重叠，通常看起来非常可怕。

如果legend可以在它旁边显示数据，我甚至会很高兴，但我不明白为什么更多的人没有要求相同的功能-我是不是遗漏了什么？

Answer 1

实际上，可以在图例中显示数据（我在工作中创建的仪表盘就是这样做的）。您只需要使用generateLabel图例标签属性即可实现这一点。

下面是一个示例，显示了图例中括号中的数据值（这是在函数返回的图例项text属性中完成的）。

generateLabels: function(chart) {
  var data = chart.data;
  if (data.labels.length && data.datasets.length) {
    return data.labels.map(function(label, i) {
      var meta = chart.getDatasetMeta(0);
      var ds = data.datasets[0];
      var arc = meta.data[i];
      var custom = arc.custom || {};
      var getValueAtIndexOrDefault = Chart.helpers.getValueAtIndexOrDefault;
      var arcOpts = chart.options.elements.arc;
      var fill = custom.backgroundColor ? custom.backgroundColor : getValueAtIndexOrDefault(ds.backgroundColor, i, arcOpts.backgroundColor);
      var stroke = custom.borderColor ? custom.borderColor : getValueAtIndexOrDefault(ds.borderColor, i, arcOpts.borderColor);
      var bw = custom.borderWidth ? custom.borderWidth : getValueAtIndexOrDefault(ds.borderWidth, i, arcOpts.borderWidth);

      return {
        // here is where we are adding the data values to the legend title
        text: label + " (" + ds.data[i].toLocaleString() + ")",
        fillStyle: fill,
        strokeStyle: stroke,
        lineWidth: bw,
        hidden: isNaN(ds.data[i]) || meta.data[i].hidden,
        index: i // extra data used for toggling the correct item
      };
    });
  } else {
    return [];
  }
}

您可以在这个代码笔中看到它的作用。

Answer 2

这项功能目前还不可用，因此没有真正快速的解决方案。