將JSON數據輸出到Chart.js標簽和數據

Question

我使用特林輸出JSON數據圖表Chart.js ，查詢數據MySQL數據庫。

基本上我要查詢的是（data.php）：

<?php

header('Content-Type: application/json');

$con = //Database connection

// Check connection
if (mysqli_connect_errno($con))
{
    echo "Failed to connect to DataBase: " . mysqli_connect_error();
}
else
{
    $data_points = array();
    $result = mysqli_query($con, "SELECT * FROM condicao order by id desc limit 10");

    while($row = mysqli_fetch_array($result))
    {        
        $point = array($row['timestamp'], $row['temperatura']);
        array_push($data_points, $point);        
    }

    echo json_encode($data_points, JSON_NUMERIC_CHECK);

}

mysqli_close($con);

?>

這給了我以下數組（ timestamp ， temperature ）：

[
    ["2014-08-04 23:06:01",16.9],
    ["2014-08-04 23:03:02",17.1],
    ["2014-08-04 23:00:02",17.1],
    ["2014-08-04 22:57:01",17.1],
    ["2014-08-04 22:54:01",17.1],
    ["2014-08-04 22:51:02",17.1],
    ["2014-08-04 22:48:01",17.2],
    ["2014-08-04 22:45:02",17.2],
    ["2014-08-04 22:42:01",17.2],
    ["2014-08-04 22:39:02",17.2]
]

現在我試圖將其輸出到圖表，但我不知道如何將第一個對象作為標簽（時間戳），將第二個對象作為數據點（溫度）。

這是我正在嘗試輸出圖表的代碼：

<script type="text/javascript">
$(document).ready(function() {

    $.getJSON("data.php", function (result) {

        var tempData = {
            labels : result,
            datasets : [{
                fillColor : "rgba(172,194,132,0.4)",
                strokeColor : "#ACC26D",
                pointColor : "#fff",
                pointStrokeColor : "#9DB86D",
                data : result
            }]
        }

        var temp = document.getElementById('compradores').getContext('2d');
        new Chart(temp).Line(tempData);
    });
});
</script>

如何將結果標識為標簽的第一個對象（時間戳），將數組中的第二個對象標識為數據點（溫度）？

按照我上面的方式，我將時間戳和溫度都作為標簽。

我已經嘗試過result[0] ，嘗試為時間戳定義一個標簽並調用result['timestamp']等等，沒有運氣。

謝謝！

Answer 1

問題是你必須在單獨的集合中提供timeStamp / temperature，就像在與之關聯的標簽和數據集中一樣。

您可以將“結果”分別回復到兩個兩個數組中，例如：

     [["16.9", "17.1", "17.1", "17.1", "17.1", "17.1", "17.2", "17.2", "17.2", "17.2"],                                                                  
      ["2014-08-04 23:06:01", "2014-08-04 23:03:02", "2014-08-04 23:00:02", "2014-08-04 22:57:01", "2014-08-04 22:54:01", "2014-08-04 22:51:02", "2014-08-04 22:48:01", "2014-08-04 22:45:02", "2014-08-04 22:42:01", "2014-08-04 22:39:02"]];

然后你可以簡單地做，

    var tempData = {
        labels : result[0],
        datasets : [{
            fillColor : "rgba(172,194,132,0.4)",
            strokeColor : "#ACC26D",
            pointColor : "#fff",
            pointStrokeColor : "#9DB86D",
            data : result[1]
        }]
    };

或者你可以將它轉換成前端的兩個數組。

例如：

     <script type="text/javascript">
     $(document).ready(function() {

     $.getJSON("data.php", function (result) {

         var labels = [],data=[];
         for(var item in result){
              labels.push(result[item].slice(0,1).toString());
              data.push(result[item].slice(1,2).toString());
          }

    var tempData = {
        labels : labels,
        datasets : [{
            fillColor : "rgba(172,194,132,0.4)",
            strokeColor : "#ACC26D",
            pointColor : "#fff",
            pointStrokeColor : "#9DB86D",
            data : data
        }]
    };

    var temp = document.getElementById('compradores').getContext('2d');
    var lineChart = new Chart(temp).Line(tempData);

     });
 });
 </script>