如何为Python导出的Plotly图表JSON对应的最外层div添加ID

两种阶段均可实现自定义ID的添加，优先推荐前端方案，无需修改现有Python导出逻辑：

方案1：前端渲染阶段添加（推荐） #

Plotly.newPlot方法会返回Promise，渲染完成后即可获取到容器DOM，选中Plotly自动生成的最外层div添加ID即可，修改你现有<script>部分的代码如下：

var rolling_permit_fig = //**将JSON导出结果粘贴在此处 **;
Plotly.newPlot('rollingPermitChart', rolling_permit_fig, {}).then(chart => {
  // 选中Plotly生成的最外层div，添加自定义ID
  const plotOuterDiv = chart.querySelector('.js-plotly-plot');
  plotOuterDiv.id = 'your-custom-id';
});

如果只是为了给该元素应用自定义CSS，甚至可以不用额外加ID，直接通过类选择器匹配即可：

#rollingPermitContainer .js-plotly-plot {
  /* 在这里写你的自定义样式 */
}

方案2：Python端导出时添加 #

如果不希望在前端做修改，可以放弃JSON导出方案，改为直接导出HTML片段，手动添加ID后传给Flask模板渲染即可：

import plotly.graph_objects as go
import plotly.offline
import numpy as np

x = np.arange(10)
fig = go.Figure(data=go.Scatter(x=x, y=x**2))
# 导出不带Plotly JS依赖的div片段
raw_plot_div = plotly.offline.plot(fig, output_type='div', include_plotlyjs=False)
# 给最外层div添加自定义ID
div_with_custom_id = raw_plot_div.replace('<div ', '<div id="your-custom-id" ', 1)
# 后续将div_with_custom_id传入Flask模板，直接渲染即可

注意：如果坚持使用原有JSON导出逻辑，Python端无法直接添加ID，因为JSON仅存储图表配置数据，不包含DOM属性相关内容。

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