如何根据 Flask API 的 JSON 响应在 React 上绘制 Plotly 图表？

Question

我最近读到关于能够使用 Flask 和 JS<script>标签从 Python 绘制 Plotly 图形，并希望使用 React 和 Flask 作为 API 而不是普通的 JS 来复制它。获取数据很好，但尝试从打包成 JSON 的 Python Plotly 中绘制数据 -> React 上的 Plotly 永远不会工作 - 它只会返回空白的白色显示。

以下是 Flask 端 API 的代码（我只是使用此示例/plot1中的函数来测试它；JSON 返回正常）：

from flask import Flask
import pandas as pd
import json
import plotly
import plotly.express as px

app = Flask(__name__)

@app.route('/chart1')
def chart1():
    df = pd.DataFrame({
        "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
        "Amount": [4, 1, 2, 2, 4, 5],
        "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
    })

    fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

这是我的App.js：

import React, { useState, useEffect } from 'react';
import Plotly from 'plotly.js-dist-min';
import logo from './logo.svg';
import './App.css';

function App() {

  const [plot, setPlot] = useState(0);

  useEffect(() => {
    fetch('/plot').then(res => res.json()).then(data => {setPlot(data);});}, []);

  Plotly.newPlot("graph-div", plot, {})

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <div id="graph-div" className="graph-div">
        </div>
      </header>
    </div>
  );
}

接收数据时似乎出现了某种问题，但我不确定到底出了什么问题 - 我在接收数据时遵循了与 React-Flask 教程相同的格式，并按照 Flask-Plotly 示例将其完全绘制出来。有人可以让我知道如何解决这个问题吗？

Answer 1

我想为任何感兴趣的人更新这篇文章 - 我能够显示绘图图表。

结果发现数据没有使用该json.dumps函数正确发送。相反，请使用 Plotly 提供的绘图到 JSON 函数。

更新的代码：

api.py：

import time, json
from flask import Flask
import pandas as pd
import plotly
import plotly.express as px

app = Flask(__name__)

@app.route('/time')
def get_current_time():
    return {'time': time.time()}
    
@app.route('/plot')
def plot_test():
    df = pd.DataFrame({
        "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
        "Amount": [4, 1, 2, 2, 4, 5],
        "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
    })
    fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
    graphJSON = plotly.io.to_json(fig, pretty=True)
    return graphJSON

App.js：

import React, { useState, useEffect } from 'react';
import Plot from 'react-plotly.js';

const Fund = () => {
    const [plot, setPlot] = useState(0);
    
    useEffect(() => {
      fetch('/plot').then(res => res.json()).then(data => {setPlot(data);});}, []);
      // console.log(plot)
    
    return (
      <div className='content'>
      <h1>Current Fund</h1>
      <Plot data={plot.data} layout={plot.layout}/>
      </div>
    );
};

export default Fund;