将Django数据传入独立ChartJS文件时出现JSON语法错误

问题根源 #

你遇到的报错是因为Django直接输出的是Python风格的列表字符串（使用单引号），而JSON规范强制要求字符串必须用双引号；同时如果数据里存在Python的None（而非你数据中的字符串'None'），也需要转为JSON的null。escapejs过滤器仅转义JS特殊字符，无法将Python列表格式转换为合法JSON，因此JSON.parse会失败。

推荐解决方案：使用Django官方json_script标签 #

这是Django官方推荐的安全传递JSON数据到JS的方式，自动处理引号、转义和格式问题：

1. 替换模板中的隐藏输入框
   在HTML模板里删除原来的<input>，添加：

   {{ interactions_list|json_script:"interactions-data" }}
   

2. 在独立JS文件中解析数据并渲染ChartJS

   // 获取并解析JSON数据
   const interactionsData = JSON.parse(document.getElementById('interactions-data').textContent);
   
   // 预处理数据：将'None'转为null（适配ChartJS空值渲染）
   const formattedData = interactionsData.map(item => {
     return [item[0], item[1] === 'None' ? null : parseInt(item[1])];
   });
   
   // 初始化折线图
   new Chart(document.getElementById('your-chart-id'), {
     type: 'line',
     data: {
       labels: formattedData.map(item => item[0]),
       datasets: [{
         label: '交互量',
         data: formattedData.map(item => item[1]),
         borderColor: '#2196F3',
         fill: false
       }]
     }
   });
   

备选方案：手动转JSON（坚持用隐藏输入框） #

如果一定要保留隐藏输入框的方式，需要在视图层提前将数据转为合法JSON：

1. 视图中转换数据格式

   import json
   
   def your_view(request):
       # 原始数据
       interactions_list = [['02/06/2023', 'None'], ['02/07/2023', 'None'], ...]
       # 转为标准JSON字符串
       interactions_json = json.dumps(interactions_list)
       return render(request, 'your_template.html', {'interactions_json': interactions_json})
   

2. 模板中传递数据

   <input type="hidden" id="interactions_list" value="{{ interactions_json|safe }}">
   

3. JS中解析使用

   const interactionsData = JSON.parse(document.getElementById('interactions_list').value);
   // 后续数据处理和图表初始化同推荐方案
   

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