Django视图如何向模板内嵌JS脚本传递变量绘制图表

首先纠正常见误区：只要JS代码是直接写在Django渲染的HTML模板中，而非通过src属性引入的独立静态JS文件，完全可以直接使用Django模板语法取值，不存在语法限制。针对图表开发需求，有两种常用实现方式，按需选择即可。

方案1：简单标量直接插值（适配当前固定结构场景） #

如果只是传递数字、短字符串这类简单值，直接把{{ 变量名 }}写到对应位置即可，注意匹配JS的类型要求：

• 传递数字、布尔值时，不要给模板标签加引号，否则JS会识别为字符串导致图表计算异常
• 传递字符串时，搭配escapejs过滤器做转义，避免变量内容包含引号、换行符时破坏JS语法，同时规避XSS风险

代码示例 #

首先在视图函数中把需要的数值传入模板上下文：

# views.py
def device_chart(request):
    # 替换为实际业务计算逻辑
    wlws_val = 12.7
    upperbin_val = 19.2
    solenoid_val = 9.4
    brakesw_val = 15.1
    return render(request, 'chart.html', context={
        'wlws': wlws_val,
        'upperbin': upperbin_val,
        'solenoid': solenoid_val,
        'brakesw': brakesw_val
    })

然后修改模板中的JS代码，直接替换占位符即可：

<script type="text/javascript">
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" }],
        ["WLWS", {{ wlws }}, "#696969"],
        ["Upperbin", {{ upperbin }}, "#696969"],
        ["Solenoid", {{ solenoid }}, "#696969"],
        ["BrakeSW", {{ brakesw }}, "color: #696969"]
    ]);
    // 保留原有图表渲染后续逻辑
}
</script>

方案2：JSON序列化传递（适配复杂结构、高维护性场景） #

如果后续图表字段可能调整、或者要传递数组/字典这类复杂结构，推荐用Django内置的json_script模板标签，自动完成转义，不需要在JS代码里零散插入模板变量，维护性更好。

代码示例 #

视图层直接组装好完整的图表数据结构传入上下文：

# views.py
def device_chart(request):
    # 直接组装好图表需要的完整二维数组
    chart_data = [
        ["Element", "Density", { "role": "style" }],
        ["WLWS", 12.7, "#696969"],
        ["Upperbin", 19.2, "#696969"],
        ["Solenoid", 9.4, "#696969"],
        ["BrakeSW", 15.1, "color: #696969"]
    ]
    return render(request, 'chart.html', context={
        'chart_data': chart_data
    })

模板中先渲染序列化后的数据块，再在JS中读取解析：

<!-- 自动生成带id的script标签，存储JSON格式数据，自动做转义处理 -->
{{ chart_data|json_script:"chart-data" }}
<script type="text/javascript">
function drawChart() {
    // 直接读取解析好的数据传入图表方法
    const rawData = JSON.parse(document.getElementById('chart-data').textContent);
    var data = google.visualization.arrayToDataTable(rawData);
    // 保留原有图表渲染后续逻辑
}
</script>

注意：以上两种方式都只对模板内直接编写的JS代码生效，如果是独立的静态JS文件，Django不会对其做模板渲染，无法直接读取模板变量，这种场景可以用方案2的方式把数据挂载到页面上，再由静态JS读取即可。

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