如何为ChartJSImage环形图添加自定义可见标签？

可以实现，你需要借助Chart.js的chartjs-plugin-datalabels插件来自定义弧段标签，同时修正代码中配置结构的错误（原代码将options放在了data对象内部，这是不符合Chart.js规范的）。

效果说明 #

• 当前效果：环形图仅显示图例（Carbs、Protien、Fats），弧段上无自定义标签
• 期望效果：环形图的每个弧段上显示对应数据值加"cal"的标签（如300cal、50cal、100cal）

修正后的实现代码 #

const line_chart = ChartJSImage().chart({
  "type": "doughnut",
  "data": { 
    labels: ['Carbs', 'Protien', 'Fats'],
    datasets: [{
      label: 'Calorie Intake',
      data: [300, 50, 100],
      backgroundColor: [
        'rgb(255, 99, 132)',
        'rgb(54, 162, 235)',
        'rgb(255, 205, 86)'
      ]
    }]
  },
  "options": {
    plugins: { 
      legend: {
        display: true,
        position: 'top',
        align: 'center'
      },
      datalabels: {
        display: true,
        formatter: function(value) {
          return `${value}cal`; // 格式化数据为"数值+cal"格式
        },
        color: '#000', // 标签文字颜色
        font: {
          weight: 'bold'
        }
      }
    }
  },
  "plugins": [
    {
      "id": "datalabels",
      "beforeInit": function(chart) {
        chart.plugins.register(require('chartjs-plugin-datalabels'));
      }
    }
  ]
})
.backgroundColor('white')
.width(500)
.height(300);

line_chart.toFile('myimg.png')

关键实现要点 #

• 修正配置结构：将options从data对象中移出，与data同级，这是Chart.js配置的标准结构，原代码的错误会导致配置不生效。
• 使用数据标签插件：通过chartjs-plugin-datalabels插件的formatter函数，将原始数据值格式化为数值+cal的字符串，实现自定义标签内容。
• 样式自定义：可以通过datalabels配置项调整标签的颜色、字体粗细等样式，匹配你的视觉需求。

ChartJSImage支持加载官方维护的Chart.js插件，chartjs-plugin-datalabels属于支持范围，因此该配置可以正常生成符合期望的环形图。

内容的提问来源于stack exchange，提问作者Issac Howard