highcharts插件使用总结和开发中遇到的问题及解决办法
这里使用的highchart是2014-01-09从官网下载的版本，版本号是3.0.8， 当过了几天后，发现版本号变成了3.0.9，不由得的感叹highchart的版本更新之快。 在jsp中使用highchart的步骤： 第一步：引入highchart必需的js文件
开发过程遇到的问题：
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:\打印报表\下载为PNG格式图片\下载为JPEG格式图片\downloadPDF:\下载为PDF格式文档\下载为SVG格式矢量图片\打印 下载\修改后的效果：
当修改了exporting.js后，当保存时，没法保存js，提示编码问题
解决方法是：
window>>preferences>>general>>content types
在右边的窗口中打开列表,选中\，在下面的\右边的输入框中输入\，再点\按钮
单击打印下载时，显示的下拉框在大部分的ie浏览器中显示的很难看，火狐下正常
原因: 上面的下拉框显示很长，是由于hr标签的原因，导致hr的宽度按照 100%进行了显示
解决方法：
在显示highchart图标的jsp页面中，添加hr的样式
第二步：组装添加显示highchart图表所用的数据
显示highchart图标的js代码 $(function () {
//填充数据使用,使用jquery来获取隐藏域的值 var xAxisTimeInfo = $(\ var totalRecordInfo = $(\
var totalRecordHYInfo = $(\ var totalRecordLJInfo = $(\
$('#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 }, /**
* 去掉图标的右下角HightCharts.com 的图标 */ 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=\提示框的宽高 //3. point.key 坐标的x轴的值 tooltip: {
headerFormat: '' + '{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)
}] }); });
基本的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插件导出图片 * @param mapping * @param form * @param request * @param response * @return
* @throws Exception */
public ActionForward exportImage (ActionMapping mapping, ActionForm form, ServletRequest request, ServletResponse response) throws Exception {
log.info(\图片导出................\
request.setCharacterEncoding(\//设置编码，解决乱码问题 String type = request.getParameter(\ String svg = request.getParameter(\
response.setCharacterEncoding(\//设置编码，解决乱码问题 String filename = request.getParameter(\ filename = filename==null?\
ServletOutputStream out = response.getOutputStream();
log.info(\ :\ filename:\ if (null != type && null != svg) {
svg = svg.replaceAll(\ String ext = \ Transcoder t = null;
if (type.equals(\ ext = \
t = new PNGTranscoder();
} else if (type.equals(\ ext = \
t = new JPEGTranscoder();
}else if (type.equals(\ ext = \
t =(Transcoder) new PDFTranscoder(); }else if(type.equals(\ ext = \ //解决下载文件的文件名的乱码
response.addHeader(\new String (filename.getBytes(\ response.addHeader(\
if (null != t) {
TranscoderInput input = new TranscoderInput(new StringReader(svg)); TranscoderOutput output = new TranscoderOutput(out); try {
t.transcode(input, output); } catch (TranscoderException e) {
out.print(\ e.printStackTrace(); }
} else if (ext.equals(\
OutputStreamWriter writer = new OutputStreamWriter(out, \ writer.append(svg); writer.close(); } else
out.print(\ } else {
response.addHeader(\
out.println(\
\ }
out.flush(); out.close();
return null; }
使用highchart生成报表信息的部分后台java代码
开发中遇到的问题
1. 2. 3.
在开发中使用了webservice，在dao层的java代码中使用了Map，但是Map在webservice中并不支持， 解决方法就是，在dao层的java代码中把Map中的数据使用json-lib插件转换成了Json 然后在action层中再使用json-lib插件转换成Map
java代码片段
Dao层的代码片段,查询数据封装成map，然后把map数据放到List中，然后在把list放到map中，调用json-lib插件转换成json数据
List ltHY = findSQL(dto, sqlHY.toString(), list.toArray()); List adminSqlTotalHY = new ArrayList();
//使用的LinkedHashMap，放到map中的数据使用顺序的
Map
totalRecordHYMap.put(obj[0]!=null?String.valueOf(obj[0]):\ ,obj[1]!=null? String.valueOf(obj[1]):\}
adminSqlTotalHY.add(totalRecordHYMap); //保存到map中
Map recordInfo = new LinkedHashMap();
recordInfo.put(\recordInfo.put(\recordInfo.put(\