我最近将我的charts.js库更新为最新版本(2.5.0)。 此版本不会在图表上显示标签。
我有一个在fiddler上工作的例子:http://jsfiddle.net/g6fajwg8。
但是,我完全按照示例中的方式定义了我的图表,但仍无法看到图表上的标签。
注意:在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);
答案 0 :(得分:63)
似乎没有这样的内置选项。
但是,此选项有一个特殊的库,它调用:“Chart PieceLabel”。
这是他们的demo。
将脚本添加到项目后,您可能希望添加另一个名为“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"
}
答案 1 :(得分:4)
使用数据标签插件 https://chartjs-plugin-datalabels.netlify.app/
HTML集成
def EucAlg(x, y):
while y != 0:
x, y = y, x % y
print (x) # consider returning x rather than printing it
EucAlg(1112,695)
# 139
EucAlg(695,1112)
# 139
EucAlg(10,5)
# 5
EucAlg(13,11)
# 1
必须在Chart.js库之后加载!
您的代码将是这样
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
默认情况下,如果要覆盖它,您将看到数据集的值作为标签。例如按标签
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: '#36A2EB'
}
}
},
data: {
datasets: [{
// Change options only for labels of THIS DATASET
datalabels: {
color: '#FFCE56'
}
}]
}
答案 2 :(得分:0)
使用chartjs-plugin-datalabels并像这样设置选项
options: {
plugins: {
datalabels: {
formatter: function (value, context) {
return context.chart.data.labels[
context.dataIndex
];
},
},
},
},
它将呈现标签文本