我有以下脚本,这是我从我的检查元素中提取的。我从 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>
日期格式需要生成为 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/
参考: http://www.highcharts.com/demo/spline-irregular-time
就像与其他人分享一样,我注意到unix_timestamp应该是 1000 的倍数,才能在 hightchart 中正确显示。