Chart.js 与数据库中的数据

Question

自从 2 小时以来，我正在尝试一件简单的事情：使用 Chart.js 显示数据库中的数据。我已经检查了 4 个教程，查看了 3 个 SO-Threads，但没有任何东西能按预期工作。不知道是小问题还是什么问题...

所以我正在尝试以下内容：

stats.php:

<script>
function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
</script>

<script>
$(document).ready(function(){
    $.ajax({
        url: "stats_api.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var chart = new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: data,
      datasets: [{
        label: "Anzahl Asservate",
        backgroundColor: [getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor(),getRandomColor()],
        data: [1,2,3,4,5,6,7,8,9,10],
      }]
    },
    options: {
      title: {
        display: true,
        text: 'Kategorien-Verteilung der Asservate'
      }
    }
});
}
});
});
</script>

stats_api.php:

<?php

require 'databaseConnection.php';

$datumStart = "2010-12-19 08:38:32";
$datumEnde = "2019-12-19 08:38:32";

$v_rp_ass_kat = $database->query("
select s.* from (select @DatumStart:='$datumStart',@DatumEnde:='$datumEnde') parm , v_rp_ass_kat s;")->fetchAll();

$labels = [];

foreach($v_rp_ass_kat as $element){
    array_push($labels, $element[2]);
}

echo json_encode($labels);

json_encode 正在返回：

["Mobiltelefon","Smartphone","SIM-Karte","Tablet","Navigationsger\u00e4t","USB-Stick","Speicherkarte","PC","Notebook","Festplatte"]

这样，我收到了data.labels.map is not a function 的错误消息。

我也尝试过不使用 php 中的 foreach，而是使用 json_encode 或 $v_rp_ass_kat，然后执行

labels = [];
for(var i in data){
    labels.push(data[i].kategorie);
}

但这以某种方式将数组拆分为单个字母，因此我得到了 100 个标签，而不是 10 个标签，每个标签都有一个单词，每个标签对应 json 数组的每个字母...

我做错了什么？

Answer 1

我认为，您将收到作为字符串的响应并将其传递给labels 属性，而它需要一个字符串数组。 （你的小提琴也有同样的错误）

要将响应字符串转换为数组，您可以使用JSON.parse()

...
data: {
      labels: JSON.parse(data),
      ...

此外，您应该使用 chart.js 版本 2.x，因为您正在使用它的语法。

工作小提琴 - https://jsfiddle.net/bf4v9272/5/

Answer 2

https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-bar-graph-using-data-from-mysql-table-and-php

$(document).ready(function(){
$.ajax({
    url: "http://localhost/chartjs/data.php",
    method: "GET",
    success: function(data) {
        console.log(data);
        var player = [];
        var score = [];

        for(var i in data) {
            player.push("Player " + data[i].playerid);
            score.push(data[i].score);
        }

        var chartdata = {
            labels: player,
            datasets : [
                {
                    label: 'Player Score',
                    backgroundColor: 'rgba(200, 200, 200, 0.75)',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: score
                }
            ]
        };

        var ctx = $("#mycanvas");

        var barGraph = new Chart(ctx, {
            type: 'bar',
            data: chartdata
        });
    },
    error: function(data) {
        console.log(data);
    }
});

});

希望你能得到