Highchart 错误 Uncaught SyntaxError: Unexpected number答案

【问题标题】：Highchart error Uncaught SyntaxError: Unexpected numberHighchart 错误 Uncaught SyntaxError: Unexpected number
【发布时间】：2014-12-17 05:09:52
【问题描述】：

我有以下从我的检查元素中提取的脚本。我从 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>

【问题讨论】：

我在这里找到的示例 ... highcharts.com/demo/spline-irregular-time ... 使用 Date.UTC(1971, 2, 15) 执行时返回一个数值。可以转换此日期格式以匹配他们似乎使用的数字格式吗？
我的日期格式是 yyyy-mm-dd HH:mm 所以我不确定这是否适用？
我试过这个例如 Date.UTC(2014-12-13 13:23),10 但它仍然是同样的错误。
能否将date('Y-m-d H:i', $row['dateTimer']); 更改为date('Y,m,d,H,i', $row['dateTimer']) 和... [<?php echo join($data, ',') ?>] 更改为[Date.UTC(<?php echo join($data, ',') ?>)]？
将 ... datetimelabelformat 更改为仅是 { minute: '%Y-%m-%d %H:%M'} ... Highcharts 会选择您输入的列表中的最佳内容。如果你只想要这个，只输入一个选项。

标签： javascript mysql highcharts

【解决方案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

【讨论】：

我试过这个 dateTimeLabelFormats: { minute: '%Y-%m-%d %H:%M' } 但下面的数据是这种数字，例如10:00:48.278、10:00:48.378 等
可能需要将格式（字符串部分）添加到LIST中：秒，分钟，...等
抱歉，很难在键入的消息中快速解释，请查看上面的答案。 dateTimeLabelFormats 的选项列表可能需要设置“默认值”以匹配单一格式。那么，当它选择一种格式时，它只有一个选择。
是的，我尝试了最新的建议，即把所有格式都放在同一位置。
好的，除了为什么x轴标签没有出现在左边的第一个点以及如何使x轴上的标签垂直？

【解决方案2】：

作为与其他人的分享，我注意到 unix_timestamp 应该是 1000 的倍数，才能正确显示在 hightchart 中。

【讨论】：