在Highchart中使用服務器端json

Question

我已經搜索了幾個小時，並查找了大量示例，但最后注意到對我有用。
我的問題：我想為Line-Highchart使用服務器端json。 在示例中，我發現json來自數據庫或已經預先格式化的json文件。
對於我的用例，它看起來如下所示：我想可視化值 “取決於”其時間戳記。

sampleData.json

[{
    "timestamp": "2014-05-22T02:15:00+02:00",
    "value": 235.0
}, {
    "timestamp": "2014-05-22T02:30:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T02:45:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T03:00:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T03:15:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T03:30:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T03:45:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T04:00:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T04:15:00+02:00",
    "value": 234.0
}, {
    "timestamp": "2014-05-22T04:30:00+02:00",
    "value": 235.0
}, {
    "timestamp": "2014-05-22T04:45:00+02:00",
    "value": 235.0
}, {
    "timestamp": "2014-05-22T05:00:00+02:00",
    "value": 235.0
}]

我的getData.php讀取了此json文件

<?php
// It reads a json formatted text file and outputs it.
$json_o = file_get_contents("sampledata.json");
echo $json_o;
?>

輸出看起來與輸入完全一樣，因此與sampleData.json本身完全一樣。

現在，我使用highchart.html創建一個Highchart。

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/data.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <!-- Additional files for the Highslide popup effect -->
    <script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
    <script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">
    </div><style type='text/css'></style>

    <script type='text/javascript'>
    $(function () {
        $(document).ready(function () {

            $(document).ready(function () {
                function requestData() {
                    $.ajax({
                        url : 'getData.php',
                        datatype : 'json',
                        success : function (data) {
                            alert(data);
                            chart.series[0].setData(data[0]);
                        },
                        cache : false
                    });
                }

                var chart;
                //Chart bits
                chart = new Highcharts.Chart({
                        chart : {
                            renderTo : 'container',
                            type : 'line',
                            events : {
                                load : requestData
                            }
                        },
                        title: {
                            text: 'Line Chart'
                        },
                        xAxis: {
                            type: 'datetime',
                            minRange: 1 * 24 * 3600000 // one day
                        },
                        yAxis : {
                            title : {
                                text : 'Value'
                            }
                        },
                        legend: {
                            enabled: true
                        },
                        series : [{
                                name : 'Random data',
                                data : [0]
                            }
                        ]
                    });
            });
        });
    });
  </script>
  </head>
  <body></body>
</html>

我也將所有內容都放在了JsFiddle中（不幸的是，“ XMLHttpRequest無法加載” -Error），但也許很有用： http : //jsfiddle.net/ft8hc/1/

現在我們來回答我的實際問題：

到目前為止，我的圖表中沒有任何數據。 雖然已創建，但是沒有數據加載。 json本身已加載-alert alert(data)向我顯示了sampleData.json。
盡管已經看過現有示例，但我仍無法弄清楚如何定義屬性，該屬性應用於繪制直線和軸。 對我來說，應該使用時間戳和值。
另外我不確定json格式是否是Highchart可以使用的正確格式。 這樣可以嗎，還是我必須以不同的方式解析它？

如果有人可以幫助我，那將是絕對棒的。 我嘗試了幾個小時都沒有成功:-(

Answer 1

這是因為您沒有在圖表定義中指定數據。 看到：

series : [{
          name : 'Random data',
           data : [0]
         }]

獲取JSON數據后，您必須將該數據推送到Series.data中，然后生成圖表。 您可以參考以下解決方案： https : //stackoverflow.com/a/8169187/3660930

Answer 2

您的json應該-使用值x / y代替您的自定義名稱-日期應為時間戳記（時間以毫秒為單位）[數字類型]-值應為數字

在Highchart中使用服務器端json

問題描述

2 個解決方案

解決方案1
1 2014-05-23 01:44:01

解決方案2
0 2014-05-23 09:45:28

在Highchart中使用服務器端json

問題描述

2 個解決方案

解決方案1 1 2014-05-23 01:44:01

解決方案2 0 2014-05-23 09:45:28

解決方案1
1 2014-05-23 01:44:01

解決方案2
0 2014-05-23 09:45:28