react-bootstrap 中的 Apexcharts 没有绘制图表，即使 console.log 显示 useState 能够从 Flask 中获取它

Question

目标：从 Flask 获取数组的 json 转储并用 apexcharts 绘制它们

那么开始吧。 Flask 中有 6 个名为 arr 的元素列表，它以 json 形式返回它

return  json.dumps(arr)

然后在react-bootstrap中我使用fetch来检索数组useEffect并将其放入变量中， 图表数据。 Console.log 显示本地主机中的变量。我也测试了显示变量，它们在本地主机页面上显示良好但是，在使用顶点图表时出现了问题。使用此处找到的基本 apexchart https://apexcharts.com/docs/react-charts/

给予

    import React, {useState, useEffect,Container} from 'react'
    import Chart from "react-apexcharts";

    function App() {
      const [chartData, setData] = useState([])
            useEffect(() =>{
            fetch("/halp")
            .then(response => response.json())
            .then( chartData => {        
              setData({chartData,
                options: {
                  chart: {
                    id: "basic-bar"
                  },
                  xaxis: {
                    categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
                  }
            },
            series: [
              {
                name: "series-1",
                data: chartData
              }
            ]
            })
            console.log(chartData)
        })
  }, [])

 
        return(
          <container> 
             <div className="app">
              <div className="row">
                {(typeof chartData.members === 'undefined')?(
                  <p>Loading</p>
                ):(
                <Chart
                  options={chartData.options}
                  series={chartData.series}
                  type="bar"
                  width="500"
                />
              )}
          
              </div>
          </div>
          </container>
        );
    }


    export default App;

在第 21 行。我认为这就是问题所在。 arr传入时的格式为[0,1,2,3,4,5] console.log 显示相同。

我尝试过做 数据：图表数据

使用此链接进行反应迭代https://legacy.reactjs.org/docs/lists-and-keys.html 数据：图表数据（i => i） 然而，当我这样做时，当我稍后进行可选链接时，图表数据“变得不是一个函数”

还有我的图表部分 编辑：我浏览了发布前弹出的列表，看到了一些关于计时器的内容。这没有帮助。添加它

    <Chart
            options={chartData.options}
            series={chartData.series}
            type="bar"
            width="500"
          />

我在这上面花了很多时间。不确定我是否需要学习 javascript 或者 React

Answer 1

我不完全确定为什么你要在图表数据 useState 中放置这样的选项，因为根据你的帖子，图表数据仅包含

[0,1,2,3,4,5]

。相反，直接使用来自端点的数据填充图表数据。在下面的示例中，我使用您首选的数据来填充图表数据。 Codesandbox 示例：https://codesandbox.io/p/sandbox/fgw3qr

选项和系列

创建单独的选项和系列常量，如示例所示。

获取数据

您可能需要根据您接收的数据结构调整获取方法。这里的要点是您的系列数据存储在图表数据变量中。

最后的想法

您可能想检查从 React 导入的

Container

组件。据我所知，React 没有 Container 组件。另外，在您的代码中您正在调用小写字母

<container/>

。

如果您有任何疑问，请随时询问。

import React, { useState, useEffect, Container } from "react";
import Chart from "react-apexcharts";

function App() {
  //For example purposes the array is populated. Empty the array to have it filled by the endpoint
  const [chartData, setData] = useState([0, 1, 2, 3, 4, 5]);

  //your fetch method to populate chartData
  useEffect(() => {
    fetch("/halp")
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      });
  });
  const options = {
    chart: {
      id: "basic-bar",
    },
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
    },
  };

  const series = [
    {
      name: "series-1",
      data: chartData,
    },
  ];
  return (
    <container>
      <div className="app">
        <div className="row">
          {!chartData?.length ? (
            <p>Loading</p>
          ) : (
            <Chart options={options} series={series} type="bar" width="500" />
          )}
        </div>
      </div>
    </container>
  );
}

export default App;