Highcharts图表-ajax-获取json数据生成图表
?重點說明此代碼是針對一個報表顯示多個項對比顯示。?
??????? 直接貼代碼：web端????????????????
???? <script type="text/JavaScript" src="js/jQuery/jquery-1.7.2.js"></script>
???? ?<script type="text/javascript" src="js/highcharts/highcharts.js"></script>
??? ? <script type="text/javascript">????
?????????? $(document).ready(function() {
??????????????? ??? var options = {
????????????????????????? chart: {
?????????????????????????????????????? renderTo: 'Container',?//DIV容器ID
?????????????????????????????????????? type: 'column'//報表類型
???????????????????????????? ??????? },
????????????????????????????//報表名稱
??????????????????? ??????? title:{
???????????????????????????????????? text:'測試'
??????????????????????????? ??????? },??
????????????????????????????? / /補充說明
??????????????????????subtitle: {
?????????????????????????????????? ?? text: '報表說明'
???????????????????????????????????? },
??????????????????????????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();
?
圖片為效果圖：
總結
以上是生活随笔為你收集整理的Highcharts图表-ajax-获取json数据生成图表的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript-排序算法
- 下一篇： List接口常用实现类的特点和底层实现