Highchart错误Uncaught SyntaxError:意外的数字

时间:2014-12-17 05:09:53

标签: javascript mysql highcharts

我有以下脚本,我从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>

2 个答案:

答案 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/

参考:http://www.highcharts.com/demo/spline-irregular-time

答案 1 :(得分:0)

就像与其他人共享一样,我注意到unix_timestamp应该是1000的倍数,以便在hightchart中正确显示。