0

このようにjqueryを介してデータを取得するjsonエンコードされたデータとしてphpスクリプトによって返されたデータを使用して、グラフをflotにプロットする必要があります

$("button").click(function(){
    var dp1 = $('#dp1').val();
    var dp2 = $('#dp2').val();
    $.ajax({
        type: "GET",
        url: "chart.php",
        datatype:"json",
        success: onSuccess,
        data: {d1:dp1, d2:dp1}
        });

    function onSuccess(series) {

        var plotarea = $("#pieChart");  
        plotarea.css("height", "300px");  
        plotarea.css("width", "400px");  
        $.plot( plotarea , [
        {
            data: series,
            bars: {
                show: true
            }
        }
        ] );  
    }
});

データの戻り値は json でエンコードされているので、firebug で見ることができます

[["ebbok1",39.55],["ebbok2",92.23],["ebbok3",102.44]]

しかし、私のチャートは空です

empty_flot_chart

jsonデータを返すphpファイルは

$dataset = array();
while($row = $result->fetch_array(MYSQLI_ASSOC)) {
  //echo $row['amount'] . "\t" . $row['product_name']. "\n";
  $dataset[] = array( $row['product_name'], $row['amount'] );
}
echo json_encode($dataset,JSON_NUMERIC_CHECK);

私は何を間違っていますか？

編集

PHPスクリプトを修正したところ、次のようなデータが返されるようになりました

[{"label":"ebook1","data":39.55},{"label":"ebook2","data":92.23},{"label":"ebook3","data":102.44}]

しかし、私はまだ空のチャートを取得します

4

3 に答える 3

2

あなたの$.plot呼び出しは正しくないようです。オプションとデータを混在させています。

var series = [
    {"label":"ebbok1","data":12},
    {"label":"ebook1","data":27.55},
    {"label":"ebook2","data":92.33},
    {"label":"ebook3","data":102.44}
];

$.plot( $("#somePlot") , series,
  {
    series: {
        pie: {
            show: true
        }
    }
  }
);

ここでフィドルを参照してください。

于 2013-06-25T15:34:03.580 に答える
0

私はあなたと同じ問題に遭遇します。しかし今、私はそれを理解しています。問題はあなたのデータが原因です

[["ebbok1",39.55],["ebbok2",92.23],["ebbok3",102.44]]

x軸に表示したいのは「カテゴリ」タイプのようです。そのため、 flot(v0.8.2)は「カテゴリ」モードを提供して、カテゴリとして必要なものを x 軸に表示します。次のように：

ステップ 1: カテゴリ モジュールを HTML に追加する

<script type="text/javascript" src="flot/jquery.flot.categories.js"></script>

Step2: 以下を js に追加します。

   var options={ 
      xaxis:{mode: "categories"}
   };

試して楽しんでください:)

于 2013-12-26T07:31:32.943 に答える