如何同时更新Highcharts中的多个系列

时间:2013-04-02 15:40:18

标签: json dynamic highcharts series

我正在使用Highcharts在单个图表上绘制多个系列图。从包含JSON格式数据的文件中读取系列数据。该文件将每隔几秒更新一次新数据,我有一个重新读取文件的功能。 这是文件中的数据:

[{"name": "series1", "data": [[1,109],[2,313],[3,192]]},{"name": "series2", "data": [[1,111],[2,112],[3,777]]}]

我得到的代码是:

//Read JSON data from a file
$(function () {

    function getSeriesData(file) {
        var data = null;
        $.ajax({
        async: false,
            cache: false,
        url: file,
            method: 'GET',
            dataType: 'json',
            success: function(datasets){
                data = datasets;
            },
            error: function(error,text,http){
                alert("Error retrieving " + url + ".");
            }
        });  

        return data;
    }

    var graphData = getSeriesData("seriesData.json");

    var graphOptions = {
            chart: {
             type: 'line',
             renderTo: "container",
         },
         series: graphData
    };


    var graph = new Highcharts.Chart(graphOptions);

    var updateInterval = 1000 * 5;  // 5 seconds

    function update() {
        //Need to refresh series data here.
                    //Something like:
            graph.series = getSeriesData("series.json");
            graph.redraw();
            setTimeout(update, updateInterval);
    }

    update();});

查看文档似乎没有办法使用我的getSeriesData函数同时重新设置所有系列数据来重新读取文件。这里和其他地方的大多数示例都有方法通过遍历series []数组来设置单个系列的数据。但那不是我想要的。也许我必须重做代码才能这样做,但我想先在这里查看,希望有一个更简单的方法!提前谢谢。

1 个答案:

答案 0 :(得分:0)

我看不到用一个电话做所有系列的方法。我可以看到两个选项。

如果系列的数量是固定的,你可以迭代它们调用series.setData并将redraw选项设置为false,然后调用redraw()。

如果系列的数量可能会改变,你将不得不遍历调用remove的chart.series,然后遍历调用chart.addSeries的系列数组。