Question

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

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

Answer 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);
}

如何在几个高图图表上同步更新

1 个答案: