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

开发过程遇到的问题：

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(ng,{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的样式

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

View Code

基本的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

View Code

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

开发中遇到的问题

1.在开发中使用了webservice，在dao层的java代码中使用了Map，但是Map

在webservice中并不支持，

2.解决方法就是，在dao层的java代码中把Map中的数据使用json-lib插件转换

成了Json

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

java代码片段

View Code

View Code

View Code

View Code

highcharts效果图

附上jsp的代码

View Code

欢迎转载，转载务必请注明出处，谢谢。分类: java

好文要顶关注我收藏该文

wanggd_blog

关注- 7

粉丝- 15

+加关注

(请您对文章做出评价)

«上一篇：Oracle中group by用法

posted @ 2014-01-22 15:10 wanggd_blog阅读(6964) 评论(4) 编辑收藏评论列表

#1楼 2014-07-17 11:22 伊牛娃

headerFormat:'监测时间：{point.key}',//鼠标停留提示这个json格式的时间怎么转换成正常显示的时间，求指点啊

支持(0)反对(0)

#2楼 2014-07-31 09:52 xuweiforever

你好，我想请教一个问题，横轴怎么才能显示年月日时分秒这种格式呢？先谢过了，弄了一两天没搞明白，还得麻烦你帮我讲解一下哦

支持(0)反对(0)

#3楼 2014-09-24 11:58 11点后要睡觉

mark

支持(0)反对(0)

#4楼 2014-12-22 16:17 打伞的鱼

楼主，参考你的代码导出图片时报一下错误，楼主知道怎么修复吗？跪谢！

1 2 3 4 5 6 7 8 9 10 11 ERROR: null

Enclosed Exception:

:

The attribute "fill" represents an invalid CSS value

("rgba(99,156,211,1)").

Original message:

The "fill" property does not support function values.

org.w3c.dom.DOMException: :

The attribute "fill" represents an invalid CSS value ("rgba(249, 249, 249, 85)").

Original message:

The "fill" property does not support function values.

at

org.apache.batik.css.engine.CSSEngine.getCascadedStyleMap(Unknown Source)

支持(0)反对(0)

刷新评论刷新页面返回顶部

注册用户登录后才能发表评论，请 登录 或 注册，访问网站首页。

【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD 与GIS 源码库

【推荐】融云即时通讯云－专注为 App 开发者提供IM 云服务

【福利】极光推送-富媒体+大数据驱动精准推送，完全免费开放啦

【专享】阿里云9折优惠码：bky758