默认情况下,Highchart限制系列数

时间:2014-06-28 19:15:23

标签: javascript jquery charts highcharts

我想知道有没有办法默认限制系列数?基本上我通过Ajax加载数据,有时数据可能包含50到80个系列,我知道highchart甚至支持超过50个系列,但是加载图表需要很长时间,所以我计划默认显示2个系列,剩下的系列我会喜欢给下拉列表,以便用户可以选择并可以添加系列onclick,到目前为止我要有2个数据数组,其中一个包含2个系列,我想默认显示,其他数组包含n个系列,这里我是有兴趣通过ajax发送一个唯一的数组并限制图表选项中的系列数量,我不知道highchart是否有此选项

以下是我的示例fiddle

   <script src="http://code.highcharts.com/highcharts.js"></script>
   <div id="container" style="height: 400px"></div>

  $(function () {
   $('#container').highcharts({
    chart: {
        type: 'spline'
    },

    legend: {
        symbolWidth: 80
    },



    series: [{
        data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],

    }, {
        data: [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],

    },{
        data: [8, 4, 1, 6, 4, 2, 9, 1, 2, 3, 4, 5],

    },{
        data: [0, 6, 1, 3, 9, 2,2, 1, 2, 3, 4, 5],

    },{
        data: [5, 4, 8, 3, 4, 6, 9, 4, 2, 8, 3, 5],

    },{
        data: [9, 4, 1, 2, 4, 2, 6, 1, 2, 3, 7, 3],

    }
            ]
});
});

谢谢

1 个答案:

答案 0 :(得分:3)

使用addSeries,您可以控制onLoad系列:

$(function () {
    var series = [
            [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],        
            [2, 4, 1, 3, 4, 2, 9, 1, 2, 3, 4, 5],
            [0, 6, 1, 3, 9, 2,2, 1, 2, 3, 4, 5]
        ];
    var series_loaded = [0];

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'spline'
        },        
        legend: {
            symbolWidth: 80
        },    
        series: [{
            data: series[0]           
        }]
    });

    $('#serie-change').find('a').click(function() {
        var index = $(this).parent().index();

        if ($.inArray(index, series_loaded) != -1) {
            return false;   
        }

        series_loaded.push(index);

        chart.addSeries({                        
            name: $(this).text(),
            data: series[index]
        });
    });
});

见小提琴:http://jsfiddle.net/e6aJW/2/