数千个系列

Question

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

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

我已经做过的事情：

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

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

1. Chrome 44.0.2403.157 m：

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

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

2. Firefox 40.0.2

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

   总系列数：4000
   系列新增：6153ms
   图表重绘：23464ms

3. 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);
});
});