highcharts

http://www.cnblogs.com/java-pan/archive/2011/12/31/highcharts.html

preparation

Highcharts

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

• 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；

• 对个人用户完全免费；

• 纯JS，无BS；

• 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；

• 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；

• 提示功能：鼠标移动到图表的某一点上有提示信息；

• 放大功能：选中图表部分放大，近距离观察图表；

• 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；

• 时间轴：可以精确到毫秒

下载插件

Highcharts下载地址

http://www.highcharts.com/download

jquery下载地址

http://jquery.com/

开发环境：

System：xp    JDK:1.5  Tomcat：5.X  Myeclipse：6.5

jquery：jquery-1.6.3.min.js

highcharts：Highcharts-2.1.9

项目环境：

 注：红色的地方即为本次介绍需要的文件部分。

start

代码如下：

本次介绍是把highcharts中的第一个文件拷贝过来，然后把其他的功能加在了这个文件中，然后查询相关资料，解决了链接以及打印导出等。

 

highcharts1.html

 

result

访问的url如下：http://localhost:8080/JFreeChart/highcharts/highcharts1.html

以下做几点说明：

（1）去掉或更改图片右下角的链接

在highcharts.js文件中搜索credits字符串，找到如下的字符串，

enabled:设置是否显示链接

text：设置链接显示的名称

href：设置链接的url

（2）去掉图片右上角的打印及导出按钮

在js中设置以下代码：

exporting:{ 
                     enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 
                },

（3）点击图片左边的以下文字，当一次单击会隐藏某一条曲线，再次单击会显示该条曲线