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();
SSRS sSSRSpeople=newSSRS();
SSRS sSSRSin=newSSRS();
SSRS sSSRSout=newSSRS();
sSSRSpeople =tExeSql.execSQL(sqlpeople);
sSSRSin =tExeSql.execSQL(sqlin);
sSSRSout=tExeSql.execSQL(sqlout);

sBuilder1.append("[");

for(inti=1; i<= sSSRSpeople.MaxRow; i++){// for(int i=0; i<= 0; i++){
String a = sSSRSpeople.GetText(i,1);
sBuilder1.append(a);
if(i<sSSRSpeople.MaxRow)
{
sBuilder1.append(",");
}
}
sBuilder1.append("]");

sBuilder2.append("[");
for(inti=1; i<= sSSRSin.MaxRow; i++){// for(int i=0; i<= 0; i++){
String a = sSSRSin.GetText(i,1);
sBuilder2.append(a);
if(i<sSSRSin.MaxRow)
{
sBuilder2.append(",");
}
}
sBuilder2.append("]");

sBuilder3.append("[");
for(inti=1; i<= sSSRSout.MaxRow; i++){// for(int i=0; i<= 0; i++){
String a = sSSRSout.GetText(i,1);
sBuilder3.append(a);
if(i<sSSRSout.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 style="COLOR: #ff0000">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 style="COLOR: #ff0000">series:result.</SPAN><SPAN style="LINE-HEIGHT: 1.5; FONT-FAMILY: Helvetica, Tahoma, Arial, sans-serif; COLOR: #ff0000">listYdata</SPAN><SPAN style="LINE-HEIGHT: 1.5; FONT-FAMILY: Helvetica, Tahoma, Arial, sans-serif; COLOR: #ff0000"> //动态解析</SPAN>
});
}
});
});
</script>
很好的例子 http://wenku.baidu.com/view/f39593c76137ee06eff9189e.html 含有导出功能
exporting: { filename: "chart", type: "image/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:'image/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>