highchart動態獲取json數據，更新圖標顯示

這個有點亂，是在開發中，一點點加的，也有部分網上查的資料，請耐心閱讀。可以實現從jsp中獲得json數據動態更新圖表，還可以導出，導出的圖片中文亂碼問題會在下一篇中介紹。tangyj

目前可以解決通過ajax請求別的頁面的值，傳遞過來多個值，但是問題在于

1.不能同意把傳過來的data賦值給series

chart.addSeries(data)失效

2.不能設置多條線的chart.series[0].setName('123') ;失效

只能 chart.series[0].setData(a[0].data);

3.不能動態的傳參過去，把值傳過來，如何解決這幾個問題（該問題已經解決見下面的jsp）

主頁面需要導入

<scripttype="text/javascript"src="../common/tang/highcharts.js"></script>

請求頁面需要導入

<%@pageimport="org.json.simple.*"%>

若需要導出圖片，需要加入

exporting.js文件

并在lib中加入以上jar包

修改highchart的值的一些例子：

動態修改組件

http://www.stepday.com/topic/?292

http://www.stepday.com/search/?API

http://www.baidu.com/s?tn=baiduhome_pg&ie=utf-8&bs=highchart+doc&f=8&rsv_bp=1&rsv_spt=1&wd=highcharts%E5%B8%AE%E5%8A%A9%E6%96%87%E6%A1%A3&rsv_sug3=7&rsv_sug=1&rsv_sug1=7&rsv_sug4=80&inputT=5552

http://api.highcharts.com/highcharts

主頁面

<scripttype="text/javascript">

varchart;

$(function(){

vardate=['1月','2月','3月','4月', '5月','6月','7月','8月','9月', '10月','11月','12月'];

functiongetForm(){

//聲明報表對象

chart =newHighcharts.Chart({

chart: {

//將報表對象渲染到層上

// type:'column',

renderTo:'container'//,

//backgroundColor: {

//linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },

//stops: [

// [0, 'rgb(96, 96, 96)'],

// [1, 'rgb(16, 16, 16)']

// ]

// }

},

title:{

text:'機構考核結果統計'

},

xAxis : {

title:'月份',

categories : date

},

yAxis : {

title : {

text :'人數(個)'

},

plotLines : [ {

value : 0,

width : 1,

color :'#808080'

} ]

},

tooltip : {

formatter :function() {

return'<b>'+this.series.name

+'</b><br/>'+this.x +': '

+this.y +'人';

}

},

legend: {

itemStyle: {

font:'9pt Trebuchet MS, Verdana, sans-serif',

color:'#3E576F'

},

itemHoverStyle: {

color:'black'

},

itemHiddenStyle: {

color:'silver'

}

},

//設定報表對象的初始數據

series: [{

name:'在職人數',

data: []

},

{

name:'入職人數',

data: []

},

{

name:'離職人數',

data: []

},

]

});

//使用JQuery從后臺獲取JSON格式的數據

$.get('tang.jsp?date='+newDate(),null,function(data) {

//var data=[222, 344, 543];

//var data='['+eval(data)+']';

alert(data+"12319");

var a=eval(data);

alert(a[0].data);

//chart.series[0].setName('123') ; //為圖表設置值

chart.series[0].setData(a[0].data);//動態設置數據

chart.series[1].setData(a[1].data);//動態設置數據

chart.series[2].setData(a[2].data);//動態設置數據

// chart.addSeries(a); //給series整體賦值，目前存在問題，不能實現

// for(var i=0;i<3;i++)

// {

// alert(i);

// var s1="[";

// var s2="]";

// var s=s1+a[i].data+s2;

// alert(s);

// chart.series[i].setName("123") ;

// chart.series[i].setData(s) ;

// }

// chart.xAxis[0].setCategories(a); //動態設置橫坐標的值

});

ni();

}

functionni()

{

vara=[1,2,3];

alert("123");

//chart.series[0].setData(a);

alert("ee");

}

$(document).ready(function() {

alert(2);

//每隔3秒自動調用方法，實現圖表的實時更新

window.setInterval(getForm);

alert("kaishi");

});

});

//]]>

</script>

請求頁面

<%@pageimport="java.io.PrintWriter"%>

<%@pageimport="java.util.ArrayList"%>

<%@pageimport="java.util.List"%>

<%@pageimport="java.util.*"%>

<%@pageimport="javax.servlet.http.HttpServletResponse"%>

<%@pageimport="java.io.IOException"%>

<%@pageimport=" javax.servlet.ServletException"%>

<%@pageimport="javax.servlet.http.HttpServlet"%>

<%@pageimport="javax.servlet.http.HttpServletRequest"%>

<%@pageimport="org.json.simple.*"%>

<%

JSONArray JArray =newJSONArray();

StringBuilder sBuilder =newStringBuilder();

StringBuilder sBuilder1 =newStringBuilder();

StringBuilder sBuilder2 =newStringBuilder();

StringBuilder sBuilder3 =newStringBuilder();

//String sql="select branchtype,wageorder from laindexvscomm where wageorder=10 and ccolname='LongSerBonus' and indexcode='C00038' and areatype='08'";

String sqlpeople="select count(agentcode) 人數,substr(employdate,6,2) 日期 from laagent where agentstate<>0 group by substr(employdate,6,2)";

String sqlin="select count(agentcode) 人數,substr(employdate,6,2) 日期 from laagent where sex='1' group by substr(employdate,6,2)";

String sqlout="select count(agentcode) 人數,substr(outworkdate,6,2) 日期 from laagent where substr(outworkdate,6,2)is not null group by substr(outworkdate,6,2)";

ExeSQL tExeSql=newExeSQL();

×××S s×××Speople=new×××S();

×××S s×××Sin=new×××S();

×××S s×××Sout=new×××S();

s×××Speople =tExeSql.execSQL(sqlpeople);

s×××Sin =tExeSql.execSQL(sqlin);

s×××Sout=tExeSql.execSQL(sqlout);

sBuilder1.append("[");

for(inti=1; i<= s×××Speople.MaxRow; i++){// for(int i=0; i<= 0; i++){

String a = s×××Speople.GetText(i,1);

sBuilder1.append(a);

if(i<s×××Speople.MaxRow)

{

sBuilder1.append(",");

}

}

sBuilder1.append("]");

sBuilder2.append("[");

for(inti=1; i<= s×××Sin.MaxRow; i++){// for(int i=0; i<= 0; i++){

String a = s×××Sin.GetText(i,1);

sBuilder2.append(a);

if(i<s×××Sin.MaxRow)

{

sBuilder2.append(",");

}

}

sBuilder2.append("]");

sBuilder3.append("[");

for(inti=1; i<= s×××Sout.MaxRow; i++){// for(int i=0; i<= 0; i++){

String a = s×××Sout.GetText(i,1);

sBuilder3.append(a);

if(i<s×××Sout.MaxRow)

{

sBuilder3.append(",");

}

}

sBuilder3.append("]");

String ss1="[23,23,33,34,46,66]";

String ss="[ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']";

sBuilder.append(sBuilder1).append(sBuilder2).append(sBuilder3);

System.out.println(sBuilder1+"1--------"+sBuilder2+"2-------"+sBuilder3+"3-------"+sBuilder);

JSONObject JSONObj1 =newJSONObject();

JSONObj1.put("name","在職人數");

JSONObj1.put("data", sBuilder1);

JArray.add(JSONObj1);

JSONObject JSONObj2 =newJSONObject();

JSONObj2.put("name","離職人數");

JSONObj2.put("data", sBuilder2);

JArray.add(JSONObj2);

JSONObject JSONObj3 =newJSONObject();

JSONObj3.put("name","入職人數");

JSONObj3.put("data", sBuilder3);

JArray.add(JSONObj3);

System.out.println(JArray.toString());

//out.write(JArray.toString().replace("\"{", "{").replace("}\"", "}"));

System.out.println(JArray.toString());

//response.getWriter().write(sBuilder.toString());

//response.getWriter().write(JArray.toString());

//response.getWriter().print(ss);

response.getWriter().print(JArray.toJSONString());

//out.flush();

//response.getWriter().write(ss1);

//out.write(ss1);

//out1.print(jsonArray2);

%>

解決動態傳參問題，可以點擊查詢出發getForm函數，然后傳參，form可以寫到別的js中去

<scripttype="text/javascript">

varchart;

$(function(){

alert(1);

vardate=['1月','2月','3月','4月', '5月','6月','7月','8月','9月', '10月','11月','12月'];

//聲明報表對象

chart =newHighcharts.Chart({

chart: {

//將報表對象渲染到層上

// type:'column',

renderTo:'container'//,

//backgroundColor: {

//linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },

//stops: [

// [0, 'rgb(96, 96, 96)'],

// [1, 'rgb(16, 16, 16)']

// ]

// }

},

title:{

text:'機構考核結果統計'

},

xAxis : {

title:'月份',

categories : date

},

yAxis : {

title : {

text :'人數(個)'

},

plotLines : [ {

value : 0,

width : 1,

color :'#808080'

} ]

},

tooltip : {

formatter :function() {

return'<b>'+this.series.name

+'</b><br/>'+this.x +': '

+this.y +'人';

}

},

legend: {

itemStyle: {

font:'9pt Trebuchet MS, Verdana, sans-serif',

color:'#3E576F'

},

itemHoverStyle: {

color:'black'

},

itemHiddenStyle: {

color:'silver'

}

},

//設定報表對象的初始數據

series: [{

name:'在職人數',

data: []

},

{

name:'入職人數',

data: []

},

{

name:'離職人數',

data: []

},

]

});

//使用JQuery從后臺獲取JSON格式的數據

//$.get('tang.jsp?date='+new Date(), null, function(data) {

//var data=[222, 344, 543];

//var data='['+eval(data)+']';

//alert(data+"12319");

// var a=eval(data);

// alert(a[0].data);

//chart.series[0].setName('123') ; //為圖表設置值

// chart.series[0].setData(a[0].data); //動態設置數據

// chart.series[1].setData(a[1].data); //動態設置數據

// chart.series[2].setData(a[2].data); //動態設置數據

// chart.addSeries(a); //給series整體賦值，目前存在問題，不能實現

// for(var i=0;i<3;i++)

// {

// alert(i);

// var s1="[";

// var s2="]";

// var s=s1+a[i].data+s2;

// alert(s);

// chart.series[i].setName("123") ;

// chart.series[i].setData(s) ;

// }

// chart.xAxis[0].setCategories(a); //動態設置橫坐標的值

//});

});

functiongetForm(){

//var data = ["['Firefox',45.0]","[{name: 'Chrome',y: 26.8,sliced: true,selected: true}]","['IE',12.8]","['Safari',8.5]","['Opera',6.2]","['Others',0.7]"];

//var data = "[{'Firefox',45.0},{'Chrome',26.8},{'IE',12.8},{'Safari',8.5},{'Opera',6.2},{'Others',0.7}]";

// var data = [['Firefox2',45.0],{name: 'Chrome',y: 26.8,sliced: true,selected: true},['IE',12.8],['Safari',8.5],['Opera',6.2],['Others',0.7]];

// var data= [{"name":"在職人數","data":[2654,2519,5413,6422,4987,5210,4238,4586,4665,3228,3906,5587]},{"name":"離職人數","data":[1441,1418,3016,3826,2893,2990,2425,2513,2665,1940,2211,3211]},{"name":"入職人數","data":[2460,2159,3564,3037,2767,3321,3127,3141,3135,2547,3245,4364]}];

// alert(data);

// var a=eval(data);

//使用JQuery從后臺獲取JSON格式的數據

$.get('tang.jsp?date='+newDate(),null,function(data) { alert("---");

//var data=[222, 344, 543];

//var data='['+eval(data)+']';

// alert(data+"1231449");

var a=eval(data);

// alert(a[0].data);

//chart.series[0].setName('123') ; //為圖表設置值

chart.series[0].setData(a[0].data);//動態設置數據

chart.series[1].setData(a[1].data);//動態設置數據

chart.series[2].setData(a[2].data);//動態設置數據

// chart.series[0].setData(a);

//}

chart.redraw();

});

}

$(document).ready(function() {

alert(2);

//每隔3秒自動調用方法，實現圖表的實時更新

//window.setInterval(getForm);

getForm();

alert("kaishi");

});

//]]>

</script>

以下是網上的動態ajax請求

<script type="text/javascript">

var chart;

$(function(){

$.ajax({

type: 'POST',

dataType: 'JSON',

url: '${pageContext.request.contextPath}/analyseResultAction!getPlusCharts.action',

success : function(result){

//此處構建曲線

$('#container').highcharts({

chart:{

defaultSeriesType: 'spline',//圖表的顯示類型（line,spline,scatter,splinearea bar,pie,area,column）

marginRight: 125,//上下左右空隙

marginBottom: 25 //上下左右空隙

},

title:{

text: '插件分析視圖',//主標題

x: -20 //center

},

xAxis: { //橫坐標

<SPAN >categories: result.listXdata //動態解析</SPAN>

},

yAxis: {

title: {

text: '' //縱坐標

},

plotLines: [{ //標線屬性

value: 0,

width: 1,

color: 'red'

}]

},

tooltip: { //數據點的提示框

formatter: function() { //formatter格式化函數

return '<b>'+ this.series.name +'</b><br/>'+

this.x +': '+ this.y;

}

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -10,

y: 100,

borderWidth: 0

},

<SPAN >series:result.</SPAN><SPAN >listYdata</SPAN><SPAN > //動態解析</SPAN>

});

}

});

});

</script>

很好的例子

http://wenku.baidu.com/view/f39593c76137ee06eff9189e.html

含有導出功能

exporting: { filename: "chart", type: "p_w_picpath/png", url: 'http://localhost:8888/dcweb/pp.do', width: 800 },

<scripttype="text/javascript">

varchart;

$(function(){

vardate=['1月','2月','3月','4月', '5月','6月','7月','8月','9月', '10月','11月','12月'];

//聲明報表對象

chart =newHighcharts.Chart({

chart: {

renderTo:'container'

},

title:{

text:'年度人力統計'

},

xAxis : {

title:{text:'月份'} ,

categories : date

},

yAxis : {

title : {

text :'人數(個)'

},

plotLines : [ {

value : 0,

width : 1,

color :'#808080'

} ]

},

tooltip : {

formatter :function() {

return'<b>'+this.series.name

+'</b><br/>'+this.x +': '

+this.y +'人';

}

},

legend: {

itemStyle: {

font:'9pt Trebuchet MS, Verdana, sans-serif',

color:'#3E576F'

},

itemHoverStyle: {

color:'black'

},

itemHiddenStyle: {

color:'silver'

}

},

//增加導出功能

exporting: {

enabled:true,

filename:'chart',

width:800,

type:'p_w_picpath/png'

},

//去掉highcharts.com的標志

credits:{

text:'中科軟科技',

href:' '

},

//設定報表對象的初始數據

series: [{

name:'在職人數',

data: []

},

{

name:'入職人數',

data: []

},

{

name:'離職人數',

data: []

},

]

});

});

functiongetForm(){

vartime= $("#time").val();

varmanagecom=$("#ManageCom").val();

varbranchattr=$("#BranchAttr").val();

//使用JQuery從后臺獲取JSON格式的數據

$.get('tang.jsp?date='+newDate()+'&time='+time+'&managecom='+managecom+'&branchattr='+branchattr,null,function(data) {

var a=eval(data);

//為圖表設置值

chart.series[0].setData(a[0].data);//動態設置數據

chart.series[1].setData(a[1].data);//動態設置數據

chart.series[2].setData(a[2].data);//動態設置數據

//測試tangyj826

chart.xAxis[0].addPlotBand({

from: 0.8,

to: 7.5,

color:'#FCFFC5',

id:'XX公司'

});

chart.xAxis[0].addPlotLine({

value: 3.5,

color:'green',

width: 2,

id:'plot-line-1'

});

//chart.setTitle('eee');

//獲取圖表的臨界數據

varextremes = chart.yAxis[0].getExtremes();

//縱坐標最大最小值

varmax = extremes.max;

varmin = extremes.min;

//series內數據的最大最小值

vardataMax = extremes.dataMax;

vardataMin = extremes.dataMin;

// alert("max:"+max+"min:"+min+"datam:"+dataMax+"dataM:"+dataMin);

// chart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'],true);

//設置x軸的臨界值

// chart.xAxis[0].setExtremes(0, 5,true,true);

//設置y軸的臨界值

// chart.yAxis[0].setExtremes(0, 300,true,true);

alert(chart.series.length);

if(chart.series.length == 3) {

chart.addSeries({

name:'ceshi',

data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4]

});

}

chart.exportChart({

type:'application/pdf',

filename:'fff'

});

chart.exportChart( { exportFormat :'jpg'} );

chart.redraw();

});

}

$(document).ready(function() {

//每隔3秒自動調用方法，實現圖表的實時更新

//window.setInterval(getForm);

getForm();

});

functiondownload7(){

getForm();

varw = window.open("","_self");

w.location.href="../download/niandurenli.xlsx";

/// var file1="../download/niandurenli.xlsx";

//window.location.href(file1);

}

functiontuxing(){

getForm();

alert("繪制完成");

}

</script>