highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .
最近做個項目，項目經理想做一個統計報表，在網上查看些資料就選用Highchars 這里和大家分享下使用心得。
重點說明此代碼是針對一個報表顯示多個項對比顯示。
直接貼代碼：web端
$(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
//賦值 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);
});
});
后臺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 axja 獲取json對象動態生成報表生成
最近做個項目,項目經理想做一個統計報表,在網上查看些資料就選用Highchars 這里和大家分享下使用心得. 重點說明此代碼是針對一個報表顯示多個項對比顯示. 直接貼代碼:web端
ajax獲取json對象
ajax獲取json對象 ajax獲取json數據,都是一個原理,設置response 的Content-Type:application/json,這樣瀏覽器自動會解析為json對象 $result ...
Spring mvc 下Ajax獲取JSON對象問題 406錯誤
我在學習springmvc過程中(我的項目是配置的后綴是.html),從controller返回對象. 如果我不使用 mvc-annotation-driver,而是手動配置,AnnotationMe ...
Spring mvc下Ajax獲取JSON對象問題 406錯誤
spring 通過@ResponseBody標簽返回JSON數據的方法都報406錯:?Failed to load resource: the server responded with a stat ...
JS-利用ajax獲取json數據，并傳入頁面生成動態tab
封裝好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[創建] if(window.XMLHttpRequest){ var oAjax = new ...
ajax獲取json數據為undefined--原因解析
解決辦法:var dataObj=eval("("+data+")");//轉換為json對象 問題: 1. 碰到一個問題ajax成功獲取json數據后,取值顯 ...
通過Jquery中Ajax獲取json文件數據
1. JSON(JavaScript Object Notation): javaScript對象表示法: 是存儲和交換文本信息的語法,比xml更小,更快,更易解析. 2. JSON基本書寫格式 : ...
angular js根據json文件動態生成路由狀態
項目上有一個新需求,就是需要根據json文件動態生成路由狀態,查閱了一下資料,現在總結一下發出來: 首先項目用到的是angular的UI-路由,所以必須引入angular.js和angular-ui- ...
Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本語法，綁定,each循環，ajax獲取json數據
jquery.tmpl.js 是一個模板js? ,主要有2個方法 (1):$.template()方法,將一段script或者是Html編譯為模板,例如 $.template('myTemplate' ...
隨機推薦
Liferay 6.2 改造系列之四：重新整理Application添加頁面默認提供的Portlet清單
經過2.3兩步后,剩余Portlet已經不多,添加Application頁面如下: 將用不到的Portlet隱藏起來:11 ??Portal目錄 (Portal Directory) 將內嵌Protl ...
萬萬沒想到，3D打印居然可以做這些逆天設計
3D打印一直被冠以“高科技”頭銜,似乎離我們的日常生活還很遙遠.其實不然,隨著技術的創新,3D打印技術逐漸深入各個領域,工業生產.商業.醫學.建筑.藝術等領域都能看到3D打印技術的影子.它將會改變我們 ...
C#獲取指定日期為一年中的第幾周
/// /// 獲取指定日期,在為一年中為第幾周 /// /// 指 ...
玩玩hibernate
這幾天師兄,讓我玩玩hibernate,然后通過這個玩意寫爬蟲(spider).這一說不打緊,嗯,一個星期沒有了,全都是由于配置環境,心很塞,整個星期的空閑時間都用來做重復的工作.在學習之前,我先查找 ...
HDU 5226 Tom and matrix(組合數學+Lucas定理)
題目鏈接:http://acm.hdu.edu.cn/showproblem.php?pid=5226 題意:給一個矩陣a,a[i][j] = C(i,j)(i>=j) or 0(i < ...
javaweb之監聽器詳解
在servlet中定義了多種類型的監聽器,他們用于監聽事件源分別是servletContext,httpsession,servletrequest 這三個域對象. servlet中監聽器主要有三類: ...
git clone 帶用戶名密碼的形式但包含@等特殊符號無法正常解析
正常使用git clone 的方式 git clone https://remote 使用帶用戶名密碼的方式(可以避免后續每次都要輸入用戶名密碼) git clone https://[usernam ...
Windows下C++刪除清除map
清除單map(非嵌套map) #include #include #include using namespace s ...
MVC初識
一.MVC MVC模式(Model-View-Controller)將應用程序的實現分離的實現分離為三道不同的層: 模型層(Model): 視圖層(View): 控制層(Controller): 二. ...
[轉] 在圖標庫中，找到合適的圖標 ico
作者:xlrocket鏈接:https://www.zhihu.com/question/19857245/answer/241696797 在圖標庫中,找到合適的圖標 或許,一些小伙伴會有收集圖標的 ...
總結
以上是生活随笔為你收集整理的highcharts ajax 数据格式,Highcharts ajax获取json对象动态生成报表生成 .的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： qt自定义窗口添加父窗口后，显示不出来
- 下一篇： qt5.13.2输出中文乱码