Javascript Chart.js 在饼图上显示标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42164818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js Show labels on Pie chart
提问by Jacob
I recently updated my charts.js library to the most updated version (2.5.0). This version doesn't show the labels on the chart.
我最近将我的 charts.js 库更新到了最新版本 (2.5.0)。此版本不显示图表上的标签。
I have an example of working one on fiddler: http://jsfiddle.net/g6fajwg8.
我有一个在 fiddler 上工作的例子：http: //jsfiddle.net/g6fajwg8。
However, I defined my chart exactly as in the example but still can not see the labels on the chart.
但是，我完全按照示例定义了我的图表，但仍然看不到图表上的标签。
Note: There are a lot of questions like this on Google and Stackoverflow but most of them are about previous versions which is working well on them.
注意：在 Google 和 Stackoverflow 上有很多这样的问题，但其中大部分都是关于以前的版本，这些版本在它们上运行良好。
var config = {
type: 'pie',
data: {
datasets: [{
data: [
1200,
1112,
533,
202,
105,
],
backgroundColor: [
"#F7464A",
"#46BFBD",
"#FDB45C",
"#949FB1",
"#4D5360",
],
label: 'Dataset 1'
}],
labels: [
"Red",
"Green",
"Yellow",
"Grey",
"Dark Grey"
]
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Doughnut Chart'
},
animation: {
animateScale: true,
animateRotate: true
}
}
};
window.pPercentage = new Chart(ChartContext, config);
回答by Jacob
It seems like there is no such build in option.
似乎没有这样的内置选项。
However, there is special library for this option, it calls: "Chart PieceLabel".
但是，此选项有一个特殊的库，它调用：“ Chart PieceLabel”。
Here is their demo.
这是他们的演示。
After you add their script to your project, you might want to add another option, called: "pieceLabel", and define the properties values as you like:
将他们的脚本添加到项目后，您可能需要添加另一个选项，称为：“pieceLabel”，并根据需要定义属性值：
pieceLabel: {
// mode 'label', 'value' or 'percentage', default is 'percentage'
mode: (!mode) ? 'value' : mode,
// precision for percentage, default is 0
precision: 0,
// font size, default is defaultFontSize
fontSize: 18,
// font color, default is '#fff'
fontColor: '#fff',
// font style, default is defaultFontStyle
fontStyle: 'bold',
// font family, default is defaultFontFamily
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
}
