Chart.js配置datalabels标签格式化不生效如何解决

你写的datalabels相关配置不生效，核心原因是数据标签功能不是Chart.js核心库内置能力，对应的chartjs-plugin-datalabels是独立发布的官方插件，你仅在配置项里声明了插件参数，但没有引入、注册插件，所以相关配置根本不会被Chart.js识别执行。

按照以下步骤调整即可正常显示格式化后的百分比标签：

• 首先引入和你当前使用的Chart.js版本匹配的datalabels插件资源：Chart.js 3.x/4.x 版本需搭配 2.x 版本的datalabels插件，Chart.js 2.x 版本需搭配 1.x 版本的datalabels插件，版本不兼容同样会导致插件失效。
• 在初始化图表实例前，全局注册插件，注册代码如下：

Chart.register(ChartDataLabels);

• 如果不需要全局启用插件，也可以仅针对当前环形图实例注册插件，调整后的完整可运行代码如下：

var donutEl = document.getElementById("donut").getContext("2d");

var pieChart = new Chart(donutEl, {
  type: 'doughnut',
  // 单实例注册datalabels插件
  plugins: [ChartDataLabels],
  data: {
    datasets: [
      {
        data: [10, 20, 15, 5, 50],
        backgroundColor: [ 
          'rgb(255, 99, 132)', 
          'rgb(255, 159, 64)', 
          'rgb(255, 205, 86)', 
          'rgb(75, 192, 192)', 
          'rgb(54, 162, 235)', 
        ],
      },
    ],
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
  },
  options: {
    plugins: {
      datalabels: {
        formatter: (value) => {
          return value + '%';
        },
        // 建议补充标签颜色配置，避免和扇区背景色撞色导致看不清
        color: '#ffffff'
      }
    }
  }
})

额外提示：你原代码开头定义的var data = [4, 9, 5, 2];属于未被使用的冗余代码，不会影响功能运行，可以直接删除。

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