ハイチャートをphpとMySqlで使用しているときに私のタイトルだけが表示されます

私はhighchartsを初めて使っています。私はタイトルを表示することができますが、何らかの理由でx軸とy軸のデータが表示されません。私はPHPでデータベースからデータを取得していますが、JSONでエンコードしています。ここに私のHTMLは次のとおりです。ここでハイチャートをphpと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>

は、PHPから私のJSONデータである：

[{ "名"： "プロバイダ"、 "データ"：[ "& T AT"、 "Sprint"、 "T-Mobile"、 "Verizon"]}、{"名前"： "平均"、 "データ"：[972.03790849673,679.63696969697,992.06606060606,4520.2101851852]]

ありがとうございました！

出典

2016-04-14 alex12555

サーバー側がなくても動作しますか？ –

あなたのコメントは、ajaxコールバックでチャートを初期化する必要があります。 –

データがロードされていないため、グラフにはタイトルのみが表示されます。あなたのAJAX呼び出しが機能しているかもしれませんが、コールバックのオプションを設定するのは遅すぎます。の後にコールバックが呼び出される可能性が最も高いのはです。

getJSONコールバックで//chart = new Highcharts.Chart(options);行のコメントを外して（もちろん、他のHighchartsコンストラクタを2行下に移動して削除すると）、それはうまく機能しますか？

しかし、データをロードするための慣用的な方法は、チャートのload -Eventのコールバックを作成し、AJAX-Requestを起動して、作成済みのチャートにデータを挿入することです。私はあなたのためにJSFiddleを作成しました。timeoutを介してphpスクリプトへの呼び出しをシミュレートします。

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

出典

2016-04-14 08:02:18

いいえ、getJSONコールバックを持っているときはいつでも空白になりますが、このテクニックを試してみます – alex12555

すべてが今すぐ動作します。そんなにありがとう！あなたは私のチームメイトと私をどのくらい助けてくれたのか分かりません。私はこの問題を何日間も抱えてきました。 – alex12555

ハイチャートをphpとMySqlで使用しているときに私のタイトルだけが表示されます

答えて

関連する問題