0

我需要用 php 脚本返回的数据作为 json 编码数据在 flot 中绘制图表我像这样通过 jquery 获取数据

$("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 回答
2

您误解了 flot 是如何预期一组数据的。

你有：

series = [["label",1],["label2",2],... ];

Flot 期望数据格式如下：

series = [[[x1,y1],[x2,y2],...]];// where xN and yN are all NUMBERS

另请参阅有关此主题的文档。

因此，假设您真的想查看您指定的标签，一种处理方法是使用ticksxaxis 的属性。所以你会返回两组数据：

data = [[[0,1],[1,1],...]];
tickLabels = [[0,"label1"],[1,"label2"],...];

然后在你的浮动选项中指定这个：

   $.plot( plotarea , data, {
      series: {
         bars: {
            show:true;
         }
      },
      xaxis: {
         ticks:tickLabels
      }
   } );

示例：http: //jsfiddle.net/ryleyb/8gGEz/1/

编辑：如果您想继续以相同的方式返回您的系列数据，您可以在 javascript 中进行操作：

var tickLabels = [];
for (var i =0;i<series.length;i++){
    tickLabels.push([i,series[i][0]);
    series[i][0] = i;
}
var data = [series];

//now you can call flot as I described above.
于 2013-06-25T15:42:53.403 回答
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>

第2步：将以下内容添加到您的js中。

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

尝试并享受它:)

于 2013-12-26T07:31:32.943 回答