0

我在反应应用程序中使用 ChartJS (v2)。我正在尝试创建图表的页面报告，并且发现它们加载/渲染速度很慢。

演示： https ://mfahelper.netlify.app/charts 如果单击“图表报告”，它将加载下面的各种图表。

我试过用悬念边界包围图表，但似乎没有任何效果。此外，如果我对过滤器进行更改，页面需要很长时间才能重新呈现。

当我有一个单一图表（如“交互式”图表）时，加载/渲染速度要快得多，所以我怀疑最好的解决方案是让我的每个 REPORTS 图表按顺序加载。我只是不确定现在该怎么做。

我的代码目前看起来像这样（为了简单起见，我删除了一些代码）：

   <Route exact path={`/charts/report/bar`}>
                <ErrorBoundaryWithSuspense>
                    {arrayOfBarGraphs.map(eachObjOfTitles => {
                             return (
                                <ChartContainer key={eachObjOfTitles.title}>
                                    <img src={teesPropertiesObject[eachObjOfTitles.name].imageRef} alt={`${eachObjOfTitles.title} measure location`}
                                        className={classes.measureIconBar}
                                    ></img>
                                    <BarChart
                                     {...props}
                                    ></BarChart>
                                </ChartContainer>
                            )
                                        )}
                </ErrorBoundaryWithSuspense>
            </Route>

谁能建议我需要介绍什么来处理单击“图表报告”按钮后页面冻结的几秒钟？

4

0 回答 0