4

AmChartを使用して、phpからグラフのデータを取得したいと思います。

これが私のphpファイルです： 

$colors = Array("#FF0F00","#FF6600","#FF9E01","#FCD202","#F8FF01","#B0DE09","#04D215","#0D8ECF","#0D52D1","#2A0CD0","#8A0CCF","#CD0D74","#754DEB","#DDDDDD","#999999","#333333","#000000");

$datas = $bdd->query("SELECT count(*) as count, rest.name as name
                   FROM command com, zone z, dinningroom dr, restaurant rest
                   WHERE com.zone = z.number
                       AND z.dinningroom = dr.number
                       AND dr.restaurant = rest.number
                   GROUP BY rest.number;");

$i=0;
while($data = $datas->fetch())
{   
    $dataList[$i]=array("name"=>$data['name'],"count"=>$data['count'],"color"=>$colors[$i]);
    $i++;
}
echo json_encode($dataList);
?>

$datasには適切なデータがあります。SQL要求は適切であり、必要なものを返します。

これが私のAjaxリクエストを含む私のJavaScriptです：

$.ajax({
              url: 'statComPerMenu.php',
              failure: function (data) {
                  alert('fail: ' + data);
              },
              success: function(data) {
                    var statComPerMenuChart;

                    // SERIAL CHART
                    statComPerMenuChart = new AmCharts.AmSerialChart();
                    statComPerMenuChart.dataProvider = data;

                    statComPerMenuChart.categoryField = "name";
                    // the following two lines makes chart 3D
                    statComPerMenuChart.depth3D = 20;
                    statComPerMenuChart.angle = 30;

                    // AXES
                    // category
                    var categoryAxis = statComPerMenuChart.categoryAxis;
                    categoryAxis.labelRotation = 90;
                    categoryAxis.dashLength = 5;
                    categoryAxis.gridPosition = "start";

                    // value
                    var valueAxis = new AmCharts.ValueAxis;
                    valueAxis.dashLength = 5;
                    statComPerMenuChart.addValueAxis(valueAxis);

                    // GRAPH            
                    var graph = new AmCharts.AmGraph();
                    graph.valueField = "count";
                    graph.colorField = "color";
                    graph.balloonText = "[[name]]: [[count]]";
                    graph.type = "column";
                    graph.lineAlpha = 0;
                    graph.fillAlphas = 1;
                    statComPerMenuChart.addGraph(graph);

                    // WRITE
                    statComPerMenuChart.write("chartdiv");

           } //Success
           });
       };

チャートは表示されません。

しかし、var'data'を次のように変更すると：data = [{name： "toto"、count：10、color： "＃FF0F00"}、{name： "toto"、count：10、color： "＃FF0F00 "}]; Ajaxクエリから成功すると、これは正しく機能します！チャートを取得します...

したがって、問題が残るのは、phpファイルから取得した形式です...返す正しい形式が見つかりません。

編集：私がする場合：

success: function(data) {
    $("#omg").html(data);
    [...]
    chart.dataProvider = data;
    [...]
}

これはページに印刷されます：[{"name"： "Brussels"、 "count"： "4"、 "color"： "＃FF0F00"}、{"name"： "Chimay"、 "count"： "2" 、"color"： "＃FF6600"}]そして空のチャートを表示します。

印刷したテーブルをデータとしてコピーして貼り付ける場合：

success: function(data) {
    $("#omg").html(data);
    [...]
    chart.dataProvider =  [{"name":"Brussels","count":"4","color":"#FF0F00"},{"name":"Chimay","count":"2","color":"#FF6600"}];
    [...]
}

チャートはよく表示されます。

4

1 に答える 1

0

これを行うことで解決しました：

$.getJSON("statComPerMenu.php",  // le fichier qui recevra la requête
          null,  // les paramètres
          function(data){  // la fonction qui traitera l'objet reçu
          [...]
          chart.dataProvider = data;
          [...]
});

$ .getJSON（フランス語）の詳細については、こちらを確認してください：http ://www.hooba.ca/blog/2008/echange-dobjets-json-entre-php-et-javascript-facile-grace-a-jquery/

于 2012-06-17T12:16:47.037 に答える