如何在React应用中直接嵌入Plotly Express生成的图表

方案1：JSON导出渲染（推荐，可完全还原样式、支持交互） #

• 第一步：Python端导出图表JSON
  直接调用Plotly Express生成的图表实例的to_json()方法，可导出完整的图表配置（包含所有样式、数据、交互配置，和Python端显示的效果完全一致），示例代码如下：

  import plotly.express as px
  
  # 原有绘图逻辑无需修改
  df = px.data.iris()
  fig = px.scatter(df, x="sepal_width", y="sepal_length", color="species", title="鸢尾花数据散点图")
  
  # 导出为JSON字符串，可存为静态文件，或通过后端接口返回给前端
  fig_json = fig.to_json()
  # 存为本地文件参考代码
  # with open("scatter_fig.json", "w", encoding="utf-8") as f:
  #     f.write(fig_json)
  

• 第二步：React端安装依赖并渲染
  首先安装对应依赖包：

  npm install react-plotly.js plotly.js
  

  之后在React组件中加载JSON数据并渲染即可，示例代码如下：

  import React, { useEffect, useState } from 'react';
  import Plot from 'react-plotly.js';
  
  const ScatterChart = () => {
    const [figConfig, setFigConfig] = useState(null);
  
    useEffect(() => {
      // 此处可请求后端接口获取JSON，也可直接导入本地静态JSON文件
      fetch('/path/to/scatter_fig.json')
        .then(res => res.json())
        .then(data => setFigConfig(data))
        .catch(err => console.error('加载图表配置失败', err));
    }, []);
  
    if (!figConfig) return <div>加载中...</div>;
  
    return (
      <Plot
        data={figConfig.data}
        layout={figConfig.layout}
        config={figConfig.config}
        style={{width: '100%', height: '500px'}}
      />
    );
  };
  
  export default ScatterChart;
  

• 注意事项：尽量保持Python端Plotly库的版本和React端plotly.js的版本一致，可避免因配置协议版本差异导致的样式偏差。

方案2：iframe嵌入静态HTML（适合简单静态场景） #

如果不需要和React应用做交互联动，也可以直接在Python端将图表导出为HTML文件，再通过iframe嵌入React应用：

• Python端导出HTML代码：

  fig.write_html("scatter_fig.html")
  

• React端嵌入代码：

  <iframe src="/path/to/scatter_fig.html" style={{border: 'none', width: '100%', height: '500px'}} title="散点图" />
  

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