Balkendiagramm, chart.js PHP wird nicht geladen

Ich habe ein Balkendiagramm, das ich mit chart.js erstellen möchte, das ein PHP-Array und lädt über Ajax. Ich bin in der Lage, die Daten mit Ajax (in der Konsole überprüft) zu laden, aber ich kann die Daten in der Grafik nicht bekommen - hier sind die Daten in der Konsole:Balkendiagramm, chart.js PHP wird nicht geladen

ich keine Fehlermeldungen nicht so empfangen haben Ich bin verwirrt an diesem Punkt. Hier ist der gesamte Code:

HTML

<?php 
include 'connect.php'; 
?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

</head> 

<body> 

</canvas><canvas id="myChart"></canvas> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="javascript/charts.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 

</body>

$(document).ready(function(){ 
 
\t $.ajax({ 
 
\t \t url: "prod_agg.php", 
 
\t \t method: "GET", 
 
\t \t success: function(data) { 
 
\t \t \t console.log(data); 
 
\t \t \t var date = []; 
 
      var output = []; 
 

 
\t \t \t for(var i in data) { 
 
\t \t \t \t date.push(data[i].date); 
 
\t \t \t \t output.push(data[i].output); 
 
\t \t \t } 
 

 
\t \t \t var chartdata = { 
 
\t \t \t \t labels: date, 
 
\t \t \t \t datasets : [ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t label: 'Date', 
 
\t \t \t \t \t \t backgroundColor: 'rgba(200, 200, 200, 0.75)', 
 
\t \t \t \t \t \t borderColor: 'rgba(200, 200, 200, 0.75)', 
 
\t \t \t \t \t \t hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
 
\t \t \t \t \t \t hoverBorderColor: 'rgba(200, 200, 200, 1)', 
 
\t \t \t \t \t \t data: output 
 
\t \t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t }; 
 

 
\t \t \t var ctx = $("#myChart"); 
 

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

ich ein leeres Diagramm erhalten:

Jede Hilfe zu diesem Thema würde sehr geschätzt werden!

Quelle

2017-06-19 pol_guy

wissen Sie, in welchem Format, oder genau das, was die Konsole Daten aussehen soll > ' – unixmiah

Das Foto der Konsolenausgabe ist das richtige Format, soweit ich das beurteilen kann. Ich vermute, dass das Problem auf den Versuch zurückzuführen ist, die Werte in die Arrays "date" und "output" zu schieben. –

Der Grund, warum es nicht funktioniert, ist, weil Sie die Antwortdaten als JSON-Zeichenfolge nicht als JSON-Objekt erhalten.

Also, um es mit ChartJS funktioniert, müssen Sie es zunächst analysieren, JSON.parse() Methode ...

$(document).ready(function() { 
    $.ajax({ 
     url: "prod_agg.php", 
     method: "GET", 
     success: function(data) { 
     console.log(data); 

     var data = JSON.parse(data); //parse JSON string 

     var date = []; 
     var output = []; 
     ...

Quelle

2017-06-19 20:42:40

Du hast es !!! Ich danke dir sehr! –

Balkendiagramm, chart.js PHP wird nicht geladen

Antwort

Verwandte Themen