JS图表组件 highcharts 简单的介绍

把highcharts拿来做个简单的介绍，希望更多的朋友可以用到这个用来做图表的js插件。

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中的第一个文件拷贝过来，然后把其他的功能加在了这个文件中，然后查询相关资料，解决了链接以及打印导出等。

001
<!DOCTYPE HTML>

002
 <html>

003
     <head>

004
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

005
         <title>Highcharts Example---基本的曲线图</title>

006
 
007
         <!-- 1.引入jquery库 -->

008
         <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>

009
         <!-- 2.引入highcharts的核心文件 -->

010
         <script type="text/javascript" src="js/highcharts.js"></script>

011
         <!-- 3.引入导出需要的js库文件 -->

012
         <script type="text/javascript" src="js/exporting.js"></script>

013
 
014
         <!--4.js脚本-->

015
         <script type="text/javascript">

016
         
017
 var chart;

018
             $(document).ready(function() {

019
                 chart = new Highcharts.Chart({

020
                     chart: {

021
                         renderTo: 'container',

022
                         defaultSeriesType: 'line',//图表类别，可取值有：line、spline、area、areaspline、bar、column等

023
                         marginRight: 130,

024
                         marginBottom: 25

025
                     },

026
                     title: {

027
                         text: '襄阳(一级标题)',//设置一级标题

028
                         x: -20 //center

029
                     },

030
                     subtitle: {

031
                         text: '2011温度各区对比(二级标题)',//设置二级标题

032
                         x: -20

033
                     },

034
                     xAxis: {

035
                         categories: ['2011/1', '2011/2', '2011/3', '2011/4', '2011/5', '2011/6', 

036
 '2011/7', '2011/8', '2011/9', '2011/10', '2011/11', '2011/12']//设置x轴的标题

037
                     },

038
                     yAxis: {

039
                         title: {

040
                             text: '温度 (°C)'//设置y轴的标题

041
                         },

042
                         plotLines: [{

043
                             value: 0,

044
                             width: 1,

045
                             color: '#808080'

046
                         }]

047
                     },

048
                     tooltip: {

049
                         formatter: function() {

050
 return '<b>'+ this.series.name +'</b><br/>'+

051
 this.x +': '+ this.y +'°C';//鼠标放在数据点的显示信息，但是当设置显示了每个节点的数据项的值时就不会再有这个显示信息

052
                         }

053
                     },

054
                     legend: {

055
                         layout: 'vertical',

056
                         align: 'left',//设置说明文字的文字 left/right/top/

057
                         verticalAlign: 'top',

058
                         x: -10,

059
                         y: 100,

060
                         borderWidth: 0

061
                     },

062
                     exporting:{

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

064
                     },

065
                     plotOptions: {

066
                         line: {

067
                             dataLabels: {

068
                                 enabled: true //显示每条曲线每个节点的数据项的值

069
                             },

070
                             enableMouseTracking: false

071
                         }

072
                     },

073
                     series: [{

074
                         name: '襄城',//每条线的名称

075
                         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]//每条线的数据

076
                     }, {

077
                         name: '樊城',

078
                         marker:{

079
                             symbol:"square"

080
                         },

081
                         data: [{

082
                                y:-3,

083
                                marker:{

084
                                symbol:'url(sun.png)'//在线上的某个点显示图标

085
                                }

086
                         }, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

087
                     }, {

088
                         name: '襄州',

089
                         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

090
                     }, {

091
                         name: '东津',

092
                         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

093
                     },{

094
                         name: '鱼梁州',

095
                         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

096
                     }]

097
                 });

098
                 
099
                 
100
             });

101
                 
102
 </script>

103
     </head>

104
     <body>

105
         <!--5.导入容器用于显示图表-->

106
         <div id="container"

107
             style="width: 800px; height: 400px; margin: 0 auto"></div>

108
     </body>

109
 </html>

result

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

以下做几点说明：

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

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

enabled:设置是否显示链接

text：设置链接显示的名称

href：设置链接的url

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

在js中设置以下代码：

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

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

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

posted on 2013-06-19 14:35 Eleven_Niu 阅读(394) 评论(0) 编辑收藏举报