Fatal编程技术网
  • javascript/
  • Javascript 在Highchart中使用服务器端json

Javascript 在Highchart中使用服务器端json

javascript php json highcharts

Javascript 在Highchart中使用服务器端json,javascript,php,json,highcharts,Javascript,Php,Json,Highcharts,我已经搜索了几个小时，寻找了大量的例子，但最后什么都不管用。 我的问题是：我想将服务器端json用于折线图。在示例中，我发现json要么来自数据库，要么来自一个已经预处理好的json文件。 对于我的用例，它如下所示：我希望根据时间戳可视化值 sampleData.json [{ "timestamp": "2014-05-22T02:15:00+02:00", "value": 235.0 }, { "timestamp": "2014-05-22T02:30:00+02

我已经搜索了几个小时，寻找了大量的例子，但最后什么都不管用。
我的问题是：我想将服务器端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
}]
此json文件由mygetData.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>


-JSFIDLE演示
$（函数（）{
$（文档）.ready（函数（）{
$（文档）.ready（函数（）{
函数requestData（）{
$.ajax({
url:'getData.php'，
数据类型：“json”，
成功：功能（数据）{
警报（数据）；
chart.series[0].setData（数据[0]）；
},
缓存：false
});
}
var图；
//图表位
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
键入：“行”，
活动：{
加载：请求数据
}
},
标题：{
文字：“折线图”
},
xAxis：{
键入：“日期时间”，
最小范围：1*24*3600000//一天
},
亚克斯：{
标题：{
文本：“值”
}
},
图例：{
已启用：true
},
系列：[{
名称：'随机数据'，
数据：[0]
}
]
});
});
});
});
我还将其全部放在JSFIDLE中（不幸的是带有“XMLHttpRequest无法加载”错误），但它可能有用：

现在我们来谈谈我的实际问题：

  • 到目前为止，我的图表中没有数据。虽然已创建，但没有加载数据。json本身已加载-
    alert（data）
    向我显示sampleData.json。
  • 虽然我已经查看了现有的示例，但我无法理解如何定义属性，这些属性应该用于绘制线和轴。对于me，应使用时间戳和值
  • 此外，我不确定json格式是否适合Highchart使用。这样可以吗，还是我必须用不同的方式解析它
    • 如果有人能帮我，那就太棒了。我已经尝试了几个小时，但没有成功：-（

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

    获取JSON数据后，必须将该数据推送到Series.data中，然后生成图表。 您可以参考此解决方案：

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

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