使用Chart.js与doughnutlabel.js实现环形图中心显示总数问题求助

以下是针对你的环形图中心总人数不显示问题的排查和修改步骤：

核心排查点与修改建议 #

1. 修正脚本引入顺序 #

确保页面中先加载Chart.js，再加载doughnutlabel.js插件，否则插件无法正确注册到Chart.js实例中。

2. 调整配置键名与函数位置 #

部分版本的doughnutlabel插件要求配置键名为驼峰式doughnutLabel，而非全小写的doughnutlabel；同时将getTotal函数移到事件绑定前，避免变量提升的潜在问题：

// 提前定义求和函数，确保事件触发时可正常调用
var getTotal = function(chart) {
  var sum = chart.data.datasets[0].data.reduce((a, b) => a + b);
  console.log('总人数:', sum); // 控制台调试，确认数值是否为96
  return `${sum}`;
}

$('#exampleAccordion').on('shown.bs.collapse', function() {
  var ctx = document.getElementById("chart-area2").getContext('2d');
  var myChart2 = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: <?php echo json_encode($CDC_time);?>,
      datasets: [{
        backgroundColor: ["#5969ff", "#ff407b", "#25d5f2", "#ffc750", "#2ec551", "#7040fa", "#ff004e"],
        data: <?php echo json_encode($CDC_employees);?>,
      }]
    },
    options: {
      plugins: {
        // 修正配置键名为驼峰式doughnutLabel
        doughnutLabel: {
          labels: [{
            text: getTotal,
            font: {
              size: 50, // 用数字类型而非字符串
              color: 'grey'
            }
          }, {
            text: 'Members',
            font: {
              size: 40,
              color: 'grey'
            }
          }]
        },
        // 暂时注释labels插件，排查冲突
        /*labels: [{
          render: 'label',
          fontSize: '12',
          position: 'outside'
        }, {
          render: 'percentage',
          fontColor: '#000000',
          fontSize: '12',
          precision: 0
        }]*/
      },
      legend: {
        display: false,
      },
      responsive: true,
      maintainAspectRatio: true,
      // 设置环形内边距，确保中心有足够空间显示文字
      cutout: '70%'
    }
  });
});

3. 排查插件冲突 #

你同时使用了labels第三方插件，可能与doughnutlabel的渲染逻辑冲突。先注释掉labels插件配置，测试中心文字是否正常显示；若恢复显示，再尝试调整两个插件的配置优先级或更换兼容的版本。

4. 确认数值计算正确性 #

通过console.log(sum)在浏览器控制台查看求和结果，确认$CDC_employees的JSON数据是否正确传递，求和逻辑是否得到预期的96。

内容的提问来源于stack exchange，提问作者Joe St Onge