将服务器端 json 与 Highchart 一起使用答案

【问题标题】：Use server-side json with Highchart将服务器端 json 与 Highchart 一起使用
【发布时间】：2026-01-22 15:30:01
【问题描述】：

我已经搜索了几个小时并寻找了大量示例，但最后注意到对我有用。
我的问题：我想为 Line-Highchart 使用服务器端 json。在示例中，我发现 json 来自数据库或已经预先格式化的 json 文件。
对于我的用例，它如下所示：我想可视化 value “取决于”他们的时间戳。

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
}]

这个 json 文件被我的 getData.php

读取

<?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 无法加载”-错误）但也许它很有用：http://jsfiddle.net/ft8hc/1/

现在我们来回答我的实际问题：

到目前为止，我的图表中没有任何数据。虽然是创建的，但是没有加载数据。 json 本身已加载 - alert(data) 向我展示了 sampleData.json。
虽然我查看了现有示例，但我无法弄清楚如何定义属性，这些属性应该用于绘制线和轴。对我来说应该使用 timestamp 和 value。
此外，我不确定 json 格式是否是 Highchart 可以使用的正确格式。这样可以吗，还是我必须以不同的方式解析它？

如果有人可以帮助我，那将是非常棒的。我已经尝试了几个小时没有成功:-(

【问题讨论】：

标签： javascript php json highcharts

【解决方案1】：

这是因为您的图表定义中没有指定数据。见：

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

在获取 JSON 数据后，您必须将该数据推送到此 Series.data 中，然后生成图表。你可以参考这个解决方案：https://*.com/a/8169187/3660930

【讨论】：

【解决方案2】：

你的 json 应该 - 使用值 x/y 而不是您的自定义名称 - 日期应该是时间戳（以毫秒为单位的时间）[数字类型] - 值应该是数字

【讨论】：