Django5.0.6集成Chart.js及datalabels插件问题求助

一、核心问题分析 #

• Chart.js 2.9.3与chartjs-plugin-datalabels@2.0.0-rc版本不兼容，注册插件会导致图表渲染失败
• 新版Chart.js（4.x+）对配置结构、图表类型、插件注册方式做了重大调整，直接替换版本会因为旧配置不兼容而无法渲染

二、分步解决步骤 #

1. 更新Chart.js及datalabels插件版本 #

替换base.html中的CDN引用为最新稳定兼容版本：

<!-- 替换原有的Chart.js和datalabels脚本 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>

2. 调整图表配置适配新版Chart.js #

修改data.html中的图表初始化代码，适配新版API：

let ctx = document.getElementById("chart").getContext('2d');
// 注册datalabels插件（必须在创建Chart实例前执行）
Chart.register(ChartDataLabels);

let chart = new Chart(ctx, {
  type: "bar", // 新版移除了horizontalBar，改用bar + indexAxis配置
  data: {
    labels: [{% for data in labels %} '{{data}}', {% endfor %}],
    datasets: [
      {
        label: "Job Week 13",
        backgroundColor: "#2d9f42",
        borderColor: "#030202",
        data: [{% for data in week13_count %}{{data}},{% endfor %}],
      },
      {
        label: "Job Day 1",
        backgroundColor: "#fc9003",
        borderColor: "#030202",
        data: [{% for data in job1_count %}{{data}},{% endfor %}],
      },
      {
        label: "Group",
        backgroundColor: "#79AEC8",
        borderColor: "#030202",
        data: [{% for data in count %}{{data}},{% endfor %}],
      }]            
  },
  options: {
    responsive: true,
    indexAxis: 'y', // 开启横向条形图
    title: {
      text: "Job outcome data",
      display: true
    },
    scales: {
      // 新版scales改为对象结构，不再使用数组
      x: {
        beginAtZero: true
      },
      y: {
        stacked: true
      }
    },
    plugins: {
      datalabels: {
        display: true, // 全局启用数据标签
        align: 'end',
        color: 'red'
      }
    }         
  }      
});    

3. 关键调整点说明 #

• 图表类型变更：移除旧版horizontalBar，改用bar类型 + indexAxis: 'y'实现横向条形图
• Scales配置重构：新版将xAxes/yAxes数组改为x/y对象结构，简化配置
• 插件注册方式：新版必须调用Chart.register(ChartDataLabels)注册插件，且需在创建Chart实例前执行
• 数据标签启用：新版datalabels插件默认全局禁用，需在plugins.datalabels中添加display: true

三、验证效果 #

完成上述修改后，图表将正常渲染并显示红色数据标签，同时使用最新稳定版Chart.js。

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