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。

我也尝试过没有foreach的php，而是json_encode $v_rp_ass_kat然后再做

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/

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

}）;

我希望你能得到

包含数据库

2 个答案: