使用fetch更新数据时Plotly图表无法渲染的问题排查

问题现象 #

• 页面首次加载时图表正常显示，通过点击切换按钮发起Fetch请求更新数据后，图表容器仅显示空的Plotly容器div：

  <div id="my_chart" class="plotly-graph-div" style="height:768px; width:1024px;"></div>
  

• 两次请求返回的chart数据长度一致，但控制台出现红色报错信息。

相关代码 #

后端视图代码（Python/Django） #

def analytics(request):
    data = get_chart(60)
    context = {
        'chart': data['chart'],
    }
    return render(request, 'app/analytics.html', context)


def get_chart(request):
    is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'
    if is_ajax:
        if request.method == 'GET':
            data = get_chart(int(request.GET.get('interval')))
            return JsonResponse({'chart': data['chart'], })
        return JsonResponse({'status': 'Invalid request'}, status=400)
    else:
        return HttpResponseBadRequest('Invalid request')

前端模板代码（HTML/JS） #

<div class="row justify-content-start mb-2">
  <div class="col"><a href="javascript:;" class="chart_scale" data-foo="1">1m</a></div>
  <div class="col"><a href="javascript:;" class="chart_scale" data-foo="60">1h</a></div>
</div>
<div class="row bg-light p-3 rounded justify-content-center align-items-center" id="chart">
  {{chart|safe}}
</div>

<script type="text/javascript">

var chart = document.getElementById('chart')

const chart_scales = document.getElementsByClassName('chart_scale')
for (const button of chart_scales) {
  button.addEventListener('click', function (e) {
    url = '/analytics/update/?interval=' + e.target.dataset.foo
    fetch(url, {
      method: "GET",
      headers: {
        "X-Requested-With": "XMLHttpRequest",
      },
    })
    .then(response => response.json())
    .then(data => {
      console.log(data['chart'])
      chart.innerHTML = data['chart']
    })
  })
}

</script>

问题原因 #

Plotly图表库在页面首次加载时会自动扫描DOM中的plotly-graph-div容器并执行渲染逻辑，但通过innerHTML插入新的图表HTML后，Plotly不会自动触发重新渲染。首次加载时模板渲染的HTML会被页面加载过程中的Plotly初始化脚本处理，而AJAX更新仅插入了静态HTML结构，缺少关键的渲染触发步骤。

控制台的红色内容是JavaScript错误，通常是渲染失败的直接原因，比如：

• Plotly对象未全局可用（Plotly is not defined）
• 图表数据格式不符合Plotly要求
• 容器ID匹配错误

解决方案 #

方案1：返回原始数据，前端手动渲染（推荐） #

修改后端接口，返回Plotly所需的原始数据（数据数组、布局配置），而非已渲染的HTML：

1. 后端调整get_chart函数，返回data和layout结构：

   def get_chart(interval):
       # 生成Plotly数据和布局
       plot_data = [...]  # 你的图表数据
       plot_layout = {...}  # 你的布局配置
       return {'data': plot_data, 'layout': plot_layout}
   

2. 前端修改Fetch回调，用Plotly API手动渲染：

   .then(data => {
       // 先清空旧图表，避免内存泄漏
       Plotly.purge(chart);
       // 渲染新图表
       Plotly.newPlot('chart', data.data, data.layout);
   })
   

方案2：手动触发Plotly渲染（兼容现有后端逻辑） #

如果需要保留返回HTML的逻辑，在插入innerHTML后手动调用Plotly渲染方法：

.then(data => {
    chart.innerHTML = data['chart'];
    // 针对返回的图表容器ID触发渲染
    Plotly.newPlot('my_chart');
})

注意：确保返回的HTML中容器ID（如my_chart）与前端调用时的ID一致。

控制台红色报错的意义 #

红色内容是JavaScript错误栈，直接指向渲染失败的具体原因：

• 若提示Plotly is not defined：检查页面是否在AJAX请求后仍能访问Plotly对象，可尝试将Plotly脚本放在页面头部，确保全局可用；
• 若提示数据相关错误：检查后端返回的图表数据格式是否符合Plotly规范；
• 若提示容器不存在：确认插入的HTML中容器ID与前端操作的ID一致。

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