在 React 中使用 ChartJS 时处理缓慢的加载/渲染

如何解决在 React 中使用 ChartJS 时处理缓慢的加载/渲染

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

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

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

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

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

   <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>

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