Django展示月度注册用户统计图表的语法错误解决咨询

问题说明 #

作为Django新手，想要实现展示月度注册用户总数的统计图表。已在view.py中获取月度用户注册数据，并将graph_data传递至模板，但在独立的graph.js文件中使用{{graph_data}}时出现语法错误。

错误原因 #

Django模板引擎仅处理HTML模板文件，不会解析独立的.js文件。直接在graph.js中使用{{graph_data}}时，模板变量不会被替换为实际数据，而是以原始字符串形式保留，导致JS语法解析错误。

解决方法 #

以下三种方法均可解决该问题，按需选择：

方法1：将JS代码嵌入HTML模板 #

把Chart初始化代码直接写在HTML模板中，让Django模板引擎正常解析变量：

首先更新view.py，将月份标签也传递到模板：

def dashboard(request):
    # ... 原有代码不变
    labels = [data['month'].strftime('%B %Y') for data in monthly_data]
    values = [data['count'] for data in monthly_data]

    content = {
        # ... 原有键值对
        'graph_data': values,
        'graph_labels': labels,  # 新增月份标签
    }
    return render(request, 'admin/dashboard.html', content)

然后在admin/dashboard.html中嵌入Chart代码：

<!-- 确保页面存在用于渲染图表的canvas元素 -->
<canvas id="user-reg-chart"></canvas>

<script>
const ctx2 = document.getElementById('user-reg-chart').getContext('2d');
// 假设gradientStroke1已在其他地方定义
new Chart(ctx2, {
    type: "line",
    data: {
        labels: {{ graph_labels|safe }},
        datasets: [{
            label: "月度注册用户数",
            tension: 0.4,
            borderWidth: 0,
            pointRadius: 0,
            borderColor: "#16b385",
            borderWidth: 3,
            backgroundColor: gradientStroke1,
            fill: true,
            data: {{ graph_data|safe }},
            maxBarThickness: 6
        }]
    }
});
</script>

方法2：通过全局变量传递数据 #

在HTML模板中定义全局变量，再在独立JS文件中引用：

在admin/dashboard.html中添加全局变量：

<script>
// 使用|safe确保数据以合法JS格式输出
window.graphData = {{ graph_data|safe }};
window.graphLabels = {{ graph_labels|safe }};
</script>
<!-- 引入你的graph.js文件 -->
<script src="{% static 'path/to/graph.js' %}"></script>

修改graph.js：

new Chart(ctx2, {
    type: "line",
    data: {
        labels: window.graphLabels,
        datasets: [{
            label: "月度注册用户数",
            tension: 0.4,
            borderWidth: 0,
            pointRadius: 0,
            borderColor: "#16b385",
            borderWidth: 3,
            backgroundColor: gradientStroke1,
            fill: true,
            data: window.graphData,
            maxBarThickness: 6
        }]
    }
});

方法3：使用Django的json_script标签（推荐） #

json_script标签会安全地将数据序列化为JSON并嵌入HTML，避免XSS风险：

更新admin/dashboard.html：

<!-- 用json_script传递数据，指定ID用于JS获取 -->
{{ graph_data|json_script:"graph-data" }}
{{ graph_labels|json_script:"graph-labels" }}

<script src="{% static 'path/to/graph.js' %}"></script>

修改graph.js：

// 从HTML中获取JSON数据并解析
const graphData = JSON.parse(document.getElementById('graph-data').textContent);
const graphLabels = JSON.parse(document.getElementById('graph-labels').textContent);

new Chart(ctx2, {
    type: "line",
    data: {
        labels: graphLabels,
        datasets: [{
            label: "月度注册用户数",
            tension: 0.4,
            borderWidth: 0,
            pointRadius: 0,
            borderColor: "#16b385",
            borderWidth: 3,
            backgroundColor: gradientStroke1,
            fill: true,
            data: graphData,
            maxBarThickness: 6
        }]
    }
});

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