highCharts入门-强大的图表库插件

  简介

        Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
        HighCharts界面美观,由于使用JavaScript编写,所以不需要像Flash和Java那样需要插件才可以运行,而且运行速度快。另外HighCharts还有很好的兼容性,能够完美支持当前大多数浏览器。
 
         特点
        HighCharts的主要特性包括:
1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari、IE和火狐等等;
2.图表类型众多:HighCharts现在支持多种图表类型,包括曲线图、区域图、柱状图、饼状图、散状点图和综合图表等等,可以满足各种需求。
3.不受语言约束:HighCharts可以在大多数的WEB开发中使用,并且对个人用户免费,支持ASP,PHP,JAVA,.NET等多种语言中使用。
4.提示功能:HighCharts生成的图表中,可以设置在数据点上显示提示效果,即将鼠标移动到某个数据点上,可以显示该点的详细数据,并且显示效果可以进行设置。
5.放大功能:HighCharts可以大量数据集中显示,并且可以放大某一部分的图形,将图表的精度增大,进行详细的显示,可以选择横向或者纵向放大。
6.时间轴:可以精确到毫秒。
         图样
        先来看看图表应用中比较广泛的柱状图、折线图和饼图。当然也有复杂一点的图表,柱状图。折线图和饼图三合一。
1.
highCharts入门-强大的图表库插件_第1张图片
        2.
highCharts入门-强大的图表库插件_第2张图片
        3.
highCharts入门-强大的图表库插件_第3张图片
        4.
highCharts入门-强大的图表库插件_第4张图片
    看了上面的图样,是不是有点怦然心动的感觉。这就是HighCharts的强大之处。用法也很简单,如何使用跟着我的节奏。
 
         前提条件
  •   导入jquery-1.7.2.js  ,也可以是其它版本。
  •   导入highCharts的核心js文件,highcharts.js文件。你可以到highcharts官方网站下载最新版本:http://www.highcharts.com/
  •   如果需要下载和打印功能,还需要导入exporting.js文件。
        除此之外,页面body部分也要加上这句代码,用于放置图表。如:
1
< div id = "gridTable" style = "height:400px;margin:0 auto;" ></ div >
       接下来就是js的编写了,这里用几个城市的降雨量作为显示的数据。如:
 
 
成都
深圳
上海
第一季度
1000L
2000L
1500L
第二季度
600L
1200L
1400L
第三季度
3000L
5500L
4000L
第四季度
900L
1000L
1200L
       js代码如下,需要注意的地方已经注释说明了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
$( function () {
new Highcharts.Chart({
chart : {
renderTo : 'gridTable' , // 放置图表的DIV容器对应页面的id属性
type : 'column' // 图表类型line, spline, area, areaspline,column, bar, pie , scatter
},
title : {
text : '全国各大城市降雨量综合统计图' // 图表标题
},
subtitle : {
text : '2012年度' // 副标题
},
// x轴
xAxis : {
categories : [ '第一季度' , '第二季度' , '第三季度' , '第四季度' , ]
},
// 右下角显示的LOGO
credits : {
text : 'demo' , // 设置LOGO区文字
href : 'http://www.javakfz.com' // 设置LOGO链接地址
},
// 是否启用导出功能,默认为true
exporting : {
enabled : true
},
// y轴
yAxis : {
min : 0,
title : {
text : '降雨量 (L)'
}
},
legend : {
layout : 'vertical' ,
backgroundColor : '#FFFFFF' ,
align : 'left' ,
verticalAlign : 'top' ,
x : 100,
y : 70,
floating : true ,
shadow : true
},
// 当鼠标悬置数据点时的格式化提示
tooltip : {
formatter : function () {
return temp = '' + this .x + ': ' + this .y + 'L' ;
}
},
plotOptions : {
column : {
dataLabels : {
enabled : true
},
pointPadding : 0.2,
borderWidth : 0
}
},
// 显示的数据,JSON数据格式,最重要的是name和data元素
series : [ {
name : '成都' ,
data : [ 1000, 600, 3000, 900 ]
}, {
name : '深圳' ,
data : [ 2000, 1200, 5500, 1000 ]
}, {
name : '上海' ,
data : [ 1500, 1400, 4000, 1200 ]
}]
});
});
         写到这里,基本上已经大功告成了。看看显示的效果吧。
highCharts入门-强大的图表库插件_第5张图片
 
        效果是有了,只是没有什么样式。具体的css自己编写就行了。看了上面的js文件还是一头雾水吧,别急highCharts中文帮助文档会让你豁然开朗。这个例子算是入门的,有时候并不能满足我们的需求。后面还有进阶的例子,请继续关注。

原创文章,转载请注明: 转载自java开发者

本文链接地址: highCharts入门-强大的图表库插件

你可能感兴趣的:(Highcharts)