Charts 如何在动态创建图表的同时提高效能

我的网页有3个图表（折线图和堆积柱形图）

每个图表都有不同的系列

但数据长度相同

从数据库中获取数据和类别的长度

这意味着我无法设置默认设置

我使用下面的javascript设置这些图表

    //loop Chart1, 2, 3
    $.each(Charts, function(i,chart){

        //loop series
        $.each(chart.series, function (i, se) {

            //set series default data e.g[0, 0, 0, 0, 0]
            se.setData(Series);

        });

        //set categories e.g["Peter", "John", "Tom", "Mary", "May"]
        chart.xAxis[0].setCategories(Categories);

    });

---

*问题是花费了很长时间，可能会导致浏览器“无响应”。

嵌套循环对性能很糟糕。对数据进行预处理，以便为每个图表提供适当的系列

---

根据数据库中数据刷新的频率，在数据库、从数据库检索数据的服务器端和web服务器上使用适当级别的缓存。

尝试将代码替换为

$.each(Charts, function(i,chart){

    //loop series
    $.each(chart.series, function (i, se) {

        //set series default data e.g[0, 0, 0, 0, 0]
        se.setData(Series,false);

    });

    //set categories e.g["Peter", "John", "Tom", "Mary", "May"]
    chart.xAxis[0].setCategories(Categories,false);
    chart.xAxis[0].isDirty = true;
    chart.redraw();
});

---

类别由用户更改，因此我无法预处理我的数据并初始化类别和系列的数量。这很好，可以提高2-300%的性能xxxx.isDirty=true；chart.redraw（）；这意味着如果使用，只需重新绘制xxxx零件？不是整个图表？这意味着您不会在每次“循环”调用中重新绘制，而是只使用setData进行一次循环。最后两行应该放在第一个循环中？但为什么？我向您介绍了一个工作正常的示例。var“Charts”有3个图表，var“chart”是“Charts”的一部分