0

我正在尝试在 Highchart 中显示 JSON DATA。不幸的是没有成功。没有传输 JSON 数据。不管我怎么尝试。我的问题是如何将以下数据合并到 Highcharts 中？它应该看起来像本教程中的方式

highcharts.php

$queryVLH = "SELECT
                CONCAT(Hour, ':00-', Hour+1, ':00') AS Hours,
                COUNT(visitor_date) AS `visitors`

            FROM
                (
                    SELECT  0 AS Hour
                    UNION ALL SELECT  1
                    UNION ALL SELECT  2
                    UNION ALL SELECT  3
                    UNION ALL SELECT  4
                    UNION ALL SELECT  5
                    UNION ALL SELECT  6
                    UNION ALL SELECT  7
                    UNION ALL SELECT  8
                    UNION ALL SELECT  9
                    UNION ALL SELECT 10
                    UNION ALL SELECT 11
                    UNION ALL SELECT 12
                    UNION ALL SELECT 13
                    UNION ALL SELECT 14
                    UNION ALL SELECT 15
                    UNION ALL SELECT 16
                    UNION ALL SELECT 17
                    UNION ALL SELECT 18
                    UNION ALL SELECT 19
                    UNION ALL SELECT 20
                    UNION ALL SELECT 21
                    UNION ALL SELECT 22
                    UNION ALL SELECT 23
                )   AS AllHours

            LEFT JOIN `visitors_table` 
                ON HOUR(`visitor_date`) = Hour AND DATE(`visitor_date`) = DATE(CURDATE())

            GROUP BY
                Hour

            ORDER BY
                Hour";

if(!$result = $mysqli->query($queryVLH)) {
    die($mysqli->error);
}

    // Output
    $rows = array();
    while ($r = $result->fetch_array()) {
        $row[0] = $r[0];
        $row[1] = $r[1];
        array_push($rows,$row);
    }

    echo json_encode($rows, JSON_NUMERIC_CHECK); 

$result->free();
$mysqli->close();

我的 JSON 数据如下所示：

[["0:00-1:00",0],["1:00-2:00",0],["2:00-3:00",0],["3:00-4:00",0],["4:00-5:00",0],["5:00-6:00",0],["6:00-7:00",0],["7:00-8:00",0],["8:00-9:00",0],["9:00-10:00",0],["10:00-11:00",4],["11:00-12:00",0],["12:00-13:00",0],["13:00-14:00",0],["14:00-15:00",0],["15:00-16:00",3],["16:00-17:00",0],["17:00-18:00",0],["18:00-19:00",0],["19:00-20:00",0],["20:00-21:00",5],["21:00-22:00",0],["22:00-23:00",6],["23:00-24:00",0]]

我加载了许多不同方式的highcharts。我目前有以下代码：

<script type="text/javascript">
    var chart;
        $(document).ready(function() {
            var options = {
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'column',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Hourly Visits',
                    x: -20 //center
                },
                subtitle: {
                    text: 'last 24 hours',
                    x: -20
                },
                xAxis: {
                    type: 'datetime',
                    tickInterval: 3600 * 1000, // one hour
                    tickWidth: 0,
                    gridLineWidth: 1,
                    labels: {
                        align: 'center',
                        x: -3,
                        y: 20,
                        formatter: function() {
                            return Highcharts.dateFormat('%l%p', this.value);
                        }
                    }
                },
                yAxis: {
                    title: {
                    text: 'Visits'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
                },
                tooltip: {
                    formatter: function() {
                        return Highcharts.dateFormat('%l%p', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>';
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: []
            }
            $.getJSON("highcharts.php", function(json) {
                options.xAxis.categories = json[0]['data'];
                options.series[0] = json[1];
                options.series[1] = json[0];
                chart = new Highcharts.Chart(options);
            });
        });
</script>
4

1 回答 1

1

highcharts 的格式需要如下所示，使用 UTC 时间格式：

series: [{
    name: 'your name',
    data: [
        [Date.UTC(1970,  9, 27), 0   ],
        [25920000000, 2]
    ] 
}, {
    name: 'your name',
    data: [
        [Date.UTC(1970,  9, 27), 0   ],
        [25920000000, 2]
    ]
}];

所以你的函数应该是这样的：

$.getJSON("highcharts.php", function(json) {
    options.series[0].data = json[1];
    options.series[1].data = json[0];
    chart = new Highcharts.Chart(options);
});
于 2013-09-07T18:27:32.043 回答