使用 mysql 数据库使用 Canvas.js 的 PHP 和 Html 图表

Question

我正在尝试从 mysql 数据库中获取数据并使用 canvas.js 方式绘制折线图.....我只想知道如何将从数据库中获取的值传递到 dataPoints：x 和 y 值....i;e..X 将包含时间，Y 包含温度。我正在尝试在此处绘制时间与温度的关系图..

我已使用此代码从我的 php 数据库中收到这两个数据值。

$sql1 = "SELECT Time FROM sdata ORDER BY ID DESC LIMIT 10;";
$response1 = mysqli_query($connect, $sql1) or die(mysqli_error($connect));
while($row1 = mysqli_fetch_all($response1)){
    $r1[]= $row1;
}

$sql2 = "SELECT Temperature FROM sdata ORDER BY ID DESC LIMIT 10;";
$response2 = mysqli_query($connect, $sql2) or die(mysqli_error($connect));
while($row2 = mysqli_fetch_all($response2)){
    $r2[]= $row2;
}

在这里，当我给出 echo 并查看 r1 和 r2 值时，我能够看到数据库值....

--这些是我数据库中的 DateTime 值：

[[["8/30/2016 9:37"],["8/30/2016 9:33"],["8/30/2016 9:32"],["8/30/ 2016 年 9 点 32 分]，[“2016 年 8 月 30 日 9 点 32 分”]，[“2016 年 8 月 30 日 9 点 32 分”]，[“2016 年 8 月 30 日 9 点 32 分”]，[“8/ 30/2016 9:31"],["8/30/2016 9:31"],["8/30/2016 9:31"]]]

--这些是我数据库中的温度值：

[[[25],[25],[28.91],[28.82],[28.84],[28.91],[29.05],[29.05],[28.92],[29.11]]]

现在我想将这些变量传递给 dataPoints：x 和 y，如下面的代码所示：

<script type="text/javascript">
window.onload = function() {

    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Line Chart"
        },
        axisX: {

            interval: 5,
            title: "Time",
            valueFormatString: "hh:mm TT",

        },
        axisY: {

            interval: 20,
            title: "Temp"

        },
        data: [{
            type: "line",
            dataPoints: ???????????(HOW DO I PASS THE r1 and r2 values here for x and y respectively so that it give me a line chart is my question)

        }]
    });
    chart.render();

}
</script>

请帮帮我....

Answer 1

您可以从this page 下载 CanvasJS 示例，其中包括使用 mySQL 数据库中的数据呈现图表。

Answer 2

您需要以 CanvasJS 接受的格式解析数据。检查下面的代码

$r1=[[["8/30/2016 9:37"],["8/30/2016 9:33"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:32"],["8/30/2016 9:31"],["8/30/2016 9:31"],["8/30/2016 9:31"]]];

$r2=[[[25],[25],[28.91],[28.82],[28.84],[28.91],[29.05],[29.05],[28.92],[29.11]]];
$dataPoints=array();
for($i=0;$i<count($r1[0]);$i++){
    array_push($dataPoints,array('x'=> strtotime($r1[0][$i][0])*1000,'y'=>$r2[0][$i][0]));
}

var chart = new CanvasJS.Chart("chartContainer", {
.
.
dataPoints: <?php echo json_encode($dataPoints); ?> // edited
.
.
});