每分钟更换一次数据集
Replace data set every min
我试图让我的 Highstock 图表每分钟更新一次,方法是将其现有数据集替换为从 url 请求中提取的数据集(在不同时间会有不同的数据)。
到目前为止,我什至无法根据手动更改来刷新数据。
目前工作:https://jsfiddle.net/Lz8gLw8j/
我正在尝试测试更改数据然后更新它:
varData = [[0,0],[1,2]]
$('#chart2').highcharts().redraw();
什么都不做。
您可以通过以下方式将新数据设置到highchart:
var newData = [
[1251763200000, 23.61],
[1251849600000, 23.60],
[1251936000000, 23.79]
]
var chart = $('#chart2').highcharts();
chart.series[0].setData(newData);
$('#chart2').highcharts().redraw();
更新提琴手:
您似乎可以使用加载事件
chart : {
events : {
load : function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
}
这里是 fiddle:https://jsfiddle.net/jjwilly16/Lz8gLw8j/6/
仅供参考:我从 Highcharts 网站的一个例子中提取了这个:http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/
您可以使用 addPoint
方法向现有系列添加数据,并使用 setData
方法替换数据集。这两种方法的第二个选项参数允许您重绘图表。数据应该是数组的数组。嵌套数组包含绘制的实际数据。内部嵌套数组的第一个元素是纪元 (x),而第二个元素是实际值 (y)。纪元是自 1970 年 1 月 1 日午夜以来的秒数 GMT/UTC。我已经更新了 fiddle 以允许您添加数据点以及重置数据。
主要变化是这些行:
$('#updateButton').click(function() {
var date = $('#newDate').val();
var epoch = Math.round(new Date(date).getTime());
var value = parseInt($('#newValue').val());
var chart = $('#chart2').highcharts();
chart.series[0].addPoint([epoch, value], true);
});
$('#resetChart').click(function() {
var chart = $('#chart2').highcharts();
chart.series[0].setData(null, true);
});
我试图让我的 Highstock 图表每分钟更新一次,方法是将其现有数据集替换为从 url 请求中提取的数据集(在不同时间会有不同的数据)。
到目前为止,我什至无法根据手动更改来刷新数据。
目前工作:https://jsfiddle.net/Lz8gLw8j/
我正在尝试测试更改数据然后更新它:
varData = [[0,0],[1,2]]
$('#chart2').highcharts().redraw();
什么都不做。
您可以通过以下方式将新数据设置到highchart:
var newData = [
[1251763200000, 23.61],
[1251849600000, 23.60],
[1251936000000, 23.79]
]
var chart = $('#chart2').highcharts();
chart.series[0].setData(newData);
$('#chart2').highcharts().redraw();
更新提琴手:
您似乎可以使用加载事件
chart : {
events : {
load : function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
}
}
}
这里是 fiddle:https://jsfiddle.net/jjwilly16/Lz8gLw8j/6/
仅供参考:我从 Highcharts 网站的一个例子中提取了这个:http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/
您可以使用 addPoint
方法向现有系列添加数据,并使用 setData
方法替换数据集。这两种方法的第二个选项参数允许您重绘图表。数据应该是数组的数组。嵌套数组包含绘制的实际数据。内部嵌套数组的第一个元素是纪元 (x),而第二个元素是实际值 (y)。纪元是自 1970 年 1 月 1 日午夜以来的秒数 GMT/UTC。我已经更新了 fiddle 以允许您添加数据点以及重置数据。
主要变化是这些行:
$('#updateButton').click(function() {
var date = $('#newDate').val();
var epoch = Math.round(new Date(date).getTime());
var value = parseInt($('#newValue').val());
var chart = $('#chart2').highcharts();
chart.series[0].addPoint([epoch, value], true);
});
$('#resetChart').click(function() {
var chart = $('#chart2').highcharts();
chart.series[0].setData(null, true);
});