Django项目中向Chart.js传递含None的整数列表的异常问题

核心异常原因 #

本次遇到的数组元素全部转字符串、None值无法被识别为null的问题，并非json序列化逻辑本身的缺陷——Django基于Python的json模块做序列化时，本身会自动完成类型映射：Python整数对应JS Number、Python字符串对应JS String、Python None对应JS null，完全匹配Chart.js的参数要求。
真正的问题根源是模板代码中残留的多余引号：如果在输出序列化变量的前后手动加了单/双引号，原本会被解析为原生JS数组字面量的内容，会被整体包裹成字符串，最终在浏览器端解析时就会出现全字符串数组、None被渲染为文本值"None"的异常表现。

正确实现步骤 #

• 后端视图层提前对需要传递给前端的数据做json序列化，直接将序列化结果存入模板上下文即可：

  import json
  from django.shortcuts import render
  
  def financial_chart_view(request):
      # 业务逻辑获取的原始数据，含None值
      tab_year = [2019, 2020, 2021, 2022, 2023, 2024, 2025]
      tab_sales = [10, 20, None, 30, 40, None, 50]
      tab_profit = [5, 12, 8, None, 25, 18, 32]
  
      # 直接序列化所有数组，不需要额外做类型转换
      context = {
          "tab_year": json.dumps(tab_year),
          "tab_sales": json.dumps(tab_sales),
          "tab_profit": json.dumps(tab_profit)
      }
      return render(request, "chart_page.html", context)
  

• 模板层输出变量时，只需要搭配|safe过滤器标记安全内容，绝对不要在变量前后手动添加引号，避免把原生JS数组字面量包裹成字符串：
  修正后的Chart.js初始化代码如下：

  var ctx = document.getElementById('financial-chart');
  var myChart = new Chart(ctx, {
      type: 'line',
      data: {
          labels: {{ tab_year|safe }},
          datasets: [{
              label: 'Sales',
              data: {{ tab_sales|safe }},
              backgroundColor: "#4C81B6",
              borderColor: "#4C81B6",
              borderWidth: 3,
              tension: 0.3,
              fill: false
          },
          {
              label: 'Profit',
              data: {{ tab_profit|safe }},
              backgroundColor: "#DF5558",
              borderColor: "#DF5558",
              borderWidth: 3,
              tension: 0.3,
              fill: false
          }]
      },
      options: {
          scales: {
              y: {
                  beginAtZero: true
              }
          }
      }
  });
  

效果验证 #

修正后在浏览器控制台查看渲染生成的实际JS代码，可以看到数组完全保留了原始数据类型：[10, 20, null, 30, 40, null, 50]，没有外层字符串包裹。Chart.js会自动识别数组里的null值：有效数值点位正常渲染连线，值为null的位置自动中断连线、不渲染对应内容，完全符合需求。

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