天天看点

highcharts插件使用总结和开发中遇到的问题及解决办法

这里使用的highchart是2014-01-09从官网下载的版本,版本号是3.0.8,

当过了几天后,发现版本号变成了3.0.9,不由得的感叹highchart的版本更新之快。

在jsp中使用highchart的步骤:

第一步:引入highchart必需的js文件

highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法

View Code

开发过程遇到的问题:

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中,提示的都是英文,

highcharts插件使用总结和开发中遇到的问题及解决办法

要显示中文,这里采用的方法是修改exporting.js

p(s.lang,{printChart:"打印报表",downloadPNG:"下载为PNG格式图片",downloadJPEG:"下载为JPEG格式图片",

downloadPDF:"下载为PDF格式文档",downloadSVG:"下载为SVG格式矢量图片",contextButtonTitle:"打印 下载"});

修改后的效果:

highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法

当修改了exporting.js后,当保存时,没法保存js,提示编码问题

解决方法是:

window>>preferences>>general>>content types  在右边的窗口中打开列表,选中"JavaScript",在下面的"default encoding"右边的输入框中输入"utf-8",再点"update"按钮

highcharts插件使用总结和开发中遇到的问题及解决办法

单击打印下载时,显示的下拉框在大部分的ie浏览器中显示的很难看,火狐下正常

highcharts插件使用总结和开发中遇到的问题及解决办法

原因: 上面的下拉框显示很长,是由于hr标签的原因,导致hr的宽度按照 100%进行了显示

解决方法:

在显示highchart图标的jsp页面中,添加hr的样式

<style>

   hr{height: 0;margin: 0;padding: 0;width: 0;}

</style>

第二步:组装添加显示highchart图表所用的数据

highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法

基本的highchart显示的数据格式是:

X轴数据信息

highcharts插件使用总结和开发中遇到的问题及解决办法

图例和显示数据的格式:

highcharts插件使用总结和开发中遇到的问题及解决办法

因此我们要做的就是根据需求,在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

highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法

使用highchart生成报表信息的部分后台java代码

开发中遇到的问题

在开发中使用了webservice,在dao层的java代码中使用了Map,但是Map在webservice中并不支持,

解决方法就是,在dao层的java代码中把Map中的数据使用json-lib插件转换成了Json

然后在action层中再使用json-lib插件转换成Map

java代码片段

highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法

highcharts效果图

highcharts插件使用总结和开发中遇到的问题及解决办法

附上jsp的代码

highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法
highcharts插件使用总结和开发中遇到的问题及解决办法