Charts 多系列highstock实时图表未正确显示
我已经有了一个使用PHP和mysql的静态图表,但是这个动态图表不会显示预期的结果 这是我的图表代码Charts 多系列highstock实时图表未正确显示,charts,highcharts,real-time,highstock,Charts,Highcharts,Real Time,Highstock,我已经有了一个使用PHP和mysql的静态图表,但是这个动态图表不会显示预期的结果 这是我的图表代码 $(document).ready(function() { chart = new Highcharts.StockChart({ chart: { renderTo: 'container', defaultSeriesType: 'spline', events: {
$(document).ready(function() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
series: [{
name: 'S1',
data: []},{
name: 'S2',
data: []},{
name: 'S3',
data: []},{
name: 'S4',
data: []},{
name: 'S5',
data: []},{
name: 'S6',
data: []
}]
});
});
这是ajax代码
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(points) {
var series = chart.series,
shift;
$.each(series, function(i, s) {
shift = s.data.length > 20;
s.addPoint(points[i], false, shift);
});
setTimeout(requestData, 1000);
chart.redraw();
},
cache: false
});
}
最后,这是live-server-data.php提供的JSON示例
[[1453945513000,640],[1453945513000,1197],[1453945513000,1112],[1453945513000,402],[1453945513000,879],[1453945513000,658]]
header("Content-type: text/json");
$x = time() * 1000;
for($i=0; $i<6; $i++){
$ret[]=array($x, mt_rand(350, 1200));
}
echo json_encode($ret);
编辑:
这是live-server-data.php中的代码
[[1453945513000,640],[1453945513000,1197],[1453945513000,1112],[1453945513000,402],[1453945513000,879],[1453945513000,658]]
header("Content-type: text/json");
$x = time() * 1000;
for($i=0; $i<6; $i++){
$ret[]=array($x, mt_rand(350, 1200));
}
echo json_encode($ret);
标题(“内容类型:text/json”);
$x=时间()*1000;
对于($i=0;$i而言,问题在于更新navigator系列。当您浏览所有系列时:
$.each(series, function(i, s) { ... });
然后还要更新navigator系列。但是,您的AJAX数据没有足够的点。我建议在AJAX响应中再添加一点(例如,与数据中的第一点相同),并为navigator创建单独的系列:
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
events: {
load: requestData
}
},
navigator: {
series: {
data: []
}
},
series: [{
name: 'Random data',
data: []
}, {
name: 'Random data 2',
data: []
}]
});
和实时演示:按升序对数据排序(按x值)。很可能在JS控制台中,您可以看到Highcharts库中的错误。我的数据是按顺序提供的,因为它是用当前时间戳随机生成的。..Hmm..这很奇怪-有没有机会设置演示?例如,使用JSFIDLE:因为数据是随机的。我想shift
param可能有问题-您是shift正在删除尚不存在的点(重绘标志设置为false)。您是否尝试删除“shift”参数或将其始终设置为false?尝试删除shift参数并将其始终设置为false,结果是一样的。我注意到,当我使用addPoint添加数据时,重绘参数设置为true(停止检索新数据)。当设置为false时