在Highchart中使用服务器端json
[英]Use server-side json with Highchart
问题描述
I've searched for a few hours and looked for tons of examples, but in the end noting has worked for me. 
我已经搜索了几个小时，并查找了大量示例，但最后注意到对我有用。
My problem: I want to use a server-side json for a Line-Highchart. 我的问题：我想为Line-Highchart使用服务器端json。 In the examples, which I've found the json comes either from a database or in an already preformated json-file. 在示例中，我发现json来自数据库或已经预先格式化的json文件。
For my use case it looks like the following: I want to visualize the value "depending" on their timestamp. 对于我的用例，它看起来如下所示：我想可视化值 “取决于”其时间戳记。
sampleData.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
}]
This json file is read by my getData.php 我的getData.php读取了此json文件
<?php
// It reads a json formatted text file and outputs it.
$json_o = file_get_contents("sampledata.json");
echo $json_o;
?>
The output looks exactly like the input, so exactly like the sampleData.json itself. 输出看起来与输入完全一样，因此与sampleData.json本身完全一样。
Now I use my highchart.html to create a Highchart. 现在，我使用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>
I've also put all of it in a JsFiddle (unfortunately with a "XMLHttpRequest cannot load"-Error) but maybe it is useful: http://jsfiddle.net/ft8hc/1/ 我也将所有内容都放在了JsFiddle中（不幸的是，“ XMLHttpRequest无法加载” -Error），但也许很有用： http : //jsfiddle.net/ft8hc/1/
Now we come to my actual questions: 现在我们来回答我的实际问题：
- Until now I get no data into my Chart. 到目前为止，我的图表中没有任何数据。 Although it is created, but there is no data loaded. 虽然已创建，但是没有数据加载。 The json itself is loaded -
alert(data)shows me the sampleData.json.json本身已加载-alert alert(data)向我显示了sampleData.json。 - Although I've looked through existing examples, I could not figured out, how to define the attributes, which should be used to draw the line and the axes. 尽管已经看过现有示例，但我仍无法弄清楚如何定义属性，该属性应用于绘制直线和轴。 For me timestamp and value should be used. 对我来说，应该使用时间戳和值 。
- Additionally I am not sure, if the json Format is the right one that can be used by Highchart. 另外我不确定json格式是否是Highchart可以使用的正确格式。 Is it okay like this or do I have to parse it differently? 这样可以吗，还是我必须以不同的方式解析它？
Would be absolutely awesome if someone could help me. 如果有人可以帮助我，那将是绝对棒的。 I've tried it for hours without success :-( 我尝试了几个小时都没有成功:-(
2 个解决方案
解决方案1
1 2014-05-23 01:44:01
This is because you have no data specified in your chart definition. 这是因为您没有在图表定义中指定数据。 See: 看到：
series : [{
name : 'Random data',
data : [0]
}]
Upon getting the JSON data, you must PUSH that data into this Series.data and generate the chart thereafter. 获取JSON数据后，您必须将该数据推送到Series.data中，然后生成图表。 You can refer to this solution : https://stackoverflow.com/a/8169187/3660930 您可以参考以下解决方案： https : //stackoverflow.com/a/8169187/3660930
解决方案2
0 2014-05-23 09:45:28
您的json应该-使用值x / y代替您的自定义名称-日期应为时间戳记（时间以毫秒为单位）[数字类型]-值应为数字
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.