我一直在使用 Chart.Js，但由于时间限制和个人对 D3 等 SVG 路线的偏好，我尽量避免进入 Canvas 本身。
我在仪表板页面上混合了各种图表，除了一个问题外，一切看起来都很棒 - 您必须将鼠标悬停在饼图段上才能看到底层的百分比或值。
对于仪表板视图，我的用户更愿意快速查看段上的一些数据标签 - 就像 Excel 一样 - 可能更容易用图像解释：
我在这里找到的其他解决方案的问题是它们只是在细分中显示值，但有些细分太小而无法成为前进的方向。
还有其他总是显示工具提示的解决方案 - 但有很多重叠，通常看起来很糟糕。
如果图例可以在它旁边显示数据，我什至会很高兴，但我不明白为什么更多的人没有请求相同的功能 - 我错过了什么吗？
【问题讨论】：
标签： javascript charts chart.js chart.js2
此功能目前不可用，因此没有真正快速的解决方案。
【讨论】：
实际上可以在图例中显示数据（我已经为我在工作中创建的仪表板做到了这一点）。您只需要使用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看到它的实际效果。
【讨论】：