highchart中多图快速切换

Question

我有一个 Highcharts 库来显示我的图表。我有一个像

这样的循环

     * Shows/ hides plots based on scope.stationstoshow
     */
    var showHideStations = function (show) {
        var start0 = performance.now();
        angular.forEach(chart.series, function (s) {

            //sets a cahr visible
            s.setVisible((show.indexOf(s.options.id)>=0));

        });
        var duration = performance.now() - start0;
        console.log("showHide: All charts took "+duration/1000.0 + "sec");
    };

当我在一张图中有 ~30-40 个系列时，操作大约需要两秒钟（它们有很多点）。所以它不是立即的并且使 UI 感觉很慢。我怎么可能一次切换多个图表 on/off？

Answer 1

你有这行：

    s.setVisible((show.indexOf(s.options.id)>=0));

这里是在每次更改后重新绘制。这会消耗大量资源。如果您改为推迟重绘，直到您更改了每个系列的可见性，它应该会为您节省大量时间。

例如：

var showHideStations = function (show) {
    var start0 = performance.now();

    angular.forEach(chart.series, function (s) {
        s.setVisible((show.indexOf(s.options.id)>=0), false); // false to stop redraw
    });

    chart.redraw(); // Manually redraw after all changes

    var duration = performance.now() - start0;
    console.log("showHide: All charts took "+duration/1000.0 + "sec");
};

highchart中多图快速切换

Fast switching of many graphs in highchart

javascript

highcharts