将json数据输入Highcharts散点图

时间:2013-08-15 16:20:20

标签: 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,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)格式的两个系列。我想在HighCharts中的散点图上绘制这些图形。我的HighCharts代码是:

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

提前致谢!

创建json数据的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($ret1, JSON_NUMERIC_CHECK);
echo json_encode($ret2, JSON_NUMERIC_CHECK);

2 个答案:

答案 0 :(得分:2)

不确定这一点,但乍一看我觉得从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]
});

EDIT ----根据OP编辑编辑

另外,根据要求,为了添加逗号和正确的格式,可以在最后两行更改php文件,如下所示:

echo "[".json_encode($ret1, JSON_NUMERIC_CHECK).",";
echo json_encode($ret2, JSON_NUMERIC_CHECK)."]";

答案 1 :(得分:1)

你有几件事情会给你带来麻烦。看到这个小提琴:http://jsfiddle.net/nbwN9/1/

首先,我不认为你的json是2系列情节的正确格式。您有两个数据阵列只是彼此对接而不是在另一个数组中。链接的小提琴纠正了(并将其填充到var中,因为getJSON()调用将在jsFiddle中失败)。每个点是(x,y)坐标的数组。每个series.data都是一个点数组。你的json需要是一个series.data数组的数组。所以我们正在深入研究嵌套数组。

其次,您似乎有一组格式错误的图表选项。最值得注意的是,您的系列节点(带有名称和数据)位于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);