带有json数据的flot图表为空答案

【问题标题】：flot chart with json data is empty带有json数据的flot图表为空
【发布时间】：2013-06-25 13:05:32
【问题描述】：

我需要用 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]]

但我的图表是空的

返回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}]

但我仍然得到空图表

【问题讨论】：

你的回声返回什么？ echo json_encode($dataset,JSON_NUMERIC_CHECK);
echo 在 firedebug 的结果选项卡中返回 json 编码的字符串，它显示如下[["ebbok1",39.55],["ebbok2",92.23],["ebbok3",102.44]]
啊，是的，抱歉，错过了那部分。我的 josn 带着 {} 大括号而不是 [] 回来了。尝试返回 {"result":[{0:"ebbok1",39.55}],[{1:"ebbok2",92.23}]}
我可以返回"result":[{"1":["ebbok1",39.55]},{"2":["ebbok2",92.23]},{"3":["ebbok3",102.44]}]}，但图表仍然是空的
这可能不是解决方案，因为 flot 需要一个数据集，它看起来像正在返回。我还在寻找。

标签： php jquery json charts flot

【解决方案1】：

您的$.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
        }
    }
  }
);

见小提琴here。

【讨论】：

感谢您提供示例，Mark... 我认为他们想要酒吧？你发帖的时候我已经在回答了，所以我刚刚完成了它......

【解决方案2】：

您误解了 flot 的预期数据集。

你有：

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

Flot 需要如下格式的数据：

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

另请参阅有关此主题的 documentation。

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

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.

【讨论】：

我正在通过 ajax 动态获取我的数据，我如何以您格式化的方式从 php 获取刻度和数据？
我的数据现在返回为[{"label":"ebook1","data":39.55},{"label":"ebook2","data":92.23},{"label":"ebook3","data":102.44}]，但我仍然得到一个空图表但带有标签。当我在 jsfiddle 中尝试时，我得到了一个图表，但在我的网站中，它只显示了空标签。这里的重点是我的数据不是全是数字，而是一个标签和一个数字
啊，我的示例只有在您的数据以类似于[["ebook1",39.55],["ebook2",92.23],...]的数组形式返回时才有效

【解决方案3】：

我遇到了同样的问题。但现在我想通了。问题是由您的数据引起的

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

看起来您想在 x 轴上显示的是“类别”类型。所以flot(v0.8.2)提供'categories'模式来呈现x轴显示你想要的类别。如下：

第 1 步：在 HTML 中添加分类模块

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

Step2：将以下内容添加到您的 js 中。

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

尝试并享受它:)

【讨论】：