Javascript 自动刷新海图
刷新样条曲线图表,我不明白我做错了什么。我的代码是:Javascript 自动刷新海图,javascript,jquery,highcharts,Javascript,Jquery,Highcharts,刷新样条曲线图表,我不明白我做错了什么。我的代码是: (function($){ $(this.document).ready(function(){ //get local time Highcharts.setOptions({ global: { useUTC: false } }); var myChart = new Highcharts.Chart({ chart: {
(function($){
$(this.document).ready(function(){
//get local time
Highcharts.setOptions({
global: {
useUTC: false
}
});
var myChart = new Highcharts.Chart({
chart: {
type: 'spline',
//animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
renderTo: 'mychart',
zoomType: 'x',
events: {
load: function () {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function () {
var x = <?php echo strtotime($starttime)*1000;?>, // current time
y = 0;
series.addPoint([x, y], true, true);
}, 2000);
}
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
min: <?php echo strtotime($starttime) * 1000; ?>,
max: <?php echo strtotime($end) * 1000; ?>,
//min: Date.UTC(2015,5,22),
//max: Date.UTC(2013,4,23),
},
yAxis: [{
min: 0,
title: {
text: 'Data Volume (KB)'
},
}],
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
title: {
text: 'User Traffic'
},
series: [{
name:'Hourly traffic',
data:[<?php echo join(',',$traff); ?>],
//pointStart: Date.UTC(15, 05, 15),
// pointInterval: 24 * 3600 // one day
}]
});
});
})(jQuery);
我想我在这段时间里做错了什么。我没有以正确的形式或类似的方式解析数据,而且我对语法也不熟悉。如果有人能帮忙,我会非常感激。先走一步 你不是在描述它是如何“错误”的。它根本就不渲染吗?这一点没有补充吗?你收到错误信息了吗?对不起,我忘了提到错误。它似乎在渲染,但在此过程中,x线和连接点的线正在消失。这实际上是工作的一部分,但有这些问题。此外,我的x轴设置为每五分钟显示一小时。我如何改变它,让它每分钟都显示出来?看。这是没有PHP的代码。它似乎按预期工作。是的,它似乎在JSFIDLE中工作。我用x和y编辑了我的代码。可能错误在于数据不是实时的,我必须自己在数据库中不断地更改它。另外,我正在通过Yii调用
highcharts.js
,而不是通过
调用,所以它可能已经过时了。无论如何,谢谢你的回复和帮助!问题在这一行:var x=
-当页面加载时,您的php将生成一次。因此,您正在添加所有具有相同值的点。相反,请尝试以下操作:var x=new Date().getTime()
。另外,我建议删除xAxis.max
。否则,当new_point_x>xAxis.max时,您将看不到新点。
[1432034700000, 95.23],[1434034700000, 65.2],[1435034700000, 40.23] etc