highchart动态获取json数据，更新图标显示
这个有点乱，是在开发中，一点点加的，也有部分网上查的资料，请耐心阅读。可以实现从jsp中获得json数据动态更新图表，还可以导出，导出的图片中文乱码问题会在下一篇中介绍。tangyj
利通网站制作公司哪家好，找创新互联！从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联。
目前可以解决通过ajax请求别的页面的值，传递过来多个值，但是问题在于
1.不能同意把传过来的data赋值给series
chart.addSeries(data)失效
2.不能设置多条线的chart.series[0].setName('123') ;失效
只能 chart.series[0].setData(a[0].data);
3.不能动态的传参过去，把值传过来，如何解决这几个问题（该问题已经解决见下面的jsp）
主页面需要导入
请求页面需要导入
<%@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
主页面
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''+this.series.name
+'
'+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");
});
});
//]]>
请求页面
<%@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 { 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 { 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 { 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中去 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''+this.series.name +' +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"); }); //]]> 以下是网上的动态ajax请求 很好的例子 http://wenku.baidu.com/view/f39593c76137ee06eff9189e.html 含有导出功能 exporting: { filename: "chart", type: "p_w_picpath/png", url: 'http://localhost:8888/dcweb/pp.do', width: 800 }, 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''+this.series.name +' +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("绘制完成"); }
'+this.x +': '
'+this.x +': '
网页题目：highchart动态获取json数据，更新图标显示
文章链接：http://scyanting.com/article/gjpooc.html
