php - 将 PHP/MySQL 数据格式化为 HighCharts 的正确 JSON 格式

Question

几天来我一直在绞尽脑汁，试图将一些数据组织成适当的 JSON 格式，以便可以将其绘制在 HighCharts 图表中。

我的计划是执行一个 jQuery 函数来调用一个 PHP 脚本，该脚本从 MySQL 数据库中提取几列天气数据。我可以在 JavaScript 端重新组织数据，但更愿意在 PHP 中完成所有数据组织，然后将单个正确的 JSON 结构输入 HighCharts 引擎。

我正在查看天气数据，因此我每分钟都会采样几列数据。我从 MySQL 检索的数据列是:JSTimestamp(对于 JavaScript 来说是 unix 时间戳 * 1000)、avgOutdoorTemperature、avgIndoorTemperature、avgOutdoorHumidity、avgIndoorHumidity。我已将每一列填充到它们自己的数组中。

我似乎无法理解将数据操作为以下 JSON/数组格式所需的 PHP 逻辑:

[
  [
    [JSTimestamp1, avgOutdoorTemperature1],
    [JSTimestamp2, avgOutdoorTemperature2],
    [JSTimestamp3, avgOutdoorTemperature3],
    [JSTimestampN, avgOutdoorTemperatureN]
  ],
  [
    [JSTimestamp1, avgIndoorTemperature1],
    [JSTimestamp2, avgIndoorTemperature2],
    [JSTimestamp3, avgIndoorTemperature3],
    [JSTimestampN, avgIndoorTemperatureN]
  ],
  [
    [JSTimestamp1, avgOutdoorHumidity1],
    [JSTimestamp2, avgOutdoorHumidity2],
    [JSTimestamp3, avgOutdoorHumidity3],
    [JSTimestampN, avgOutdoorHumidityN]
  ],
  [
    [JSTimestamp1, avgIndoorHumidity1],
    [JSTimestamp2, avgIndoorHumidity2],
    [JSTimestamp3, avgIndoorHumidity3],
    [JSTimestampN, avgIndoorHumidityN]
  ]
]

我用虚拟数据填充了上述结构，它在 HighCharts 中绘制得很漂亮。这是一个示例演示，显示了图表的外观:http://highcharts.com/jsbin/afutef/11/edit#javascript,live

我当前的代码是:

<?php

include_once('./include/mysqldatabase.php');
include_once('./include/mysqlresultset.php');

date_default_timezone_set('America/New_York');

$MYSQL_HOST = 'ip_address';
$MYSQL_USER = 'username';
$MYSQL_PASS = 'password';
$MYSQL_NAME = 'weatherdata';

$db = MySqlDatabase::getInstance();
try {
    $conn = $db->connect($MYSQL_HOST, $MYSQL_USER, $MYSQL_PASS, $MYSQL_NAME);
}
catch (Exception $e) {
    die($e->getMessage());
}

$query = "
    select
        RecDate,
        unix_timestamp(RecDateTime)*1000 as JSTime,
        avgOutdoorTemperature,
        avgIndoorTemperature,
        avgOutdoorHumidity,
        avgIndoorHumidity
    from `rollup-minute-60`
    where 
        RecDate > 201301010000
    ";

$timeArray = array();
$avgOutdoorTemperatureArray = array();
$avgIndoorTemperatureArray = array();
$combinedArray = array();
$i = 0;

$seriesNames = array('Average Outdoor Temperature','Average Indoor Temperature', 'Average Outdoor Humidity', 'Average Indoor Humidity');

foreach ($db->iterate($query) as $r) {
    $jstime = $r->JSTime;
    $avgOutdoorTemperature = $r->avgOutdoorTemperature;
    $avgIndoorTemperature = $r->avgIndoorTemperature;
    $avgOutdoorHumidity = $r->avgOutdoorHumidity;
    $avgIndoorHumidity = $r->avgIndoorHumidity;

    $timeArray[$i] = (float)$jstime;
    $avgOutdoorTemperatureArray[$i] = (float)$avgOutdoorTemperature;
    $avgIndoorTemperatureArray[$i] = (float)$avgIndoorTemperature;
    $avgOutdoorHumidityArray[$i] = (float)$avgOutdoorHumidity;
    $avgIndoorHumidityArray[$i] = (float)$avgIndoorHumidity;    

    $combinedArray[$i] = array((float)$avgOutdoorTemperature, (float)$avgIndoorTemperature, (float)$avgOutdoorHumidity, (float)$avgIndoorHumidity);

    $i++;
}

echo "Combined array:<br>";
echo json_encode($combinedArray);
echo "<br><br><br>";

echo "Time array:<br>";
echo json_encode($timeArray);
echo "<br><br><br>";

$arraySize = sizeof($timeArray);
$seriesNameSize = sizeof($seriesNames);
$outputJSONArray = array();
$tempArray = array();

for ($i=0; $i<$seriesNameSize; $i++) {

    for ($j=0; $j<$arraySize; $j++) {
        $tempArray = array();

        array_push($tempArray, $timeArray[$j], $combinedArray[$j][$i]);
        echo "i=".$i.", j=".$j.", tempArray: " . json_encode($tempArray) ."<br>";

        $outputJSONArray[$i] = $tempArray;

     } 
}

echo json_encode($outputJSONArray);

?>

使用上面的当前代码，我的输出数组仅显示 $outputJSONArray 中的最后一个元素，而不是多维构造。

有人能帮我指出正确的方向吗？我在这个网站上找到了很多很好的信息来帮助我入门，但需要一些帮助来克服最后的障碍。

谢谢!

Answer 1

查看 Highcharts 常见问题解答:http://docs.highcharts.com/#preprocessing-data-from-a-database 第二个示例告诉您如何做到这一点:

<?php
while ($row = mysql_fetch_array($result)) {
   extract $row;
   $datetime *= 1000; // convert from Unix timestamp to JavaScript time
   $data[] = "[$datetime, $value]";
}
?>
var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container'
      },
      series: [{
         data: [<?php echo join($data, ',') ?>]
      }]
});