Highcharts ajax擷取json對象動態產生報表產生 ._

Highcharts ajax擷取json對象動態產生報表產生 .__js

最後更新：2018-07-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

http://blog.csdn.net/wsk7860/article/details/8751061

最近做個項目，專案經理想做一個統計報表，在網上查看些資料就選用Highchars 這裡和大家分享下使用心得。

重點說明此代碼是針對一個報表顯示多個項對比顯示。

直接貼代碼：web端

                                     },
                          yAxis: {
                                       min: 0,
                                       title: {
                                               text: '單位(mm)'
                                               }
                                        },
                                //x軸顯示內容
                              xAxis: {
                                    categories: [ ]
                                         },
                                / /資料來源(多個對比的)
                                 series: [{},{},{},{}]
                                };
                               //json url 地址這裡我使用的servlet
                                var url = "http://127.0.0.1:8080/servlet/JsonServlet";
                                $.getJSON(url,function(data) {
                                       var i,len=data.length;
                                        for( i=0;i<len;i++){

                                          //賦值 series
                                         options.series[i].data = data[i].list;
                                          options.series[i].name = data[i].name;

                                           //對報表X軸顯示名稱賦值
                                           options.xAxis.categories[i]=data[i].year;
                                      }
                                  var chart = new Highcharts.Chart(options);
                             });
                      });

</script>
<body>
<div id="container"></div>
</body>

後台servlet doget() 方法內容：

    response.setCharacterEncoding("UTF-8");
    response.setContentType("text/html");
    JSONArray members = new JSONArray();
    PrintWriter out= response.getWriter();
    try {
     for(int i=1;i<5;i++){

//構建JSON 對象
JSONObject member = new JSONObject();

     //構建series所需參數
      member.put("name", "張飛"+i); //對應series.name
      JSONArray list = new JSONArray();//對應series.data
      for(int k=1;k<5;k++){
       list.put(k*100);
      }
      member.put("year", (2012 + i));//對應Y軸顯示
      member.put("list", list);
      member.put("color", "#FF0022");//如需要可以設定柱狀圖顏色
      members.put(member);
     }

   out.write(members.toString());

  } catch (JSONException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
  }

  out.flush();
  out.close();

圖片為效果圖：

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More