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感觉很慢。我怎样才能一次打开/关闭多个图表？

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中快速切换许多图形

1 个答案: