Question

我一直在尝试从sql获取值并将其放到chart.js。

我所做的就是在显示正确的数据时获得正确的查询。

我在chart.js中使用条形图来显示每个月有多少人过生日。

SELECT COUNT( * ) FROM person WHERE MONTH( birthday ) = 02 //02 = February

我在网上看过一个解决方案，但不是条形图。不过，我试过了。

PHP代码：

include('config.php');

$months = array("january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december");
$monthvalues = array();
foreach ($months as $month) {
    $monthvalues[$month] = 0;
}

$result = mysqli_query($conn, "SELECT birthday, count(*) FROM person group by birthday;");
while ($row = mysqli_fetch_array($result, MYSQL_NUM)) {
    $monthvalues[$row[0]] = (int)$row[1];
}

print (json_encode($monthvalues));

JS代码：

$(document).ready(function () {
    new Chart($("#canvas_bar").get(0).getContext("2d")).Bar({
        labels: [<?=json_encode($months);?>],
        datasets: [{
            fillColor: "#03586A", //rgba(151,187,205,0.5)
            strokeColor: "#03586A", //rgba(151,187,205,0.8)
            highlightFill: "#066477", //rgba(151,187,205,0.75)
            highlightStroke: "#066477", //rgba(151,187,205,1)
            data: [<?=json_encode(array_values($monthvalues));?>]
        }]
    }, {
        tooltipFillColor: "rgba(51, 51, 51, 0.55)",
        responsive: true,
        barDatasetSpacing: 6,
        barValueSpacing: 5
    });
});

我的代码返回NaN。

我该怎么做呢？非常感谢你的帮助。

Answer 1

看起来问题的至少一部分是你将标签和数据数组嵌套在它们应该只是一个维度时。从json_encode来电中删除外部括号：

var barChartData = {
    labels: <?=json_encode($months);?>,
    datasets: [
            {
                fillColor: "#03586A", //rgba(151,187,205,0.5)
                strokeColor: "#03586A", //rgba(151,187,205,0.8)
                highlightFill: "#066477", //rgba(151,187,205,0.75)
                highlightStroke: "#066477", //rgba(151,187,205,1)
                data: <?=json_encode(array_values($monthvalues));?>
        }
    ]
};

我不确定您的MySQL表结构，但最好只获取月份名称和计数：

"SELECT LOWER(MONTHNAME(birthday)), count(*) FROM person GROUP BY LOWER(MONTHNAME(birthday))"

这将为您提供如下输出：

april   53
august  8
december    4
february    75
march   56
may 2
november    13
october 1
september   11

您可以更新PHP以获得更结构化的输出，例如：

$result = mysqli_query($conn, "SELECT birthday, count(*) FROM person group by birthday;");
$output = array();

while ($row = mysqli_fetch_assoc($result, MYSQL_NUM)) {
    array_push($output, $row);
}

print (json_encode($output));

这将输出[{ "january": 53 }, { "february": 23 }, ....etc]，然后您的javascript将更改为：

var barChartData = {
    labels: <?=json_encode(array_keys($output));?>,
    datasets: [
            {
                fillColor: "#03586A", //rgba(151,187,205,0.5)
                strokeColor: "#03586A", //rgba(151,187,205,0.8)
                highlightFill: "#066477", //rgba(151,187,205,0.75)
                highlightStroke: "#066477", //rgba(151,187,205,1)
                data: <?=json_encode(array_values($output));?>
        }
    ]
};

http://codepen.io/anon/pen/obmKer

获取sql值并输入chart.js

PHP代码：

JS代码：

1 个答案: