Question

下面是我的代码，我希望在xaxis和yaxis中显示数据库中的数据。

 <script src="../Chart.js"></script>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
    labels : <?=json_encode(array_values($count));?>,
    datasets : [

        {
            fillColor : "rgba(151,187,205,0.5)",
            strokeColor : "rgba(151,187,205,0.8)",
            highlightFill : "rgba(151,187,205,0.75)",
            highlightStroke : "rgba(151,187,205,1)",
            data :<?=json_encode(array_values($auditor));?>
        }
    ]

}
window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myBar = new Chart(ctx).Bar(barChartData, {
        responsive : true
    });
}

</script>

我的PHP代码是这样的：

<?php

        $link = mysql_connect('localhost', 'root', '')
                or die('Could not connect: ' . mysql_error());

        mysql_select_db('laravel') or die('Could not select database');

        $auditor = array();
        $sql = "SELECT DATE(created) AS date, COUNT(auditor_id) AS 'count' FROM auditor WHERE created BETWEEN '2015-09-01 00:00:00' AND '2015-09-31 23:59:59' GROUP BY date ORDER BY date";
        $result = mysql_query($sql) or die('Query failed: ' . mysql_error());
        if ($result) {
            while ($row = mysql_fetch_assoc($result)) {
                $date = $row["date"];
                $count = $row["count"];
                //add to data array
                $auditor[$date] = $count;
            }
        }

基本上我希望这些数据在分组后显示在X轴和Y轴

Answer 1

我分别制作了日期和计数数组。并在json中转换它。我用这个网址作为参考。 http://www.chartjs.org/docs/#bar-chart-example-usage

我没有在我的本地测试过这段代码。所以请先在您的系统中进行测试。我认为这会让你更有想法。

首先在你的PHP代码中更改它。

if ($result) {
        $dates = array();
        $counts = array();
        while ($row = mysql_fetch_assoc($result)) {
            $dates[]  = $row["date"];
            $counts[] = $row["count"];
        }
    }

现在在jquery代码中设置这些值。

var barChartData = {
labels : <?=json_encode($dates);?>,
datasets : [

    {
        fillColor : "rgba(151,187,205,0.5)",
        strokeColor : "rgba(151,187,205,0.8)",
        highlightFill : "rgba(151,187,205,0.75)",
        highlightStroke : "rgba(151,187,205,1)",
        data :<?=json_encode($counts);?>
    }
]

}

Answer 2

只需更改此行

<?=json_encode(array_values($count));?>

以

<强> <?=json_encode(array_keys($auditor));?>

如何用mysql数据填充Charts.js？

2 个答案: