如何在后端生成Plotly交互式图表并通过AJAX传输至Web应用？

方法1：后端传输Plotly图表JSON配置，前端渲染（优化你的思路1） #

Plotly的Python与JS API完全兼容，无需手动维护复杂的"生成指令"，后端只需将图表对象转为JSON，前端直接用Plotly.js渲染即可保留完整交互性。

后端代码修改（Django示例） #

import yfinance as yf
import plotly.graph_objects as go
from django.http import JsonResponse

def get_interactive_plot(request):
    datemin = "2023-01-01"
    datemax = "2024-01-01"
    tickerZ = "AAPL"
    rx = "_chart"
    
    aapl = yf.Ticker(tickerZ)
    ainfo = aapl.history(start=datemin, end=datemax)
    
    # 生成图表，注意将日期转为字符串避免JSON序列化问题
    fig = go.Figure(data=go.Scatter(
        x=ainfo.index.strftime('%Y-%m-%d'), 
        y=ainfo.Close, 
        mode='lines'
    ))
    # 将图表转为JSON格式
    fig_json = fig.to_json()
    
    return JsonResponse({"fig_json": fig_json})

前端AJAX渲染代码 #

// 页面需先引入Plotly.js（可使用CDN或本地文件）
fetch('/path-to-your-api/')
  .then(response => response.json())
  .then(data => {
    const fig = JSON.parse(data.fig_json);
    // 在指定容器中渲染交互式图表
    Plotly.newPlot('plot-container', fig.data, fig.layout);
  });

核心优势：

• 完全保留Plotly原生交互（缩放、悬停、数据下载等）
• 无需存储静态文件，数据传输量远小于图片
• 兼容所有Plotly图表类型，后端无需额外适配

方法2：后端生成HTML图表文件，前端通过iframe加载（验证你的思路2） #

该方案完全可行，无需数据库存储，只需将交互式图表导出为HTML文件，前端通过iframe加载即可。

后端代码修改 #

def get_plot_html(request):
    # 数据获取与图表生成逻辑同方法1
    fig = go.Figure(data=go.Scatter(
        x=ainfo.index.strftime('%Y-%m-%d'), 
        y=ainfo.Close, 
        mode='lines'
    ))
    
    # 生成HTML文件，使用CDN引入Plotly.js减小文件体积
    html_path = f"/Users/Xlibidish/Desktop/Django/static/{tickerZ}{rx}.html"
    fig.write_html(html_path, include_plotlyjs='cdn')
    
    # 返回静态文件URL供前端调用
    return JsonResponse({"html_url": f"/static/{tickerZ}{rx}.html"})

前端iframe加载代码 #

fetch('/path-to-your-api/')
  .then(response => response.json())
  .then(data => {
    const iframe = document.createElement('iframe');
    iframe.src = data.html_url;
    iframe.width = "100%";
    iframe.height = "600px";
    iframe.frameBorder = 0;
    document.getElementById('plot-container').appendChild(iframe);
  });

注意事项：

• 定期清理旧的HTML文件避免存储冗余
• iframe会隔离图表与主页面JS，需提前设置好宽高适配页面样式

方案对比 #

推荐选择：优先使用方法1，兼顾灵活性与资源效率；若需快速实现隔离式图表展示，可选择方法2。

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