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

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

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

Answer 2

实际上可以在图例中显示数据(我已经为我在工作中创建的仪表板执行此操作)。 只需使用generateLabels图例标签属性即可实现此目的。

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

您可以在此代码笔中看到它的实际效果。