Php 将json数据放入Highcharts散点图
我无法用Highcharts绘制2个系列的散点图。事实上,图表甚至没有显示出来。请帮我确定我做错了什么。我找不到一个散点图的例子,我对这个很陌生。我从一个php文件中获取了json数据,该文件如下所示:Php 将json数据放入Highcharts散点图,php,json,highcharts,scatter,Php,Json,Highcharts,Scatter,我无法用Highcharts绘制2个系列的散点图。事实上,图表甚至没有显示出来。请帮我确定我做错了什么。我找不到一个散点图的例子,我对这个很陌生。我从一个php文件中获取了json数据,该文件如下所示: [[65,44],[66,37],[67,42],[68,55],[65,50],[65,41],[65,41],[68,41],[69,42],[70,47],[69,55],[67,45],[67,49],[67,53],[67,49],[68,51],[68,55],[68,57],[70
[[65,44],[66,37],[67,42],[68,55],[65,50],[65,41],[65,41],[68,41],[69,42],[70,47],[69,55],[67,45],[67,49],[67,53],[67,49],[68,51],[68,55],[68,57],[70,53],[69,66],[68,54],[69,52],[68,48]][[75,36],[72,42],[75,44],[69,56],[72,40],[73,37],[77,34],[77,40],[74,50],[77,45],[77,43],[75,47],[73,52],[73,50],[75,44],[72,54],[71,57],[72,57],[74,55],[74,54],[75,47],[78,45],[75,43]]
这应该是(x,y)格式的两个系列。我想把这些画在高图的散点图上。我的密码是:
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("comfortgb1b.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container4',
type: 'scatter',
marginRight: 175,
marginBottom: 50
},
title: {
text: 'Comfort Level',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
title: {
enabled: true,
text: 'Temp (F)'
},
min: 60,
max: 85,
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Humidity (%RH)'
},
min: 30,
max: 100
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} F, {point.y} %RH'
}
},
series: [{
name: 'Night',
data: json(1)
}, {
name: 'Night',
data: json(2)
});
});
});
});
</script>
对此不确定,但乍一看,我认为从php文件返回的数组需要在其外部添加一个方括号,以便将其解析为正确的json。目前是:
[[65,44],[66,37]..][[75,36],[72,42]..]
据我所知,这只是两个数组。您想要的是将这些数组包含在一个数组中。尝试将此更改为:
[[[65,44],[66,37]..],[[75,36],[72,42]..]]
也就是说,在外部添加一个额外的方括号,并使用逗号分隔两个数组
此外,这里:
series: [{
name: 'Night',
data: json(1)
}, {
name: 'Night',
data: json(2)
});
json(1)和json(2)被解释为函数调用。您应改为使用:
series: [{
name: 'Night',
data: json[0]
}, {
name: 'Night',
data: json[1]
});
编辑----根据OP编辑进行编辑
同样根据要求,为了添加逗号和正确的格式,可以在最后两行更改php文件,如下所示:
echo "[".json_encode($ret1, JSON_NUMERIC_CHECK).",";
echo json_encode($ret2, JSON_NUMERIC_CHECK)."]";
你有几件事会给你带来麻烦。看这把小提琴: 首先,我认为您的json格式不适合2系列绘图。您有两个数据数组,它们只是相互对接,而不是在另一个数组中。链接的fiddle纠正了这一点(并将其填充到var中,因为getJSON()调用将在jsFiddle中失败)。每个点是(x,y)坐标的数组。每个series.data都是一个点数组。您的json需要是series.data数组的数组。所以我们看的是3层的嵌套数组 其次,您似乎有一组格式不正确的图表选项。最值得注意的是,序列节点(带有名称和数据)位于plotOptions节点内部,而它本应位于plotOptions节点外部。并且该系列节点没有正确终止 第三,一旦json数据和图表选项格式正确,访问json数组的过程如下:
series: [{
name: 'Night',
data: json[0]
}, {
name: 'Day',
data: json[1]
}]
数组是基于0的(因此第一条记录将被索引为0,第二条记录将被索引为1,等等),并且可以使用括号[]而不是括号()
抱歉,我将您的一个系列重命名为“Day”,以便在图表中看到差异
至于PHP脚本。。。试试这个:
$result1 = mysql_query("SELECT round(AVG(d_internal_duct_return),0) AS 'avg_return', round(AVG(d_evap_pre_humidity),0) AS 'avg_hum' FROM pheom.pheom_gb WHERE timestamp between subdate(curdate(), interval 2 month) and curdate() AND HOUR(Timestamp) NOT BETWEEN 9 AND 22 GROUP BY DAY(Timestamp) ORDER BY Timestamp");
$ret1 = array();
while($item = mysql_fetch_array($result1)) {
$avg_return1 = $item['avg_return'];
$avg_hum1 = $item['avg_hum'];
$ret1[] = array($avg_return1,$avg_hum1);
}
$result2 = mysql_query("SELECT round(AVG(d_internal_duct_return),0) AS 'avg_return', round(AVG(d_evap_pre_humidity),0) AS 'avg_hum' FROM pheom.pheom_gb WHERE timestamp between subdate(curdate(), interval 2 month) and curdate() AND HOUR(Timestamp) BETWEEN 9 AND 22 GROUP BY DAY(Timestamp) ORDER BY Timestamp");
$ret2 = array();
while($item = mysql_fetch_array($result2)) {
$avg_return2 = $item['avg_return'];
$avg_hum2 = $item['avg_hum'];
$ret2[] = array($avg_return2,$avg_hum2);
}
echo json_encode(array($ret1,$ret2), JSON_NUMERIC_CHECK);
非常感谢。我在上面发布了我的json php代码。你能帮我在数组之间取一个逗号吗?那个PHP脚本只会给你一个系列。您确定它提供的输出与您在开始时提到的相同吗?你要运行脚本两次吗?是的,对不起。我贴错了。请看上面的更正版本。太好了!非常感谢。现在,最后一个问题。如何编辑Highcharts文件以提取数据?我用了杰克的小提琴,它很管用。但是当我试图从php文件中提取json数据时,它不起作用。
$result1 = mysql_query("SELECT round(AVG(d_internal_duct_return),0) AS 'avg_return', round(AVG(d_evap_pre_humidity),0) AS 'avg_hum' FROM pheom.pheom_gb WHERE timestamp between subdate(curdate(), interval 2 month) and curdate() AND HOUR(Timestamp) NOT BETWEEN 9 AND 22 GROUP BY DAY(Timestamp) ORDER BY Timestamp");
$ret1 = array();
while($item = mysql_fetch_array($result1)) {
$avg_return1 = $item['avg_return'];
$avg_hum1 = $item['avg_hum'];
$ret1[] = array($avg_return1,$avg_hum1);
}
$result2 = mysql_query("SELECT round(AVG(d_internal_duct_return),0) AS 'avg_return', round(AVG(d_evap_pre_humidity),0) AS 'avg_hum' FROM pheom.pheom_gb WHERE timestamp between subdate(curdate(), interval 2 month) and curdate() AND HOUR(Timestamp) BETWEEN 9 AND 22 GROUP BY DAY(Timestamp) ORDER BY Timestamp");
$ret2 = array();
while($item = mysql_fetch_array($result2)) {
$avg_return2 = $item['avg_return'];
$avg_hum2 = $item['avg_hum'];
$ret2[] = array($avg_return2,$avg_hum2);
}
echo json_encode(array($ret1,$ret2), JSON_NUMERIC_CHECK);