为flot图表数组格式化json数据

Question

我将使用以下 PHP 代码从 MySQL 数据库中提取温度传感器数据到一个 PHP 文件中：

<?php
$hostname = 'xxxxx';
$username = 'xxxxx';
$password = 'xxxxx';
$dbname="measurements";
$usertable="temperature";

try {
$dbh = new PDO("mysql:host=$hostname;dbname=measurements", 
                           $username, $password);
/*** The SQL SELECT statement ***/
$sth = $dbh->prepare("
   SELECT
   ROUND(AVG(`temperature`),1) AS temperature,
   TIMESTAMP(LEFT(`dtg`,16)) AS dtg
   FROM `temperature`
   GROUP BY LEFT(`dtg`,16)
   ORDER BY `dtg` DESC
   LIMIT 0,800
");
$sth->execute();

/* Fetch all of the remaining rows in the result set */
$result = $sth->fetchAll(PDO::FETCH_ASSOC);
/*** close the database connection ***/
$dbh = null;

}
catch(PDOException $e)
{
    echo $e->getMessage();
}

function make_pair($date, $amount) {
return array($date, $amount);
}
$json_data = json_encode($result, JSON_NUMERIC_CHECK); 
?>

我随后使用JavaScript在flot图中绘制此数据：

 <script type="text/javascript">
//put array into javascript variable

var dataset1 = <?php echo json_encode($result); ?>;

//plot
$(document).ready(function () {
    $.plot($("#placeholder"),  dataset1  );
});

</script>

当我在浏览器中打开 PHP 文件并查看 JavaScript 控制台时，可以看到数据正常传输并保存为变量 dataset1。

它的样子是这样的：

//put array into javascript variable

var dataset1 = [{"temperature":"19.6","dtg":"2016-07-28 12:53:00"},{"temperature":"19.5","dtg":"2016-07-28 12:52:00"},{"temperature":"19.5","dtg":"2016-07-28 12:51:00"},{"temperature":"19.6","dtg":"2016-07-28 12:50:00"},{"temperature":"19.6","dtg":"2016-07-28 12:49:00"},{"temperature":"19.6","dtg":"2016-07-28 12:48:00"},{"temperature":"19.6","dtg":"2016-07-28 12:47:00"},{"temperature":"19.6","dtg":"2016-07-28 12:46:00"},{"temperature":"19.6","dtg":"2016-07-28 12:45:00"},{"temperature":"19.6","dtg":"2016-07-28 12:44:00"},{"temperature":"19.7","dtg":"2016-07-28 12:43:00"},{"temperature":"19.7","dtg":"2016-07-28 12:42:00"},{"temperature":"19.7","dtg":"2016-07-28 12:41:00"},{"temperature":"19.7","dtg":"2016-07-28 12:40:00"},{"temperature":"19.7","dtg":"2016-07-28 12:39:00"},{"temperature":"19.7","dtg":"2016-07-28 12:38:00"},{"temperature":"19.8","dtg":"2016-07-28 12:37:00"},{"temperature":"19.8","dtg":"2016-07-28 12:36:00"},{"temperature":"19.8","dtg":"2016-07-28 12:35:00"},{"temperature":"19.8","dtg":"2016-07-28 12:34:00"},{"temperature":"19.8","dtg":"2016-07-28 12:33:00"},{"temperature":"19.8","dtg":"2016-07-28 12:32:00"},{"temperature":"19.8","dtg":"2016-07-28 12:31:00"},{"temperature":"19.8","dtg":"2016-07-28 12:30:00"},{"temperature":"19.9","dtg":"2016-07-28 12:29:00"},{"temperature":"19.9","dtg":"2016-07-28 12:28:00"},{"temperature":"19.9","dtg":"2016-07-28 12:27:00"},{"temperature":"19.9","dtg":"2016-07-28 12:26:00"},{"temperature":"19.9","dtg":"2016-07-28 12:25:00"},{"temperature":"19.9","dtg":"2016-07-28 12:24:00"},{"temperature":"20.0","dtg":"2016-07-28 12:23:00"},{"temperature":"20.0","dtg":"2016-07-28 12:22:00"},{"temperature":"20.1","dtg":"2016-07-28 12:21:00"},{"temperature":"20.1","dtg":"2016-07-28 12:20:00"},{"temperature":"20.1","dtg":"2016-07-28 12:19:00"},{"temperature":"20.0","dtg":"2016-07-28 12:18:00"},{"temperature":"20.0","dtg":"2016-07-28 12:17:00"},{"temperature":"20.0","dtg":"2016-07-28 12:16:00"},{"temperature":"20.0","dtg":"2016-07-28 12:15:00"},{"temperature":"20.0","dtg":"2016-07-28 12:14:00"},{"temperature":"20.0","dtg":"2016-07-28 12:13:00"},{"temperature":"20.0","dtg":"2016-07-28 12:12:00"},{"temperature":"20.0","dtg":"2016-07-28 12:11:00"},{"temperature":"19.9","dtg":"2016-07-28 12:10:00"},{"temperature":"20.0","dtg":"2016-07-28 12:09:00"},{"temperature":"20.0","dtg":"2016-07-28 12:08:00"},{"temperature":"20.0","dtg":"2016-07-28 12:07:00"},{"temperature":"20.0","dtg":"2016-07-28 12:06:00"},{"temperature":"19.9","dtg":"2016-07-28 12:05:00"},{"temperature":"19.9","dtg":"2016-07-28 12:04:00"},{"temperature":"19.9","dtg":"2016-07-28 12:03:00"},{"temperature":"19.9","dtg":"2016-07-28 12:02:00"},{"temperature":"19.9","dtg":"2016-07-28 12:01:00"},{"temperature":"19.9","dtg":"2016-07-28 12:00:00"},{"temperature":"19.9","dtg":"2016-07-28 11:59:00"},{"temperature":"19.9","dtg":"2016-07-28 11:58:00"},{"temperature":"19.8","dtg":"2016-07-28 11:57:00"},{"temperature":"19.8","dtg":"2016-07-28 11:56:00"},{"temperature":"19.8","dtg":"2016-07-28 11:55:00"},{"temperature":"19.8","dtg":"2016-07-28 11:54:00"},{"temperature":"19.8","dtg":"2016-07-28 11:53:00"},{"temperature":"19.7","dtg":"2016-07-28 11:52:00"},{"temperature":"19.7","dtg":"2016-07-28 11:51:00"},{"temperature":"19.7","dtg":"2016-07-28 11:50:00"},{"temperature":"19.7","dtg":"2016-07-28 11:49:00"},{"temperature":"19.7","dtg":"2016-07-28 11:48:00"},{"temperature":"19.7","dtg":"2016-07-28 11:47:00"},{"temperature":"19.6","dtg":"2016-07-28 11:46:00"},{"temperature":"19.7","dtg":"2016-07-28 11:45:00"},{"temperature":"19.6","dtg":"2016-07-28 11:44:00"},{"temperature":"19.6","dtg":"2016-07-28 11:43:00"},{"temperature":"19.6","dtg":"2016-07-28 11:42:00"},{"temperature":"19.6","dtg":"2016-07-28 11:41:00"},{"temperature":"19.6","dtg":"2016-07-28 11:40:00"},{"temperature":"19.6","dtg":"2016-07-28 11:39:00"},{"temperature":"19.6","dtg":"2016-07-28 11:38:00"},{"temperature":"19.6","dtg":"2016-07-28 11:37:00"},{"temperature":"19.6","dtg":"2016-07-28 11:36:00"},{"temperature":"19.6","dtg":"2016-07-28 11:35:00"},{"temperature":"19.6","dtg":"2016-07-28 11:34:00"},{"temperature":"19.5","dtg":"2016-07-28 11:33:00"},{"temperature":"19.5","dtg":"2016-07-28 11:32:00"},{"temperature":"19.5","dtg":"2016-07-28 11:31:00"},{"temperature":"19.5","dtg":"2016-07-28 11:30:00"},{"temperature":"19.5","dtg":"2016-07-28 11:29:00"},{"temperature":"19.5","dtg":"2016-07-28 11:28:00"},{"temperature":"19.5","dtg":"2016-07-28 11:27:00"},{"temperature":"19.5","dtg":"2016-07-28 11:26:00"},{"temperature":"19.5","dtg":"2016-07-28 11:25:00"},{"temperature":"19.5","dtg":"2016-07-28 11:24:00"},{"temperature":"19.4","dtg":"2016-07-28 11:23:00"},{"temperature":"19.4","dtg":"2016-07-28 11:22:00"},{"temperature":"19.4","dtg":"2016-07-28 11:21:00"},{"temperature":"19.4","dtg":"2016-07-28 11:20:00"},{"temperature":"19.4","dtg":"2016-07-28 11:19:00"},{"temperature":"19.4","dtg":"2016-07-28 11:18:00"},{"temperature":"19.4","dtg":"2016-07-28 11:17:00"},{"temperature":"19.4","dtg":"2016-07-28 11:16:00"},{"temperature":"19.4","dtg":"2016-07-28 11:15:00"},{"temperature":"19.4","dtg":"2016-07-28 11:14:00"},{"temperature":"19.3","dtg":"2016-07-28 11:13:00"},{"temperature":"19.3","dtg":"2016-07-28 11:12:00"},{"temperature":"19.3","dtg":"2016-07-28 11:11:00"},{"temperature":"19.3","dtg":"2016-07-28 11:10:00"},{"temperature":"19.3","dtg":"2016-07-28 11:09:00"},{"temperature":"19.3","dtg":"2016-07-28 11:08:00"},{"temperature":"19.3","dtg":"2016-07-28 11:07:00"},{"temperature":"19.3","dtg":"2016-07-28 11:06:00"},{"temperature":"19.3","dtg":"2016-07-28 11:05:00"},{"temperature":"19.3","dtg":"2016-07-28 11:04:00"},{"temperature":"19.2","dtg":"2016-07-28 11:03:00"},{"temperature":"19.2","dtg":"2016-07-28 11:02:00"},{"temperature":"19.2","dtg":"2016-07-28 11:01:00"},{"temperature":"19.2","dtg":"2016-07-28 11:00:00"},{"temperature":"19.2","dtg":"2016-07-28 10:59:00"},{"temperature":"19.2","dtg":"2016-07-28 10:58:00"},{"temperature":"19.2","dtg":"2016-07-28 10:57:00"},{"temperature":"19.2","dtg":"2016-07-28 10:56:00"},{"temperature":"19.1","dtg":"2016-07-28 10:55:00"},{"temperature":"19.1","dtg":"2016-07-28 10:54:00"},{"temperature":"19.1","dtg":"2016-07-28 10:53:00"},{"temperature":"19.1","dtg":"2016-07-28 10:52:00"},{"temperature":"19.1","dtg":"2016-07-28 10:51:00"},{"temperature":"19.1","dtg":"2016-07-28 10:50:00"},{"temperature":"19.1","dtg":"2016-07-28 10:49:00"},{"temperature":"19.1","dtg":"2016-07-28 10:48:00"},{"temperature":"19.1","dtg":"2016-07-28 10:47:00"},{"temperature":"19.1","dtg":"2016-07-28 10:46:00"},{"temperature":"19.1","dtg":"2016-07-28 10:45:00"},{"temperature":"19.0","dtg":"2016-07-28 10:44:00"},{"temperature":"19.0","dtg":"2016-07-28 10:43:00"},{"temperature":"19.0","dtg":"2016-07-28 10:42:00"},{"temperature":"19.0","dtg":"2016-07-28 10:41:00"}];

//plot
$(document).ready(function () {
    $.plot($("#placeholder"),  dataset1  );
});

在我的 php 页面中，一个 flot 图表网格显示在我的占位符中，但没有数据显示。

如果我使用以下格式将数据硬编码到变量 dataset1 中，则会出现图表：[[1, 300]，[2, 600]，[3, 550]，[4, 400]，[5, 300]];

我认为问题可能是由于我的 json 数据格式不正确，在 php 部分需要对其进行格式化以便于 flot 图表绘制。

非常抱歉，我是 flot 图表的新手，在发布此问题之前已尝试了 stackoverflow 中的许多类似解决方案，但没有成功。非常感谢您提供任何帮助！

- Huw

Answer 1

Flot希望您的数据集格式与您传递的格式不同。我通过循环遍历您当前的数据集（您的最后一个示例）来使其符合正确的格式。

var dataset1 = [{"temperature":"19.6","dtg":"2016-07-28 12:53:00"},{"temperature":"19.5","dtg":"2016-07-28 12:52:00"},{"temperature":"19.5","dtg":"2016-07-28 12:51:00"},{"temperature":"19.6","dtg":"2016-07-28 12:50:00"},{"temperature":"19.6","dtg":"2016-07-28 12:49:00"},{"temperature":"19.6","dtg":"2016-07-28 12:48:00"},{"temperature":"19.6","dtg":"2016-07-28 12:47:00"},{"temperature":"19.6","dtg":"2016-07-28 12:46:00"},{"temperature":"19.6","dtg":"2016-07-28 12:45:00"},{"temperature":"19.6","dtg":"2016-07-28 12:44:00"},{"temperature":"19.7","dtg":"2016-07-28 12:43:00"},{"temperature":"19.7","dtg":"2016-07-28 12:42:00"},{"temperature":"19.7","dtg":"2016-07-28 12:41:00"},{"temperature":"19.7","dtg":"2016-07-28 12:40:00"},{"temperature":"19.7","dtg":"2016-07-28 12:39:00"},{"temperature":"19.7","dtg":"2016-07-28 12:38:00"},{"temperature":"19.8","dtg":"2016-07-28 12:37:00"},{"temperature":"19.8","dtg":"2016-07-28 12:36:00"},{"temperature":"19.8","dtg":"2016-07-28 12:35:00"},{"temperature":"19.8","dtg":"2016-07-28 12:34:00"},{"temperature":"19.8","dtg":"2016-07-28 12:33:00"},{"temperature":"19.8","dtg":"2016-07-28 12:32:00"},{"temperature":"19.8","dtg":"2016-07-28 12:31:00"},{"temperature":"19.8","dtg":"2016-07-28 12:30:00"},{"temperature":"19.9","dtg":"2016-07-28 12:29:00"},{"temperature":"19.9","dtg":"2016-07-28 12:28:00"},{"temperature":"19.9","dtg":"2016-07-28 12:27:00"},{"temperature":"19.9","dtg":"2016-07-28 12:26:00"},{"temperature":"19.9","dtg":"2016-07-28 12:25:00"},{"temperature":"19.9","dtg":"2016-07-28 12:24:00"},{"temperature":"20.0","dtg":"2016-07-28 12:23:00"},{"temperature":"20.0","dtg":"2016-07-28 12:22:00"},{"temperature":"20.1","dtg":"2016-07-28 12:21:00"},{"temperature":"20.1","dtg":"2016-07-28 12:20:00"},{"temperature":"20.1","dtg":"2016-07-28 12:19:00"},{"temperature":"20.0","dtg":"2016-07-28 12:18:00"},{"temperature":"20.0","dtg":"2016-07-28 12:17:00"},{"temperature":"20.0","dtg":"2016-07-28 12:16:00"},{"temperature":"20.0","dtg":"2016-07-28 12:15:00"},{"temperature":"20.0","dtg":"2016-07-28 12:14:00"},{"temperature":"20.0","dtg":"2016-07-28 12:13:00"},{"temperature":"20.0","dtg":"2016-07-28 12:12:00"},{"temperature":"20.0","dtg":"2016-07-28 12:11:00"},{"temperature":"19.9","dtg":"2016-07-28 12:10:00"},{"temperature":"20.0","dtg":"2016-07-28 12:09:00"},{"temperature":"20.0","dtg":"2016-07-28 12:08:00"},{"temperature":"20.0","dtg":"2016-07-28 12:07:00"},{"temperature":"20.0","dtg":"2016-07-28 12:06:00"},{"temperature":"19.9","dtg":"2016-07-28 12:05:00"},{"temperature":"19.9","dtg":"2016-07-28 12:04:00"},{"temperature":"19.9","dtg":"2016-07-28 12:03:00"},{"temperature":"19.9","dtg":"2016-07-28 12:02:00"},{"temperature":"19.9","dtg":"2016-07-28 12:01:00"},{"temperature":"19.9","dtg":"2016-07-28 12:00:00"},{"temperature":"19.9","dtg":"2016-07-28 11:59:00"},{"temperature":"19.9","dtg":"2016-07-28 11:58:00"},{"temperature":"19.8","dtg":"2016-07-28 11:57:00"},{"temperature":"19.8","dtg":"2016-07-28 11:56:00"},{"temperature":"19.8","dtg":"2016-07-28 11:55:00"},{"temperature":"19.8","dtg":"2016-07-28 11:54:00"},{"temperature":"19.8","dtg":"2016-07-28 11:53:00"},{"temperature":"19.7","dtg":"2016-07-28 11:52:00"},{"temperature":"19.7","dtg":"2016-07-28 11:51:00"},{"temperature":"19.7","dtg":"2016-07-28 11:50:00"},{"temperature":"19.7","dtg":"2016-07-28 11:49:00"},{"temperature":"19.7","dtg":"2016-07-28 11:48:00"},{"temperature":"19.7","dtg":"2016-07-28 11:47:00"},{"temperature":"19.6","dtg":"2016-07-28 11:46:00"},{"temperature":"19.7","dtg":"2016-07-28 11:45:00"},{"temperature":"19.6","dtg":"2016-07-28 11:44:00"},{"temperature":"19.6","dtg":"2016-07-28 11:43:00"},{"temperature":"19.6","dtg":"2016-07-28 11:42:00"},{"temperature":"19.6","dtg":"2016-07-28 11:41:00"},{"temperature":"19.6","dtg":"2016-07-28 11:40:00"},{"temperature":"19.6","dtg":"2016-07-28 11:39:00"},{"temperature":"19.6","dtg":"2016-07-28 11:38:00"},{"temperature":"19.6","dtg":"2016-07-28 11:37:00"},{"temperature":"19.6","dtg":"2016-07-28 11:36:00"},{"temperature":"19.6","dtg":"2016-07-28 11:35:00"},{"temperature":"19.6","dtg":"2016-07-28 11:34:00"},{"temperature":"19.5","dtg":"2016-07-28 11:33:00"},{"temperature":"19.5","dtg":"2016-07-28 11:32:00"},{"temperature":"19.5","dtg":"2016-07-28 11:31:00"},{"temperature":"19.5","dtg":"2016-07-28 11:30:00"},{"temperature":"19.5","dtg":"2016-07-28 11:29:00"},{"temperature":"19.5","dtg":"2016-07-28 11:28:00"},{"temperature":"19.5","dtg":"2016-07-28 11:27:00"},{"temperature":"19.5","dtg":"2016-07-28 11:26:00"},{"temperature":"19.5","dtg":"2016-07-28 11:25:00"},{"temperature":"19.5","dtg":"2016-07-28 11:24:00"},{"temperature":"19.4","dtg":"2016-07-28 11:23:00"},{"temperature":"19.4","dtg":"2016-07-28 11:22:00"},{"temperature":"19.4","dtg":"2016-07-28 11:21:00"},{"temperature":"19.4","dtg":"2016-07-28 11:20:00"},{"temperature":"19.4","dtg":"2016-07-28 11:19:00"},{"temperature":"19.4","dtg":"2016-07-28 11:18:00"},{"temperature":"19.4","dtg":"2016-07-28 11:17:00"},{"temperature":"19.4","dtg":"2016-07-28 11:16:00"},{"temperature":"19.4","dtg":"2016-07-28 11:15:00"},{"temperature":"19.4","dtg":"2016-07-28 11:14:00"},{"temperature":"19.3","dtg":"2016-07-28 11:13:00"},{"temperature":"19.3","dtg":"2016-07-28 11:12:00"},{"temperature":"19.3","dtg":"2016-07-28 11:11:00"},{"temperature":"19.3","dtg":"2016-07-28 11:10:00"},{"temperature":"19.3","dtg":"2016-07-28 11:09:00"},{"temperature":"19.3","dtg":"2016-07-28 11:08:00"},{"temperature":"19.3","dtg":"2016-07-28 11:07:00"},{"temperature":"19.3","dtg":"2016-07-28 11:06:00"},{"temperature":"19.3","dtg":"2016-07-28 11:05:00"},{"temperature":"19.3","dtg":"2016-07-28 11:04:00"},{"temperature":"19.2","dtg":"2016-07-28 11:03:00"},{"temperature":"19.2","dtg":"2016-07-28 11:02:00"},{"temperature":"19.2","dtg":"2016-07-28 11:01:00"},{"temperature":"19.2","dtg":"2016-07-28 11:00:00"},{"temperature":"19.2","dtg":"2016-07-28 10:59:00"},{"temperature":"19.2","dtg":"2016-07-28 10:58:00"},{"temperature":"19.2","dtg":"2016-07-28 10:57:00"},{"temperature":"19.2","dtg":"2016-07-28 10:56:00"},{"temperature":"19.1","dtg":"2016-07-28 10:55:00"},{"temperature":"19.1","dtg":"2016-07-28 10:54:00"},{"temperature":"19.1","dtg":"2016-07-28 10:53:00"},{"temperature":"19.1","dtg":"2016-07-28 10:52:00"},{"temperature":"19.1","dtg":"2016-07-28 10:51:00"},{"temperature":"19.1","dtg":"2016-07-28 10:50:00"},{"temperature":"19.1","dtg":"2016-07-28 10:49:00"},{"temperature":"19.1","dtg":"2016-07-28 10:48:00"},{"temperature":"19.1","dtg":"2016-07-28 10:47:00"},{"temperature":"19.1","dtg":"2016-07-28 10:46:00"},{"temperature":"19.1","dtg":"2016-07-28 10:45:00"},{"temperature":"19.0","dtg":"2016-07-28 10:44:00"},{"temperature":"19.0","dtg":"2016-07-28 10:43:00"},{"temperature":"19.0","dtg":"2016-07-28 10:42:00"},{"temperature":"19.0","dtg":"2016-07-28 10:41:00"}];

var dataset2 = [];
for (var i = 0; i < dataset1.length; i++) {
    dataset2.push( [ Date.parse(dataset1[i].dtg), 
              parseFloat(dataset1[i].temperature) ] );
}
   
//plot
$(document).ready(function () {
    $.plot( $("#placeholder"),
            [dataset2], // wrap data series in a container
            { xaxis: { mode: "time" } }
    );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js"></script>
<div id="placeholder" style="width:600px; height:400px; float: left;"></div>

在var dataset2 = [];之后，循环解包数据集中的每个元素，并创建一个[date, temp]数据点添加到数组中。我必须解析日期和浮点数，因为Flot期望数字数据而不是字符串。

这样就创建了一个数据系列。您可以在Flot中绘制多个数据系列，因此请注意，我必须在调用plot时将该系列包装在另一个容器中。(换句话说，该容器可以具有[dataset2，dataset3，...，datasetX]。)

最后需要的步骤是在x轴上设置{ mode: "time" }。

- Bill the Lizard