通过端点将 python plotly 发送到前端并使用它的最佳方法是什么？

Question

我想在后端创建一个图表，然后发送到前端显示。

我的终点/图表/返回图是这样的：

from dataclasses import dataclass
import plotly.graph_objects as go
import plotly.io as pio


@dataclass
class DataChart:
    category: list[str]
    points: list[int]


class GenerateChart:
    def __init__(self, data: DataChart):
        assert isinstance(data, DataChart)
        self.category = data.category
        self.points = data.points

    def generate_chart(self):
        fig = go.Figure()

        fig.add_trace(
            go.Scatterpolar(
                r=self.points,
                theta=self.category,
                fill="toself",
                name="A",
            )
        )
        fig.update_layout(
            polar={"radialaxis": {"visible": True, "range": [0, 10]}}, showlegend=False
        )
        html_str = pio.to_html(fig, include_plotlyjs="cdn", full_html=False)
        return html_str

和前端：

  const generateChart = async (queue_smooth_data: {}) => {
      const response = await fetch("http://127.0.0.1:8000/chart/", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(queue_smooth_data),
      });
      response.text().then((text) => {
        setChartHTML(text);
      });

  if (currentQuestionIndex > dataQuiz.length) {
    return (
      <div>
        <div dangerouslySetInnerHTML={{ __html: chartHTML }}></div>
      </div>
    );
  }

但它以 html 形式返回：

"
\n
"

有谁知道我哪里弄错了吗？我的原始 html 数据如下所示：

"<div> <div id=\"1d254924-7635-493b-87bb-e44ced485435\" class=\"plotly-graph-div\" style=\"height:100%; width:100%;\"></div> <script type=\"text/javascript\"> window.PLOTLYENV=window.PLOTLYENV || {}; if (document.getElementById ...

附加问题 - 这是上传图表的好方法吗？据我所知，通常你将图表保存到一个文件中并从那里读取它，但我只想显示图表而不需要不必要地保存它。

我尝试了不同的方式来发送数据 - 设置 include_plotlyjs="cdn", True, False, 也导入到 HTML plotly:

<script
      src="https://cdn.plot.ly/plotly-2.20.0.min.js"
      charset="utf-8"
></script>

同时安装 plotlyjs npm

Answer 1

为此目的使用 webhook。我没有这个图书馆的经验

抱歉英语不好