我有以下脚本,我从inspect元素中提取了该脚本。我从mysql db中提取2个元素,这是日期时间和速度,我相应地格式化它。所有看起来都很好,因为我甚至打印了来自mysql的数组内容。它在这里给出了错误数据:[[2014-12-13 13:23,0 ],[2014-12-13 13:23,0 ],[2014-12-13 13:24,0 ],[2014-12-13 13:24,0 ],[2014-12-13 13:25,0 ....... Uncaught SyntaxError: Unexpected number
另一件事是如何让x轴根据我的数据显示动态范围和比例,这可能是几小时到几天。
<!DOCTYPE HTML>
Array
(
[0] => [2014-12-13 13:23,0 ]
[1] => [2014-12-13 13:23,0 ]
[2] => [2014-12-13 13:24,0 ]
[3] => [2014-12-13 13:24,0 ]
[4] => [2014-12-13 13:25,0 ]
[5] => [2014-12-13 13:25,0 ]
[6] => [2014-12-13 13:26,0 ]
[7] => [2014-12-13 13:26,0 ]
[8] => [2014-12-13 13:26,0 ]
[9] => [2014-12-13 13:26,0 ]
[10] => [2014-12-13 13:27,0 ]
[11] => [2014-12-13 13:27,0 ]
[12] => [2014-12-13 13:27,0 ]
[13] => [2014-12-13 13:27,0 ]
[14] => [2014-12-13 13:28,0 ]
[15] => [2014-12-13 13:28,0 ]
[16] => [2014-12-13 13:28,0 ]
[17] => [2014-12-13 13:28,0 ]
[18] => [2014-12-13 13:29,0 ]
[19] => [2014-12-13 13:29,0 ]
[20] => [2014-12-13 13:30,40 ]
[21] => [2014-12-13 13:30,40 ]
[22] => [2014-12-13 13:30,54 ]
[23] => [2014-12-13 13:31,44 ]
[24] => [2014-12-13 13:31,44 ]
[25] => [2014-12-13 13:31,44 ]
[26] => [2014-12-13 13:31,44 ]
[27] => [2014-12-13 13:31,44 ]
[28] => [2014-12-13 13:31,44 ]
[29] => [2014-12-13 13:31,44 ]
[30] => [2014-12-13 13:31,44 ]
[31] => [2014-12-13 13:32,55 ]
[32] => [2014-12-13 13:32,36 ]
[33] => [2014-12-13 13:33,39 ]
[34] => [2014-12-13 13:33,49 ]
[35] => [2014-12-13 13:34,65 ]
[36] => [2014-12-13 13:34,46 ]
[37] => [2014-12-13 13:35,55 ]
[38] => [2014-12-13 13:35,55 ]
[39] => [2014-12-13 13:35,55 ]
[40] => [2014-12-13 13:35,19 ]
[41] => [2014-12-13 13:35,25 ]
[42] => [2014-12-13 13:35,25 ]
[43] => [2014-12-13 13:35,25 ]
[44] => [2014-12-13 13:36,25 ]
[45] => [2014-12-13 13:36,25 ]
[46] => [2014-12-13 13:36,10 ]
[47] => [2014-12-13 13:36,10 ]
[48] => [2014-12-13 13:36,10 ]
[49] => [2014-12-13 13:37,14 ]
[50] => [2014-12-13 13:37,14 ]
[51] => [2014-12-13 13:37,14 ]
[52] => [2014-12-13 13:37,9 ]
[53] => [2014-12-13 13:38,0 ]
[54] => [2014-12-13 13:38,0 ]
[55] => [2014-12-13 13:38,0 ]
[56] => [2014-12-13 13:38,0 ]
[57] => [2014-12-13 13:38,0 ]
[58] => [2014-12-13 13:39,0 ]
[59] => [2014-12-13 13:39,0 ]
[60] => [2014-12-13 13:40,0 ]
[61] => [2014-12-13 13:40,0 ]
[62] => [2014-12-13 13:40,0 ]
[63] => [2014-12-13 13:40,0 ]
[64] => [2014-12-13 13:41,0 ]
[65] => [2014-12-13 13:41,0 ]
)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Speed Chart',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e',
week : '%e',
month : '%e',
year : '%e'
}
},
yAxis: {
title: {
text: 'Speed (km/h)'
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%e. %b', this.x) +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Field1',
data: [[2014-12-13 13:23,0 ],[2014-12-13 13:23,0 ],[2014-12-13 13:24,0 ],[2014-12-13 13:24,0 ],[2014-12-13 13:25,0 ],[2014-12-13 13:25,0 ],[2014-12-13 13:26,0 ],[2014-12-13 13:26,0 ],[2014-12-13 13:26,0 ],[2014-12-13 13:26,0 ],[2014-12-13 13:27,0 ],[2014-12-13 13:27,0 ],[2014-12-13 13:27,0 ],[2014-12-13 13:27,0 ],[2014-12-13 13:28,0 ],[2014-12-13 13:28,0 ],[2014-12-13 13:28,0 ],[2014-12-13 13:28,0 ],[2014-12-13 13:29,0 ],[2014-12-13 13:29,0 ],[2014-12-13 13:30,40 ],[2014-12-13 13:30,40 ],[2014-12-13 13:30,54 ],[2014-12-13 13:31,44 ],[2014-12-13 13:31,44 ],[2014-12-13 13:31,44 ],[2014-12-13 13:31,44 ],[2014-12-13 13:31,44 ],[2014-12-13 13:31,44 ],[2014-12-13 13:31,44 ],[2014-12-13 13:31,44 ],[2014-12-13 13:32,55 ],[2014-12-13 13:32,36 ],[2014-12-13 13:33,39 ],[2014-12-13 13:33,49 ],[2014-12-13 13:34,65 ],[2014-12-13 13:34,46 ],[2014-12-13 13:35,55 ],[2014-12-13 13:35,55 ],[2014-12-13 13:35,55 ],[2014-12-13 13:35,19 ],[2014-12-13 13:35,25 ],[2014-12-13 13:35,25 ],[2014-12-13 13:35,25 ],[2014-12-13 13:36,25 ],[2014-12-13 13:36,25 ],[2014-12-13 13:36,10 ],[2014-12-13 13:36,10 ],[2014-12-13 13:36,10 ],[2014-12-13 13:37,14 ],[2014-12-13 13:37,14 ],[2014-12-13 13:37,14 ],[2014-12-13 13:37,9 ],[2014-12-13 13:38,0 ],[2014-12-13 13:38,0 ],[2014-12-13 13:38,0 ],[2014-12-13 13:38,0 ],[2014-12-13 13:38,0 ],[2014-12-13 13:39,0 ],[2014-12-13 13:39,0 ],[2014-12-13 13:40,0 ],[2014-12-13 13:40,0 ],[2014-12-13 13:40,0 ],[2014-12-13 13:40,0 ],[2014-12-13 13:41,0 ],[2014-12-13 13:41,0 ]]
}]
});
});
});
</script>
<style>
答案 0 :(得分:1)
日期格式需要生成为UTC ...
尝试......
$dateTime1 =
...应设置为UNIX_TIMESTAMP(需要乘以1000才能使此答案正确)。
另外,单独留下$speed
和$data
;你的PHP应该没问题。
x轴上的日期格式问题可能会以...
修复dateTimeLabelFormats: {
second: '%Y-%m-%d %H:%M',
minute: '%Y-%m-%d %H:%M',
hour: '%Y-%m-%d %H:%M',
day: '%Y-%m-%d %H:%M',
week: '%Y-%m-%d %H:%M',
month: '%Y-%m-%d %H:%M',
year: '%Y-%m-%d %H:%M'
}
...因为,Highcharts会选择您输入的最佳列表。如果您只想要这样,请尝试输入所有可能值的格式,有效地替换默认值。
使用旋转文字格式化日期时间格式的工作示例... http://jsfiddle.net/rfornal/827bfzr9/
答案 1 :(得分:0)
就像与其他人共享一样,我注意到unix_timestamp应该是1000的倍数,以便在hightchart中正确显示。