highcharts插件使用总结和开发中遇到的问题及解决办法.docx
- 文档编号:3549550
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:22
- 大小:128.83KB
highcharts插件使用总结和开发中遇到的问题及解决办法.docx
《highcharts插件使用总结和开发中遇到的问题及解决办法.docx》由会员分享,可在线阅读,更多相关《highcharts插件使用总结和开发中遇到的问题及解决办法.docx(22页珍藏版)》请在冰豆网上搜索。
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
这里使用的highchart是2014-01-09从官网下载的版本,版本号是3.0.8,
当过了几天后,发现版本号变成了3.0.9,不由得的感叹highchart的版本更新之快。
在jsp中使用highchart的步骤:
第一步:
引入highchart必需的js文件
--jquery的js要在引入highchart插件的js之前引入-->
--实现highchart核心功能的js-->
--
导出和打印相关的js,因为这里修改过的exporting.js包含中文,使用
charset="UTF-8"进行指定
-->
ViewCode
开发过程遇到的问题:
1) Js的引入顺序错了,导致highchart的图表出不来,
Highchart插件中用到了jquery,当时jquery-1.8.3.js的引入顺序放到了highchart插件js的下面,
导致当加载highchart插件用到的js时,找不到jquery的js,报出某个js的函数不合法
因此jquery的js要在引入highchart的js之前引入
2) exporting.js打印下载的js中,提示的都是英文,
要显示中文,这里采用的方法是修改exporting.js
p(s.lang,{printChart:
"打印报表",downloadPNG:
"下载为PNG格式图片",downloadJPEG:
"下载为JPEG格式图片",
downloadPDF:
"下载为PDF格式文档",downloadSVG:
"下载为SVG格式矢量图片",contextButtonTitle:
"打印下载"});
修改后的效果:
当修改了exporting.js后,当保存时,没法保存js,提示编码问题
解决方法是:
window>>preferences>>general>>content types
在右边的窗口中打开列表,选中"JavaScript",在下面的"default encoding"右边的输入框中输入"utf-8",再点"update"按钮
单击打印下载时,显示的下拉框在大部分的ie浏览器中显示的很难看,火狐下正常
原因:
上面的下拉框显示很长,是由于hr标签的原因,导致hr的宽度按照100%进行了显示
解决方法:
在显示highchart图标的jsp页面中,添加hr的样式
hr{height:
0;margin:
0;padding:
0;width:
0;}
第二步:
组装添加显示highchart图表所用的数据
显示highchart图标的js代码
$(function(){
//填充数据使用,使用jquery来获取隐藏域的值
varxAxisTimeInfo=$("#xAxisTime").val();
vartotalRecordInfo=$("#totalRecord").val();
vartotalRecordHYInfo=$("#totalRecordHY").val();
vartotalRecordLJInfo=$("#totalRecordLJ").val();
$('#container').highcharts({
chart:
{
type:
'spline'
},
title:
{
text:
'每月订单数量统计'
},
subtitle:
{
text:
''
},
exporting:
{
filename:
"订单统计",//下载显示的文件名称
sourceWidth:
1000,//下载图片的宽度
sourceHeight:
550,//下载图片的高度
//指定下载图片的url,这里使用的本地的java代码,没有使用官网的代码(那//样会受到highchart官网的网络限制,这里的java代码是结合的struts1来//实现的,在java代码解决了导出图片中中文乱码的问题以及下载文件名乱码//的问题,详见java代码中说明)url:
'<%=basePath%>shop/newOrder/orderPre/exportImage.do'//这里是一个重点哦,也可以修改exporting.js中对应的url
},
/**
*去掉图标的右下角HightC的图标
*/
credits:
{
enabled:
false,//设置false就不会显示右下角的官网链接
//右下角连接的显示位置
position:
{align:
'right',x:
-8,verticalAlign:
'bottom',y:
-390},
//右下角链接的地址href:
'<%=basePath%>shop/newOrder/orderPre/orderSearch4HighCharts.do?
type=1',
text:
'区域图表',//右下角连接的名字
style:
{cursor:
'pointer',color:
'#909090',fontSize:
'20px'}
},
xAxis:
{
categories:
eval(xAxisTimeInfo)
},
yAxis:
{
min:
0,
title:
{
text:
'单位(个)'
}
},
//鼠标旁边的提示框的样式
//1.point.y:
.0f提示框中显示的y轴单位的小数点位数
//2.style="width:
160px;height:
50px"提示框的宽高
//3.point.key坐标的x轴的值
tooltip:
{
headerFormat:
' 20px;">{point.key} 160px;height: 50px">', pointFormat: ' {series.color};padding: 0">{series.name}: '+ ' 0">{point.y: .0f} footerFormat: '', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, //图例的显示名称和数据 //这里使用了eval函数处理一下,使用jquery获取到的隐藏域的值 //否则不会显示 series: [{ name: '裸机数量', data: eval(totalRecordLJInfo) },{ name: '订单总量', data: eval(totalRecordInfo) },{ name: '合约机数量', data: eval(totalRecordHYInfo) }] }); }); ViewCode 基本的highchart显示的数据格式是: X轴数据信息 图例和显示数据的格式: 因此我们要做的就是根据需求,在java后台组装好上面的数据,填充到highchart的js代码中即可 导出的Java后台代码 (使用的是struts1)没有在struts的配置文件中配置,直接是在jsp中url请求 struts1版的结合highchart导出图片的java代码 使用highchart调用本地的java类导出图片时,用到的jar包 batik-all-1.6.jar fop.jar xerces-2.9.0.jar /** *配合highchart插件导出图片 *@parammapping *@paramform *@paramrequest *@paramresponse *@return *@throwsException */ publicActionForwardexportImage(ActionMappingmapping,ActionFormform, ServletRequestrequest,ServletResponseresponse) throwsException{ log.info("图片导出................"); request.setCharacterEncoding("gb2312");//设置编码,解决乱码问题 Stringtype=request.getParameter("type"); Stringsvg=request.getParameter("svg"); response.setCharacterEncoding("gb2312");//设置编码,解决乱码问题 Stringfilename=request.getParameter("filename"); filename=filename==null? "chart": filename; ServletOutputStreamout=response.getOutputStream(); log.info("type: "+type+"filename: "+filename); if(null! =type&&null! =svg){ svg=svg.replaceAll(": rect","rect"); Stringext=""; Transcodert=null; if(type.equals("image/png")){ ext="png"; t=newPNGTranscoder(); }elseif(type.equals("image/jpeg")){ ext="jpg"; t=newJPEGTranscoder(); }elseif(type.equals("application/pdf")){ ext="pdf"; t=(Transcoder)newPDFTranscoder(); }elseif(type.equals("image/svg+xml")) ext="svg"; //解决下载文件的文件名的乱码 response.addHeader("Content-Disposition","attachment;filename="+newString(filename.getBytes("gb2312"),"iso-8859-1")+"."+ext); response.addHeader("Content-Type",type); if(null! =t){ TranscoderInputinput=newTranscoderInput(newStringReader(svg)); TranscoderOutputoutput=newTranscoderOutput(out); try{ t.transcode(input,output); }catch(TranscoderExceptione){ out.print("Problemtranscodingstream.Seetheweblogsformoredetails."); e.printStackTrace(); } }elseif(ext.equals("svg")){ OutputStreamWriterwriter=newOutputStreamWriter(out,"UTF-8"); writer.append(svg); writer.close(); }else out.print("Invalidtype: "+type); }else{ response.addHeader("Content-Type","text/html"); out.println("Usage: \n\tParameter[svg]: TheDOMElementtobeconverted."+ "\n\tParameter[type]: ThedestinationMIMEtypefortheelmenttobetranscoded."); } out.flush(); out.close(); returnnull; } ViewCode 使用highchart生成报表信息的部分后台java代码 开发中遇到的问题 1.在开发中使用了webservice,在dao层的java代码中使用了Map,但是Map在webservice中并不支持, 2.解决方法就是,在dao层的java代码中把Map中的数据使用json-lib插件转换成了Json 3.然后在action层中再使用json-lib插件转换成Map java代码片段 Dao层的代码片段,查询数据封装成map,然后把map数据放到List中,然后在把list放到map中,调用json-lib插件转换成json数据 ListltHY=findSQL(dto,sqlHY.toString(),list.toArray()); ListadminSqlTotalHY=newArrayList(); //使用的LinkedHashMap,放到map中的数据使用顺序的 Map for(inti=0;ltHY! =null&&i Object[]obj=(Object[])ltHY.get(i); totalRecordHYMap.put(obj[0]! =null? String.valueOf(obj[0]): "",obj[1]! =null? String.valueOf(obj[1]): ""); } adminSqlTotalHY.add(totalRecordHYMap); //保存到map中 MaprecordInfo=newLinkedHashMap(); recordInfo.put("Record_total",adminSqlTotalList); recordInfo.put("Record_LJ",adminSqlTotalLJ); recordInfo.put("Record_HY",adminSqlTotalHY); //把map数据转化为json数据 JSONObjectjsonObjectFromMap=JSONObject.fromObject(recordInfo); dto.setAddress(jsonObjectFromMap.toString()); ViewCode action层代码 /** *1.构造HighChart的x轴用到的每月时间数据信息(月份不足两位的没有补0,直接放在request中) *2.返回值map中月份不足2位的,进行了补0,该map在构造每月订单数量统计时使用 *@throwsParseException */ privateMapextractHighChartXAxisInfo(ServletRequestrequest)throwsParseException{ SimpleDateFormatsimpleDateFormat=newSimpleDateFormat("yyyy-MM-dd"); Calendarcurr=Calendar.getInstance(); Calendarcurr2=curr; DatebeginPayDate=curr.getTime();//传进来的当前时间 curr2.add(Calendar.YEAR,-1); curr2.add(Calendar.MONTH,1); DateendPayDate=curr2.getTime();//上一年的时间 GregorianCalendar[]ga=getDate(simpleDateFormat.format(endPayDate),simpleDateFormat.format(beginPayDate)); //循环数组 StringBufferstringBuffer=newStringBuffer(); MapinitMap=newLinkedHashMap(); stringBuffer.append("["); for(GregorianCalendare: ga) { stringBuffer.append("'"+modifyTimeAnthor(e)+"',"); initMap.put(modifyTime(e),0); } //当ga数组中有数据时才删除末尾的逗号 if(stringBuffer.length()>1){ stringBuffer.deleteCharAt(stringBuffer.length()-1); } stringBuffer.append("]"); log.info("x轴用到的每月时间数据信息(月份不足两位的没有补0)"+stringBuffer.toString()); request.setAttribute("highChartXAxisInfo",stringBuffer.toString()); returninitMap; } ViewCode /** * *@paramstartTime *@paramendTime *@return返回开始时间和结束时间之间的每一个月 *如: 2013.12013.22013.32013.42013.52013.62013.7 *@throwsParseException */ publicstaticGregorianCalendar[]getDate(StringstartTime,StringendTime)throwsParseException { Vector SimpleDateFormatsdf=newSimpleDateFormat("yyyy-MM"); GregorianCalendargc1=newGregorianCalendar(),gc2=newGregorianCalendar(); gc1.setTime(sdf.parse(startTime)); gc2.setTime(sdf.parse(endTime)); do{ GregorianCalendargc3=(GregorianCalendar)gc1.clone(); v.add(gc3); gc1.add(Calendar.MONTH,1); }while(! gc1.after(gc2)); returnv.toArray(newGregorianCalendar[v.size()]); } //按格式获取时间,月份不足两位的补0 publicstaticStringmodifyTime(GregorianCalendare){ Stringcurdate=e.get(Calendar.YEAR)+""; if((e.get(Calendar.MONTH)+1)<10){ curdate=curdate+".0"+(e.get(Calendar.MONTH)+1); }else{ curdate=curdate+"."+(e.get(Calendar.MONTH)+1); } returncurdate; } //按格式获取时间,月份不足两位的没有补0 publicstaticStringmodifyTimeAnthor(GregorianCalendare){ Stringcurdate=e.get(Calendar.YEAR)+""; curdate=curdate+"."+(e.get(Calendar.MONTH)+1); returncurdate; } /** *1.传递查询时间段的日期信息 ',
*2.要求查询当月以及向前倒推11个月(总共12的月)的数据
*3.如当前日期是2014.01,则构造开始时间2013.02,结束时间2014.02,都是由于oracle的betweenand
*@parammulOrderDTO
*/
privatevoidpassDateInfo(TMulOrderCountDTOmulOrderDTO){
//传递月份信息
SimpleDateFormatsimpleDateFormat=newSimpleDateFormat("yyyy-MM");
Calendarcurr=Calendar.getInstance();
//注意这里把curr变量的引用赋值给了curr2,当curr的值变化时,会影响到curr2的值
Calendarcurr2=curr;
curr.add(Calendar.MONTH,1);
Datebe
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- highcharts 插件 使用 总结 开发 遇到 问题 解决办法