如何在jQuery中获取一个flot饼图的数据?

时间:2022-01-10 09:33:21

I am trying to retrieve data for a flot pie chart and want to make sure I am doing it correctly. Any feedback would be appreciated. I will also post my JSON data being returned to verify it has the proper syntax.

我正在为flot饼图检索数据,并希望确保我做得正确。如有任何反馈,我们将不胜感激。我还将发布返回的JSON数据,以验证它具有正确的语法。

   <script src="js/flot/jquery-1.11.2.min.js"></script>
   <script src="js/flot/jquery.flot.js"></script>
   <script src="js/flot/jquery.flot.pie.js"></script>
   <style type="text/css">
   #placeholder { width: 450px; height: 450px; }
   </style>    
  <script type="text/javascript">
       $.ajax({
        url:'../cgi-bin/bpo_piechart.cgi',
        contentType: "application/json; charset=utf-8",
        type: "POST",
        dataType: 'json',
        success: function (data) {
            //alert("should be shown");
            $.plot($("#placeholder"), data, {
                series: {
                    pie: {
                        show: true
                    }
                },
                legend: {
                    labelBoxBorderColor: "none"
                }
            });
        },
        failure: function (response) {
            alert(response.d);
        }

    });
 </script>

And my JSON data being churned out appears like the following: Can someone tell me if this is a problem? I think it's correct, but I might have to parse the quotes inside of the jQuery javascript block later.

生成的JSON数据如下所示:有人能告诉我这是否是个问题吗?我认为它是正确的,但是我可能需要在后面解析jQuery javascript块中的引用。

[
   {
      "acctlocv":"CHE3",
      "percval":"3774"
   },
   {
      "acctlocv":"CMI-  CRL2",
      "percval":"5"
   },
   {
      "acctlocv":"CMI1",
      "percval":"4106"
   },
   {
      "acctlocv":"CMI2",
      "percval":"10259"
   },
   {
      "acctlocv":"CUST",
      "percval":"75"
   },
   {
      "acctlocv":"HELOCR",
      "percval":"6"
   },
   {
      "acctlocv":"Network",
      "percval":"8675"
   }
]

1 个解决方案

#1


1  

Yep, it's your JSON. You need "label" and "data" instead of "acctlocv" and "percval".

是的,这是你的JSON。你需要“标签”和“数据”而不是“acctlocv”和“percval”。

         [
               {
                  "label":"CHE3",
                  "data":3774
               },
               {
                  "label":"CMI-  CRL2",
                  "data":5
               },
               {
                  "label":"CMI1",
                  "data":4106
               },
               {
                  "label":"CMI2",
                  "data":10259
               },
               {
                  "label":"CUST",
                  "data":75
               },
               {
                  "label":"HELOCR",
                  "data":6
               },
               {
                  "label":"Network",
                  "data":8675
               }
            ]

http://jsfiddle.net/xyktLseo/1/

http://jsfiddle.net/xyktLseo/1/

Edit - Raidri's comment is correct, 'data' can be strings and flot will convert. http://jsfiddle.net/xyktLseo/2/

编辑——Raidri的评论是正确的,“数据”可以是字符串,flot可以转换。http://jsfiddle.net/xyktLseo/2/

#1


1  

Yep, it's your JSON. You need "label" and "data" instead of "acctlocv" and "percval".

是的,这是你的JSON。你需要“标签”和“数据”而不是“acctlocv”和“percval”。

         [
               {
                  "label":"CHE3",
                  "data":3774
               },
               {
                  "label":"CMI-  CRL2",
                  "data":5
               },
               {
                  "label":"CMI1",
                  "data":4106
               },
               {
                  "label":"CMI2",
                  "data":10259
               },
               {
                  "label":"CUST",
                  "data":75
               },
               {
                  "label":"HELOCR",
                  "data":6
               },
               {
                  "label":"Network",
                  "data":8675
               }
            ]

http://jsfiddle.net/xyktLseo/1/

http://jsfiddle.net/xyktLseo/1/

Edit - Raidri's comment is correct, 'data' can be strings and flot will convert. http://jsfiddle.net/xyktLseo/2/

编辑——Raidri的评论是正确的,“数据”可以是字符串,flot可以转换。http://jsfiddle.net/xyktLseo/2/