Question

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

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

对于仪表板视图，我的用户更愿意在段上快速查看一些数据标签 - 与Excel一样 - 可能更容易用图像解释：

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

我在这里找到的其他解决方案的问题是他们只是在细分中显示价值，但有些细分因素太小而不能成为前进之路。

还有其他解决方案总是显示工具提示 - 但是有很多重叠并且通常看起来非常糟糕。

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

Answer 1

实际上可以在图例中显示数据（我已经为我在工作中创建的仪表板做了这个）。您只需使用generateLabels legend label property即可实现此目标。

下面是一个示例，显示图例中括号内的数据值（这是在从函数返回的图例项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 [];
  }
}

您可以在此codepen看到它的实际效果。

Answer 2

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

Chart.js - 在饼图上显示数据标签引出线

2 个答案: