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>