导出 Plotly 图形以在 ReactMarkdown 中显示

Question

我想使用 Plotly 在 Python 中创建一个交互式图表，然后导出该图表（或 html）以在 ReactMarkdown 中查看。更大的问题之一是我无权访问 html 文件。其他人运行不同的脚本将 Python 代码转换为 ReactMarkdown。这是全公司挑战的一部分，因此我无权访问该脚本，也不了解该脚本的任何内容。我相信它正在使用 React Markdown，因为 html 没有显示。

我能够使用 imgur 托管静态图来做到这一点，但我似乎无法找到在 Plotly 中使用交互式图来做到这一点的方法。我还尝试了this教程上的说明，但无法正常工作。有什么想法吗？

示例代码：

import plotly.graph_objects as go

# Create a basic Plotly figure
fig = go.Figure(data=[go.Bar(y=[2, 3, 1])])

# Save the figure as an HTML div
fig.write_html("plotly_chart.html", full_html=False)

Answer 1

由于您需要在 ReactMarkdown 中嵌入 Plotly 交互式图表而无需直接访问 HTML，因此您可以使用一种解决方法在 React 中显示图表。实现方法如下： 生成 Plotly 图表的 JSON 表示形式：您可以使用 Plotly 的 to

json()

方法将图表导出为 JSON 数据，然后可用于在 React 中渲染图表。使用 Plotly 的 JavaScript 库在 React 中渲染 JSON：使用 JSON 数据，您可以通过将其输入 Plotly 的 React 库来在 React 中渲染图表。操作方法如下： 第 1 步：用 Python 生成 Plotly JSON， 将您的 Plotly 图形数据保存为 JSON：

#This is Python
import plotly.graph_objects as go
import json

# Create a basic Plotly figure
fig = go.Figure(data=[go.Bar(y=[2, 3, 1])])

# Convert figure to JSON format
plotly_json = fig.to_json()

# Save JSON to a file, which React can read and use for rendering
with open("plotly_chart.json", "w") as f:
  json.dump(plotly_json, f)

第 2 步：在 React 中加载 JSON，并使用 Plotly.js 进行渲染 在你的 React 组件中： 加载 JSON 数据：使用 fetch 加载 Python 脚本保存的 JSON 文件。 使用 Plotly 渲染图表：通过 Plotly 的 JavaScript 库，使用 JSON 数据渲染图表。 这是一个处理它的 React 组件示例：

# This is JavaScript
import React, { useEffect } from 'react';
import Plotly from 'plotly.js';

const PlotlyChart = () => {
  useEffect(() => {
  // Fetch the JSON data generated by Plotly
  fetch('/path/to/plotly_chart.json')
  .then(response => response.json())
  .then(data => {
    const parsedData = JSON.parse(data);
    Plotly.newPlot('plotlyChart', parsedData.data, parsedData.layout);
    });
}, []);

return <div id="plotlyChart" />;
};

export default PlotlyChart;

说明 Python：将图表导出为 JSON，捕获所有 Plotly 配置。 React：读取并解析 JSON，然后使用 Plotly 的

newPlot

函数在

<div>

上呈现交互式图表。这段代码中可能存在一些错误，因为我必须一直移动 4 个空格并且没有自动缩进，因此请检查缩进并在需要时进行更正。希望这有帮助！