具有数据库数据的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的情况，而不是$v_rp_ass_kat的json_encode ，然后执行了

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);
    }
});

}）;

我希望你能得到