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_encodeof$v_rp_ass_kat然后执行 a

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

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

我做错了什么？

Answer 1

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

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

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

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

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