Django模板加载优化：先渲染body.html再加载带数据的dashboard.html

1. 在DashboardGraphs视图中处理DataFrame并传递数据 #

先在视图里完成DataFrame的业务逻辑处理，再把数据转成前端可直接解析的JSON格式，通过模板上下文传递给dashboard.html：

from django.shortcuts import render
import pandas as pd
import json

def dashboard_graphs(request):
    # 你的DataFrame处理逻辑
    df = pd.DataFrame({
        'category': ['A', 'B', 'C', 'D'],
        'value': [15, 28, 12, 40]
    })
    # 转换为Highcharts兼容的二维数组格式（[类别, 数值]）
    chart_data = df[['category', 'value']].values.tolist()
    # 转成JSON字符串，关闭ASCII编码避免中文乱码
    data_json = json.dumps(chart_data, ensure_ascii=False)
    
    return render(request, 'dashboard.html', {
        'chart_data': data_json
    })

2. 在dashboard.html模板中接收并注入数据 #

在模板里把视图传递的JSON数据注入到JavaScript中，用|safe过滤器防止Django自动转义：

<div id="highcharts-container"></div>

<script>
// 解析模板传递的JSON数据为JS对象
const chartData = JSON.parse('{{ chart_data|safe }}');

// 初始化Highcharts图表
Highcharts.chart('highcharts-container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '数据可视化图表'
    },
    xAxis: {
        type: 'category'
    },
    series: [{
        name: '数值',
        data: chartData
    }]
});
</script>

3. 确保动态加载时调用正确的视图 #

因为是把dashboard.html嵌入到body.html的容器中，要保证加载时是请求DashboardGraphs视图，而非直接加载静态模板。可以在body.html里用AJAX请求视图URL，获取渲染后的内容再插入容器：

<div id="dashboard-container"></div>
<div id="loading-animation" style="display: none;">加载中...</div>

<script>
window.addEventListener('load', function() {
    const loadingEl = document.getElementById('loading-animation');
    const containerEl = document.getElementById('dashboard-container');
    
    // 显示加载动画
    loadingEl.style.display = 'block';
    
    // 请求DashboardGraphs视图对应的URL（需提前在urls.py中定义路由名称）
    fetch('{% url "dashboard_graphs" %}')
        .then(response => response.text())
        .then(html => {
            loadingEl.style.display = 'none';
            containerEl.innerHTML = html;
        })
        .catch(error => {
            loadingEl.style.display = 'none';
            containerEl.innerHTML = '图表加载失败';
            console.error(error);
        });
});
</script>

注意dashboard_graphs是你在urls.py中给该视图设置的路由名称，需保持一致。

4. 排查数据传递问题 #

• 在视图中打印data_json，确认DataFrame转换后的JSON格式符合Highcharts要求；
• 打开浏览器开发者工具，查看控制台是否有JSON解析或Highcharts初始化报错，根据错误信息调整数据格式。

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