React amchart4 只渲染水印标识？

Question

我正在尝试创建一个饼图来显示数据。当我编辑文件并保存以查看结果时，饼图突然加载到屏幕上（正确显示数据）。如果我刷新页面，我只会在屏幕上加载徽标，没有馅饼。谁能指出我做错了什么？

组件：

import React, { useLayoutEffect, useRef } from "react";
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";

import am4themes_animated from "@amcharts/amcharts4/themes/animated";
am4core.useTheme(am4themes_animated);

const Pie = (props) => {
  const chart = useRef(null);

  useLayoutEffect(() => {
    let pie = am4core.create("chartdiv", am4charts.PieChart3D);

    let pieData = [];
    props.data.map((item) => {
      let obj = {};
      obj = { name: item.prod_name, quantity: item.prod_quantity };
      pieData.push(obj);
    });
    // ...
    pie.data = pieData;
    let pieSeries = pie.series.push(new am4charts.PieSeries3D());
    pieSeries.slices.template.strokeOpacity = 1;
    pie.radius = am4core.percent(70);
    
    pieSeries.dataFields.value = "quantity";
    pieSeries.dataFields.category = "name";
    pieSeries.hiddenState.properties.opacity = 1;
    pieSeries.hiddenState.properties.endAngle = -90;
    pieSeries.hiddenState.properties.startAngle = -90;
    pie.hiddenState.properties.radius = am4core.percent(60);
    pie.innerRadius = am4core.percent(40);
    chart.current = pie;
    return () => {
      pie.dispose();
    };
  }, []);
  return <div id="chartdiv" className="pie"></div>;
};

export default Pie;

更新：组件统计：

import Pie from "./Charts/Pie";

const Statistics = () => {

  const [data, setData] = useState([]);
  useEffect(() => {
    axios
      .get("http://localhost:3001/statistics")
      .then((res) => setData(res.data.data.orders));
  }, []);

  return (
    <section className="statistics">
      <Pie data={data} />
    </section>
  );
};

export default Statistics;

此外，类名的 css='pie' :

.pie {
  height: 500px;
}

Answer 1

您需要添加一个条件渲染来检查数据是否不是空数组：

return (
    <section className="statistics">
       {data.length > 0 && <Pie data={data} />}
    </section>
  );

或者您可以将 props.data 添加到 useLayoutEffect 依赖项而不是渲染条件：

useLayoutEffect(() => {
    let pie = am4core.create("chartdiv", am4charts.PieChart3D);

    let pieData = [];
    props.data.map((item) => {
      let obj = {};
      obj = { name: item.prod_name, quantity: item.prod_quantity };
      pieData.push(obj);
    });
    // ...
    pie.data = pieData;
    let pieSeries = pie.series.push(new am4charts.PieSeries3D());
    pieSeries.slices.template.strokeOpacity = 1;
    pie.radius = am4core.percent(70);

    pieSeries.dataFields.value = "quantity";
    pieSeries.dataFields.category = "name";
    pieSeries.hiddenState.properties.opacity = 1;
    pieSeries.hiddenState.properties.endAngle = -90;
    pieSeries.hiddenState.properties.startAngle = -90;
    pie.hiddenState.properties.radius = am4core.percent(60);
    pie.innerRadius = am4core.percent(40);
    chart.current = pie;
    return () => {
      pie.dispose();
    };
  }, [props.data]);

Answer 2

因此，由于您使用 useEffect 和空依赖项数组，因此您的组件 Pie 将仅运行在组件安装时 useEffect 内的饼图创建代码。

现在，由于您正在使用 axios 异步获取数据，因此数据将在挂载后传递给 Pie 组件。所以现在数据变化不会反映在饼图中。

在依赖数组中添加 props.data 将运行 useEffect 每当新数据传递给 Pie 组件时。（即道具更新）。

useEffect(() => {
  // your code for rendering pie chart
  return () => {
    pie.dispose();
  };
}, [props.data])

https://codesandbox.io/s/blissful-fast-djuxm?file=/src/Pie.jsx

React amchart4 只渲染水印标识？

React amchart4 rendering only watermark logo?

javascript

reactjs

amcharts4