如何修复 React Apex Chart 初始安装延迟？

Question

我在我的 project.I 中使用 React Apex 图表库，我发现库图表在初始安装时呈现之前有一个小的延迟。

此问题会损害用户体验，因为呈现 ApexCharts 的组件要到延迟后才会显示。

import React from "react";
import Chart from "react-apexcharts";

function MixedChart() {
    const data = {
      options: {
        chart: {
          id: "basic-bar"
        },
        xaxis: {
          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
        }
      },
      series: [
        {
          name: "series-1",
          data: [30, 40, 45, 50, 49, 60, 70, 91]
        }
      ]
    };

    return (
         <div className="mixed-chart">
           <Chart
             options={data.options}
             series={data.series}
             type="bar"
             width="500"
           />
         </div>
    );

}

export default MixedChart;

有办法解决这个问题吗？

Answer 1

我想出了解决办法。

为避免应用程序在该延迟期间不呈现任何内容并获得更好的用户体验，您可以在 useEffect 挂钩中使用设置超时以在图表初始装载后更新状态。

const [dispaly, setDisplay] = useState(false);

useEffect(() => {
   setTimeout(() => setDisplay(true), 1);
}, [])

if(!display) {
 return <></>;
}

return (
  <div className="mixed-chart">
    <Chart
      options={data.options}
      series={data.series}
      type="bar"
      width="500"
     />
  </div>);

如何修复 React Apex Chart 初始安装延迟？

How to fix React Apex Chart initial mount delay?

javascript

reactjs

performance

user-experience

apexcharts