javascript - 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 属性，而它需要一个字符串数组。 (你的 fiddle 也有同样的错误)

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

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

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

工作 fiddle - https://jsfiddle.net/bf4v9272/5/