現在、グラフが作成された時点に基づいて毎分更新される、動的に生成されたいくつかのハイチャートを含むページがあります。私の行動項目の 1 つは、更新を 1 つのグローバル更新クロックに同期させることですが、内部的に行わない限りチャートを更新できないようです。現在、私は次のようにしています:
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);
});