Chart.js饼图插件：如何显示标签而非数值及指定图表关闭数值显示

嘿，看来你用的应该是chartjs-plugin-datalabels插件（这是Chart.js最常用的自动添加数据标签的插件），别着急，咱们一步步来调整它的行为：

一、把饼图的数值显示改成标签 #

你只需要在图表的options里新增plugins.datalabels配置，用formatter函数返回对应的标签即可。同时可以调整标签的位置、对齐方式让显示更美观：

修改你的fillPie()函数，更新options部分：

fillPie() {
 // Three arrays have same length
 let labelsArr = []; // Array with some names
 let values = []; // Array with values
 let randomColor = [];
 var ctx = document.getElementById('pie-chart').getContext('2d');
 var chart = new Chart(ctx, {
 type: 'pie',
 data: {
 labels: labelsArr,
 datasets: [{
 backgroundColor: randomColor,
 data: values,
 hoverBackgroundColor: "#fba999"
 }]
 },
 options: {
 legend: {
 display: false
 },
 // 新增datalabels配置
 plugins: {
 datalabels: {
 // 自定义显示内容为标签
 formatter: function(value, context) {
 return context.chart.data.labels[context.dataIndex];
 },
 // 调整标签位置（可选，根据需求设置）
 align: 'end',
 position: 'outside',
 // 可以再加点样式让标签更清晰
 color: '#333',
 font: {
 weight: 'bold'
 }
 }
 }
 }
 });
}

原理是context参数里包含了图表的所有数据信息，context.dataIndex对应当前数据点的索引，用它就能拿到labelsArr里的对应标签啦。

二、为指定图表关闭数值显示 #

如果某个图表不需要这个插件的自动显示，直接在该图表的options.plugins里把datalabels.display设为false就行：

// 示例：创建一个不需要显示标签/数值的图表
var ctx2 = document.getElementById('another-chart').getContext('2d');
var chart2 = new Chart(ctx2, {
 type: 'bar',
 data: { /* 你的数据 */ },
 options: {
 plugins: {
 datalabels: {
 display: false // 关闭该图表的标签显示
 }
 }
 }
});

这样就能精准控制每个图表的显示状态了，是不是很简单？

内容的提问来源于stack exchange，提问作者Nar Jovan