Question

我在我的项目中使用Highcharts，有时我需要在图表上显示2000+系列。

添加系列和重绘图表的时间非常长。有没有办法让它显示得更快？

我已经做过的事情：

添加系列而不重绘，然后我调用chart.redraw（）
已禁用动画
已禁用数据分组

以下是结果（将2000和4000系列添加到空图表中）：

Chrome 44.0.2403.157 m：

总系列数：2000
系列新增：5775ms
图表重绘：11351ms

总系列数：4000
系列新增：36497ms
图表重绘：51985ms
Firefox 40.0.2

总系列数：2000
系列新增：1769ms
图表重绘：7405ms

总系列数：4000
系列新增：6153ms
图表重绘：23464ms
IE 11 总系列数：2000年系列新增：14547ms
图表重绘：50153ms

总系列数：4000
系列新增：66558ms
图表重绘：229382ms（229秒!!）

请告诉我，有没有办法提高速度？谢谢。

以下是代码jsfiddle

$(function () {     

var addManySeries = function(count)
{
    var seriesToAdd = count;
    var d = [];
    var temp = [];              

    for (var i = 0; i < seriesToAdd; i++) {
        temp = [];
        for (var j = 0; j < 10; j++) {
            temp.push(Math.random() * 1000);
        }

        d.push({data: temp, name: 'Series ' + i.toString()});
    }                                 

    $('#log').append("<br/>Total series count: " + (chart.series.length + d.length).toString());
    var s = Date.now();

    for (var i = 0; i < seriesToAdd; i++) {            
        chart.addSeries(d[i], false);
    }
    $('#log').append("<br/>Series added: " + (Date.now() -s).toString() + "ms");                                  
    chart.redraw(); 
    console.log((Date.now() - s).toString());
    $('#log').append("<br/>Chart redrawed: " + (Date.now() - s).toString()+ "ms");
};

var chart_options = {
    chart:{
        type:'line',
        renderTo: 'container',
        animation: false
    },        
    plotOptions: {
            line: {
                animation: false,
                shadow: false,
                marker:{
                    enabled: false
                }
            }
        },
    tooltip:{
        animation : false
    },
    legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
    },
    series: {
        dataGrouping: false
    }
};

chart = new Highcharts.Chart(chart_options);

var chart_options = {
    chart:{
        type:'line',
        renderTo: 'container',
        animation: false
    },        
    plotOptions: {
            line: {
                animation: false,
                shadow: false,
                marker:{
                    enabled: false
                }
            }
        },
    tooltip:{
        animation : false
    },
    legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
    },
    series: {
        dataGrouping: false
    }
};

chart = new Highcharts.Chart(chart_options);

$('#add2000Series').click(function() {                      
    addManySeries(2000);
});
$('#add4000Series').click(function() {                      
    addManySeries(4000);
});
});

数千个系列

0 个答案: