在Django模板中自定义Plotly图表的可行方案咨询

核心思路：Plotly图表转HTML嵌入 #

Plotly官方标准方案是把Python生成的图表对象转换成HTML片段，再嵌入Django模板，这样就能直接使用官方所有自定义方法（比如调整边距、设置背景色等），完全兼容最新API。

步骤1：在视图中生成并转换图表 #

用Plotly的express或graph_objects生成图表，直接调用官方自定义方法，再转成HTML片段传给模板：

import plotly.express as px
import plotly.io as pio
from django.shortcuts import render

def multi_charts(request):
    # 你的数据列表示例
    line_data = [12, 19, 15, 23, 20]
    bar_data = [8, 14, 10, 18, 16]
    
    # 生成第一个图表，用官方方法自定义样式
    fig_line = px.line(x=[1,2,3,4,5], y=line_data, title="月度数据趋势")
    fig_line.update_layout(
        margin=dict(l=40, r=20, t=60, b=40),
        plot_bgcolor="#f8f9fa",
        font=dict(size=12)
    )
    
    # 生成第二个图表
    fig_bar = px.bar(x=[1,2,3,4,5], y=bar_data, title="月度数据对比")
    fig_bar.update_layout(
        margin=dict(l=40, r=20, t=60, b=40),
        plot_bgcolor="#f8f9fa"
    )
    
    # 转成HTML片段（full_html=False避免生成完整页面）
    line_html = pio.to_html(fig_line, full_html=False)
    bar_html = pio.to_html(fig_bar, full_html=False)
    
    return render(request, 'multi_charts.html', {
        'line_chart': line_html,
        'bar_chart': bar_html
    })

步骤2：在模板中嵌入图表 #

模板文件multi_charts.html里用|safe过滤器渲染HTML片段，避免Django转义内容：

<!DOCTYPE html>
<html>
<head>
    <title>多Plotly图表展示</title>
    <style>
        .chart-box {
            width: 80%;
            margin: 30px auto;
        }
    </style>
</head>
<body>
    <div class="chart-box">
        {{ line_chart|safe }}
    </div>
    <div class="chart-box">
        {{ bar_chart|safe }}
    </div>
</body>
</html>

步骤3：配置URL路由 #

在项目urls.py中添加对应路由：

from django.urls import path
from .views import multi_charts

urlpatterns = [
    path('charts/', multi_charts, name='multi_charts'),
]

关键注意事项 #

• 先安装依赖：pip install plotly
• 若要统一所有图表样式，可通过pio.templates.default设置全局模板，无需逐个调整
• 多个图表自动分配唯一ID，不会互相冲突

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