0

我有一个页面，其中包含几个动态生成的 highcharts，当前每个 highcharts 都会根据图表的创建时间每分钟更新一次。我的一项行动是将更新同步到一个全局更新时钟，但我似乎无法更新图表，除非我在内部进行。目前我这样做：

var chart = new Highcharts.chart({
    chart: {
        // blah blah blah chart stuff
    }    
}, function(chart){
    setInterval(function(){
        // get the data and update this chart
        chart.series[0].update({
            data: newSeries[0].data,
            pointStart: newSeries[0].pointStart
        }, false);
        chart.redraw();
    },60000);
});

该页面可以在任何给定时间由用户选择选项并以 JSON 格式从服务器请求数据来创建其中的几个。

如何配置它以便我可以从全局 setInterval 函数单独定位每个图表？

更新

在结合其他问题的一些答案后，我发现我设法通过这样做解决了我的问题：

HTML

<div id="chart_54862" class="chartContainer"></div>

JavaScript

genChart(getChartData(), 'chart_54862');
function genChart(data, location){
    var container = $('#'+location);
    $(container).highcharts({
        // fun chart stuff
    });
}

现在，当我想更新我刚刚发送的图表时：

// Global setInterval
setInterval(function(){
    $('.chartContainer').each(function(){
        // get the updated json = newSeries[]
        var container = '#'+this.id;
        var chart = $(container).highcharts();
        chart.series[0].update({
            data: newSeries[0].data,
            pointStart: newSeries[0].pointStart
        }, false);
        chart.redraw();
    }, 60*1000);
});
4

1 回答 1

1

您可以添加全局计数器，如果所有图表都已呈现，它将增加并检查。然后只添加一个 setInterval()，在里面你可以使用Highcharts.charts[index].

var limiter = 0;

var chart = new Highcharts.chart({
    chart: {
        // blah blah blah chart stuff
    }    
}, function(chart){
    limiter++;
    if(limiter == 10) {
        addInterval()
    }
});

function addInterval() {
    setInterval(function(){
        // get the data and update this chart
        Highcharts.charts[4].series[0].update({
            data: newSeries[0].data,
            pointStart: newSeries[0].pointStart
        }, false);
        chart.redraw();
    },60000);
}
于 2013-05-21T11:23:31.610 回答