我想使用 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)
由于您需要在 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 个空格并且没有自动缩进,因此请检查缩进并在需要时进行更正。希望这有帮助!