Django中Google Chart图表无法显示的问题求助

从Django视图向前端传递如下数据：

data = [["Name", "Ammount"], 
        ["x", 0], 
        ["y", 2],
        ["z", 1]]

尝试用Google Charts渲染横向条形图，但图表区域完全空白，前端HTML代码如下：

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href={% static "assets/icon.ico" %} />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href={% static "css/styles.css" %} rel="stylesheet" />

        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            
            google.charts.load('current', {'packages':['bar']});
            google.charts.setOnLoadCallback(drawChart_decision_type);     
            function drawChart_decision_type() {
                var data3 = google.visualization.arrayToDataTable({{ my_data|safe }});
    
                var options3 = {
                    chart: {
                        title: 'Stuff',
                        subtitle: 'Test',
                },
                backgroundColor: '#FFFFFF',
                bars: 'horizontal' // Required for Material Bar Charts.
                };
    
                var chart3 = new google.charts.Bar(document.getElementById('barchart_materia'));
    
                chart3.draw(data3, google.charts.Bar.convertOptions(options3));
            }

        </script>    
    </head>
    <body>
                <div class="card_view">
                    <div id="barchart_material" style="width: 700px; height: 300px;"></div>
                </div>

<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src={% static "js/scripts.js" %} ></script>
</body>
</html>

1. DOM元素ID拼写错误 #

这是图表空白的核心原因：

• JS代码中获取的容器ID是 barchart_materia（末尾少了字母l）
• HTML中实际的容器ID是 barchart_material
• 修复：将JS里的document.getElementById('barchart_materia')改为document.getElementById('barchart_material')

2. Django数据传递的格式隐患 #

直接用{{ my_data|safe }}传递Python列表到JS，可能因转义问题导致数据解析失败，推荐用Django的json_script标签安全传递：

• 视图层：直接将列表数据传入模板即可
• 模板层：在<body>内添加：

  {{ my_data|json_script:"chart-data" }}
  

• JS层：修改数据获取逻辑：

  var rawData = JSON.parse(document.getElementById('chart-data').textContent);
  var data3 = google.visualization.arrayToDataTable(rawData);
  

3. 配置对象语法错误 #

options3里chart对象的subtitle属性后多了一个尾逗号，虽然JS容错，但严格模式下可能报错，建议删除：

var options3 = {
    chart: {
        title: 'Stuff',
        subtitle: 'Test' // 移除此处逗号
    },
    backgroundColor: '#FFFFFF',
    bars: 'horizontal'
};

Django视图示例 #

from django.shortcuts import render

def chart_view(request):
    data = [["Name", "Ammount"], 
            ["x", 0], 
            ["y", 2],
            ["z", 1]]
    return render(request, 'chart.html', {'my_data': data})

前端HTML模板 #

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href="{% static 'assets/icon.ico' %}" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="{% static 'css/styles.css' %}" rel="stylesheet" />

        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load('current', {'packages':['bar']});
            google.charts.setOnLoadCallback(drawChart_decision_type);     
            
            function drawChart_decision_type() {
                // 安全解析传递的数据
                var rawData = JSON.parse(document.getElementById('chart-data').textContent);
                var data3 = google.visualization.arrayToDataTable(rawData);
    
                var options3 = {
                    chart: {
                        title: 'Stuff',
                        subtitle: 'Test'
                    },
                    backgroundColor: '#FFFFFF',
                    bars: 'horizontal'
                };
    
                // 修正ID拼写
                var chart3 = new google.charts.Bar(document.getElementById('barchart_material'));
                chart3.draw(data3, google.charts.Bar.convertOptions(options3));
            }
        </script>    
    </head>
    <body>
        <div class="card_view">
            <!-- 添加json_script标签传递数据 -->
            {{ my_data|json_script:"chart-data" }}
            <div id="barchart_material" style="width: 700px; height: 300px;"></div>
        </div>

<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="{% static 'js/scripts.js' %}"></script>
</body>
</html>

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