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.
2.
3.
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 : [ '第一季度', '第二季度', '第三季度', '第四季度', ]},// 右下角显示的LOGOcredits : {text : 'demo', // 设置LOGO区文字},// 是否启用导出功能，默认为trueexporting : {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 ]}]});}); |
写到这里，基本上已经大功告成了。看看显示的效果吧。
效果是有了，只是没有什么样式。具体的css自己编写就行了。看了上面的js文件还是一头雾水吧，别急highCharts中文帮助文档会让你豁然开朗。这个例子算是入门的，有时候并不能满足我们的需求。后面还有进阶的例子，请继续关注。
原创文章，转载请注明： 转载自java开发者
本文链接地址: highCharts入门-强大的图表库插件
