Nur mein Titel zeigt, wenn Highcharts mit PHP und MySql

Ich bin neu in Highcharts. Ich kann den Titel anzeigen lassen, aber aus irgendeinem Grund werden die X- und Y-Achsen-Daten nicht angezeigt. Ich bekomme meine Daten aus einer Datenbank mit PHP, zusammen mit der Codierung mit JSON. Hier ist mein HTML:Nur mein Titel zeigt, wenn Highcharts mit PHP und MySql

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 

      var options = { 
       chart: { 
        renderTo: 'container', 
        type: 'bar' 
       }, 
       title: { 
        text: 'TCP Upload Speed Averages for Los Angeles County in 2012', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: '', 
        x: -20 
       }, 
       xAxis: { 
        categories: [] 
       }, 
       yAxis: { 
        min:0, 
        title: { 
         text: 'TCP Upload Averages' 
        }, 
        labels: { 
        overflow: 'justify' 
       } 
       }, 
       legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -10, 
       y: 100, 
       borderWidth: 0 
      }, 

       plotOptions: { 
       bar: { 
        dataLabels: { 
         enabled: true 
        } 
       }, 
       series: { 

        stacking:'percent' 
       } 

      }, 
       series: [] 
      }; 
      $.getJSON("2012Data.php", function(json) { 



       options.xAxis.categories = json[0]['data'];//xAxis: {categories: []} 

       options.series[0] = json[1]; 



       //chart = new Highcharts.Chart(options); 
      }); 
      chart = new Highcharts.Chart(options); 
     }); 

    </script> 
    <script src="highstock.js" ></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 

</head> 
<body> 
    <div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div> 
</body>

hier meine JSON-Daten aus dem PHP ist:

[{ "name": "Provider", "Daten": [ "AT & T", "Sprint", "T-Mobile", "Verizon"]}, {"name": "Durchschnitte", "Daten": [972.03790849673,679.63696969697992.06606060606,4520.2101851852]}]

Danke für die Hilfe!

Quelle

2016-04-14 alex12555

Funktioniert es ohne die Serverseite? –

Ihr Diagramm sollte im Ajax Callback initialisiert werden, wie Sie es kommentiert haben. –

Ihr Diagramm zeigt nur den Titel an, da keine Daten geladen sind. Und obwohl Ihr AJAX-Anruf funktioniert: Die Einstellung der Optionen in seinem Callback ist zu spät, da der Callback höchstwahrscheinlich nur aufgerufen wird nach das Diagramm wurde erstellt.

Funktioniert es für Sie, wenn Sie die Zeile //chart = new Highcharts.Chart(options); im Callback getJSON auskommentieren (und natürlich entfernen Sie den anderen Highcharts Konstruktor Aufruf zwei Zeilen nach unten)?

Die idiomatische Methode zum Laden von Daten besteht jedoch darin, einen Rückruf für das load -Event des Diagramms zu erstellen, Ihre AJAX-Anforderung auszulösen und dann die Daten in das bereits erstellte Diagramm einzufügen. Ich habe eine JSFiddle für Sie erstellt, wo ich den Aufruf zu Ihrem PHP-Skript über eine timeout simulieren. Sie sollten Ihr Diagramm mit folgendem load-callback arbeiten lassen:

chart: { 
    events: { 
    load: function(event) { 
     var chart = event.target; 

     $.getJSON("2012Data.php", function(json) { 
     var xAxis = chart.xAxis[0]; 
     xAxis.setCategories(json[0]['data']); 
     chart.addSeries(json[1]); 
     }); 
    } 
    } 
}

Quelle

2016-04-14 08:02:18

Nein, es erscheint nur leer wenn ich es im getJSON Callback habe, aber ich werde diese Technik ausprobieren – alex12555

Alles funktioniert jetzt. Vielen herzlichen Dank! Du weißt nicht, wie sehr du meinen Teamkameraden und mir geholfen hast. Ich habe tagelang an diesem Problem festgemacht. – alex12555

Nur mein Titel zeigt, wenn Highcharts mit PHP und MySql

Antwort

Verwandte Themen