【发布时间】：2016-05-02 22:57:39
【问题描述】：
我在 Stack Overflow 中找到了similar questions，但它们都在一两年前得到了解决。现在 Chart.js 已经出现在第 2 版中，并且许多文档发生了变化。有人可以帮我展示一个带有标签的饼图示例 - 还是可以看到带有所有细分工具提示的饼图？
更新
感谢@potatopeelings，他的回答非常适合 Chart.js v2.1。
虽然我最初在这里询问如何在饼图上永久显示工具提示，但我找到了一个更好的解决方案：将值显示为百分比标签！现在在 Chart.js v2.1 中启用了饼图。在图表选项中：
animation: {
duration: 0,
onComplete: function () {
var self = this,
chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = '18px Arial';
ctx.textAlign = "center";
ctx.fillStyle = "#ffffff";
Chart.helpers.each(self.data.datasets.forEach(function (dataset, datasetIndex) {
var meta = self.getDatasetMeta(datasetIndex),
total = 0, //total values to compute fraction
labelxy = [],
offset = Math.PI / 2, //start sector from top
radius,
centerx,
centery,
lastend = 0; //prev arc's end line: starting with 0
for (var val of dataset.data) { total += val; }
Chart.helpers.each(meta.data.forEach( function (element, index) {
radius = 0.9 * element._model.outerRadius - element._model.innerRadius;
centerx = element._model.x;
centery = element._model.y;
var thispart = dataset.data[index],
arcsector = Math.PI * (2 * thispart / total);
if (element.hasValue() && dataset.data[index] > 0) {
labelxy.push(lastend + arcsector / 2 + Math.PI + offset);
}
else {
labelxy.push(-1);
}
lastend += arcsector;
}), self)
var lradius = radius * 3 / 4;
for (var idx in labelxy) {
if (labelxy[idx] === -1) continue;
var langle = labelxy[idx],
dx = centerx + lradius * Math.cos(langle),
dy = centery + lradius * Math.sin(langle),
val = Math.round(dataset.data[idx] / total * 100);
ctx.fillText(val + '%', dx, dy);
}
}), self);
}
},
【问题讨论】：
-
我认为这就是您要找的。 stackoverflow.com/questions/25661197/…
-
@Luke 嗨，感谢您抽出宝贵的时间。不幸的是，该示例使用的是 chart.js v1.0.2。 v2 上的数据结构和配置与 v1 不同
-
我会使用这个：github.com/chartjs/chartjs-plugin-datalabels。这个插件应该做你想做的。
标签： javascript jquery charts pie-chart chart.js