您的位置：首页 > Web前端 > JavaScript

JS图表组件 highcharts 简单的介绍

2013-06-19 14:35 549 查看
把highcharts拿来做个简单的介绍，希望更多的朋友可以用到这个用来做图表的js插件。

preparation

Highcharts

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

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

对个人用户完全免费；

纯JS，无BS；

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

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

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

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

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

时间轴：可以精确到毫秒

下载插件

Highcharts下载地址

http://www.highcharts.com/download

jquery下载地址

http://jquery.com/

开发环境：

System：xpJDK:1.5Tomcat：5.XMyeclipse：6.5

jquery：jquery-1.6.3.min.js

highcharts：Highcharts-2.1.9

项目环境：



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

start

代码如下：

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

查看源码

打印?

001
<!DOCTYPEHTML>
002
<
html
>
003
<
head
>
004
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html;charset=utf-8"
>
005
<
title
>HighchartsExample---基本的曲线图</
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
varchart;
018
$(document).ready(function(){
019
chart=newHighcharts.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:0auto"
></
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）点击图片左边的以下文字，当一次单击会隐藏某一条曲线，再次单击会显示该条曲线





转自：/article/5137413.html
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航