Chart.js v3.2.1引入chartjs-plugin-datalabels后Doughnut环形图无法显示求助

你当前的报错是因为环形图（Doughnut）属于无坐标轴的图表类型，你在配置项中额外添加了scales字段配置x、y轴，和Chart.js v3的渲染逻辑冲突，引入datalabels插件后触发了渲染异常。你引入的Chart.js和chartjs-plugin-datalabels@2的版本适配是正确的，不需要调整依赖版本。

直接删除doughnutChartOptions中的整个scales配置块即可，修改后可正常渲染环形图和数据标签。建议将Chart.js的引入路径锁死3.2.1版本，避免自动升级到v4版本导致兼容性问题。如果需要调整标签显示样式，可以在plugins.datalabels中补充color、font等配置项。

HTML部分 #

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@3.2.1"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="canvas3-detailed"></canvas>

JS部分 #

//DOUGHNUT GRAPH
var doughnutChartData = {
  labels: [
    'Dr @ Fault',
    'TP @ Fault',
    'Wthr Evt',
    'Other'
  ],
  datasets: [
    {
      label: "slices",
      borderWidth: 3,
      data: [2,3,2,1],
      backgroundColor: [
        '#D6001C',
        '#00A3E0',
        '#52A886',
        '#2E3138'
      ],
      borderColor: [
        '#fff',
        '#fff',
        '#fff',
        '#fff'
      ]
    }
  ]
};

//DOUGHNUT CHART OPTIONS
var doughnutChartOptions = {
  responsive: true,
  plugins: {
    datalabels: {
      formatter: function (value, context) {
        return context.chart.data.labels[context.dataIndex];
      },
      // 可按需自定义标签样式
      color: '#fff',
      font: {
        weight: 'bold'
      }
    },
    title: {
      display: true,
      text: "Reported Fault Allocation",
      color: "#D6001C",
      font: {
        family: "AvenirNextLTW01-Regular",
        size: 16,
        style: 'normal'
      }
    },
    legend: {
      display: false
    }
  },
  elements: {
    point: {
      radius: 0
    }
  },
};

//DISPLAY DOUGHNUT GRAPH
var ctx = document.getElementById("canvas3-detailed").getContext("2d");
window.myDoughnut = new Chart(ctx, {
  plugins: [ChartDataLabels],
  type: "doughnut",
  data: doughnutChartData,
  options: doughnutChartOptions
});

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