求助：使用Chart.js绘制饼图无法显示，请求代码排查

核心问题分析 #

你的代码存在三个关键问题导致图表无法渲染：

1. 缺少chartjs-plugin-datalabels插件：配置中使用了datalabels插件，但Chart.js 2.x版本不会默认包含该插件，必须单独引入。
2. JS执行时机过早：如果JS代码在DOM元素加载前执行，document.getElementById('myChart')会返回null，无法获取画布上下文。
3. 配置细节错误：原代码中datalabels的backgroundColor回调逻辑有误，会导致标签背景色异常。

修复方案 #

方案1：移除数据标签功能（无需额外插件） #

如果不需要饼图上的百分比标签，可直接删除options.plugins.datalabels配置块，同时确保JS代码在DOM加载后执行。

修正后的完整代码：

<!DOCTYPE html>
<html>
<body>
  <canvas id="myChart" width="1600" height="900"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  <script>
    // 确保DOM加载完成后执行代码
    document.addEventListener('DOMContentLoaded', function() {
      let ctx = document.getElementById('myChart').getContext('2d'); 
      let labels = ['Pizza 🍕', 'Taco 🌮', 'Hot Dog 🌭', 'Sushi 🍣']; 
      let colorHex = ['#FB3640', '#EFCA08', '#43AA8B', '#253D5B'];
      
      let myChart = new Chart(ctx, {
        type: 'pie',
        data: {
          datasets: [{
            data: [30, 10, 40, 20],
            backgroundColor: colorHex
          }],
          labels: labels
        },
        options: {
          responsive: true,
          legend: {
            position: 'bottom'
          }
        }
      });
    });
  </script>
</body>
</html>

方案2：保留数据标签（引入对应版本插件） #

如果需要保留百分比标签，需引入与Chart.js 2.5.0兼容的chartjs-plugin-datalabels版本（推荐0.7.0），同时修正回调逻辑。

修正后的完整代码：

<!DOCTYPE html>
<html>
<body>
  <canvas id="myChart" width="1600" height="900"></canvas>
  <!-- 先引入Chart.js，再引入数据标签插件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      let ctx = document.getElementById('myChart').getContext('2d'); 
      let labels = ['Pizza 🍕', 'Taco 🌮', 'Hot Dog 🌭', 'Sushi 🍣']; 
      let colorHex = ['#FB3640', '#EFCA08', '#43AA8B', '#253D5B'];
      
      let myChart = new Chart(ctx, {
        type: 'pie',
        data: {
          datasets: [{
            data: [30, 10, 40, 20],
            backgroundColor: colorHex
          }],
          labels: labels
        },
        options: {
          responsive: true,
          legend: {
            position: 'bottom'
          },
          plugins: {
            datalabels: {
              color: '#fff',
              anchor: 'end',
              align: 'start',
              offset: -10,
              borderWidth: 2,
              borderColor: '#fff',
              borderRadius: 25,
              backgroundColor: (context) => {
                // 修正：获取对应索引的颜色值
                return context.dataset.backgroundColor[context.dataIndex];
              },
              font: {
                weight: 'bold',
                size: '10'
              },
              formatter: (value) => {
                return value + ' %';
              }
            }
          }
        }
      });
    });
  </script>
</body>
</html>

额外提示 #

• 建议优先使用较新的Chart.js稳定版本（如3.x或4.x），新版本兼容性更好，配置逻辑更清晰。
• 若升级版本，需注意配置结构变化（例如legend会移至plugins.legend下）。

内容的提问来源于stack exchange，提问作者Ahmed Ben Slama