Django传递日期数组至Plotly图表时出现转义字符导致图表失效

Django默认会自动转义HTML特殊字符，导致你传递的日期数组里的单引号被转成'，JS无法正确解析数组。以下是几种可行的解决方法：

方法1：使用json_script模板标签（推荐） #

这是Django官方推荐的安全传递数据到JS的方式，适用于Django 3.1及以上版本。

• views.py 代码保持不变：

context = {
    "dates":['2022/12/03', '2022/12/04', '2022/12/05'],
}

return render(request, "App/minifig_page.html", context=context)

• HTML模板修改：

<script>
{# 通过json_script生成包含数据的DOM元素 #}
{% json_script 'dates' %}

{# 读取并解析数据 #}
var xArray = JSON.parse(document.getElementById('dates').textContent);

// 后续Plotly图表初始化代码
var trace = {
  x: xArray,
  y: [你的价格数据],
  type: 'scatter'
};
Plotly.newPlot('your-chart-container', [trace]);
</script>

json_script会自动处理所有转义问题，同时避免XSS风险，是最安全可靠的方案。

方法2：使用safe过滤器（仅限可信数据） #

如果dates数组完全由后端生成，无任何用户输入内容，可以直接用safe过滤器关闭Django的自动转义：

• HTML模板修改：

<script>
var xArray = {{ dates|safe }};

// 后续Plotly代码
</script>

⚠️ 注意：若数据包含用户输入内容，使用safe可能引发XSS攻击，此场景不推荐使用。

方法3：视图中转为JSON字符串传递 #

在后端将数组序列化为JSON字符串后传递到前端：

• views.py 修改：

import json

context = {
    "dates_json": json.dumps(['2022/12/03', '2022/12/04', '2022/12/05']),
}

return render(request, "App/minifig_page.html", context=context)

• HTML模板修改：

<script>
// 直接使用解析后的JSON
var xArray = {{ dates_json|safe }};
</script>

这种方法需手动处理JSON序列化，兼容性较好但便捷性不如json_script。

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