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

标签: MySQL PHP JavaScript
发布时间: 2017/1/9 22:15:46
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

下面是我的代码,和想在 xaxis 和 y 轴来显示我来自数据库的数据。

 <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 轴

解决方法 1:

我取得了日期,分别计数数组。并将其转换为 json 格式。 我已将此 url 用于参考。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);?>
    }
]

}
赞助商