Highcharts图表-ajax-获取json数据生成图表
?重點(diǎn)說(shuō)明此代碼是針對(duì)一個(gè)報(bào)表顯示多個(gè)項(xiàng)對(duì)比顯示。?
??????? 直接貼代碼：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'//報(bào)表類(lèi)型
???????????????????????????? ??????? },
????????????????????????????//報(bào)表名稱
??????????????????? ??????? title:{
???????????????????????????????????? text:'測(cè)試'
??????????????????????????? ??????? },??
????????????????????????????? / /補(bǔ)充說(shuō)明
??????????????????????subtitle: {
?????????????????????????????????? ?? text: '報(bào)表說(shuō)明'
???????????????????????????????????? },
??????????????????????????yAxis: {
?????????????????????????????????????? min: 0,
???????????????????????????????????????title: {
?????????? ??????????????????????????????????? text: '單位(mm)'
???????????????????????????????????????????? ??}
??????????????????????????????????????? },
????????????????????????????????//x軸顯示內(nèi)容
?????????????????????? ?????? xAxis: {
??????????????????? ??????????????? categories: [?]
???????????????????????????????????????? ?},
??????????????????????????????? / /數(shù)據(jù)來(lái)源(多個(gè)對(duì)比的)????????
?????????????????????????????????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;
?????????????????????????????????????? ??? //對(duì)報(bào)表X軸顯示名稱賦值
?????????????????????????????????????????? options.xAxis.categories[i]=data[i].year;
????????????????????????????????????? }????
????????????????????????????????? ?var chart = new Highcharts.Chart(options);
???????????????????????? ??? });
????????????????????? });??
? </script>
? <body>
??? <div id="container"></div>?????
? </body>
?
后臺(tái)servlet doget() 方法內(nèi)容：
??? response.setCharacterEncoding("UTF-8");
??? response.setContentType("text/html");??
??? JSONArray members = new JSONArray();
??? PrintWriter out= response.getWriter();
??? try {
???? for(int i=1;i<5;i++){
?? //構(gòu)建JSON?對(duì)象
????? JSONObject member = new JSONObject();
?????//構(gòu)建series所需參數(shù)
????? member.put("name", "張飛"+i);?//對(duì)應(yīng)series.name
????? JSONArray list = new JSONArray();//對(duì)應(yīng)series.data
????? for(int k=1;k<5;k++){
?????? list.put(k*100);
????? }
????? member.put("year", (2012 + i));//對(duì)應(yīng)Y軸顯示
????? member.put("list", list);
????? member.put("color", "#FF0022");//如需要可以設(shè)置柱狀圖顏色
????? members.put(member);
???? }
???
???out.write(members.toString());
???
??} catch (JSONException e) {
???// TODO Auto-generated catch block
???e.printStackTrace();
??}
??????
??out.flush();
??out.close();
?
圖片為效果圖：
總結(jié)
以上是生活随笔為你收集整理的Highcharts图表-ajax-获取json数据生成图表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： javascript-排序算法
- 下一篇： List接口常用实现类的特点和底层实现