使用Django动态数据制作饼图时的标签拼接问题

你的核心问题是模板循环写法错误，把所有标签/数据都拼接成了单个字符串，而Chart.js的labels和data需要的是数组元素列表，不是单一串字符。

修改后的完整代码： #

var config = {
  type: 'pie',
  data: {
    datasets: [{
      // 生成数字数组，数值不需要引号
      data: [{% for key, value in pie.items %}{{value}}{% if not forloop.last %},{% endif %}{% endfor %}],
      backgroundColor: [
        '#dc3912', '#ff9900', '#3366cc'
      ],
      label: ''
    }], 
    // 生成带引号的字符串数组，每个标签独立
    labels: [{% for key, value in pie.items %}"{{key}}"{% if not forloop.last %},{% endif %}{% endfor %}]
  },
  options: {
    responsive: true,
    plugins: {
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: ''
        }
    }
  }
};

关键修改点： #

• 移除外层包裹的双引号，将循环逻辑放在数组内部，让每个key/value成为独立的数组元素
• 利用Django模板的forloop.last变量控制逗号添加，避免数组末尾多出逗号引发JS语法错误
• data中的数值直接输出即可（无需引号），labels中的字符串需用双引号包裹以符合JS语法规范

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