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

时间：2021-07-25 05:45:58

简介

        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入门-强大的图表库插件
        2.
highCharts入门-强大的图表库插件
        3.
highCharts入门-强大的图表库插件
        4.
highCharts入门-强大的图表库插件
    看了上面的图样，是不是有点怦然心动的感觉。这就是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入门-强大的图表库插件
        效果是有了，只是没有什么样式。具体的css自己编写就行了。看了上面的js文件还是一头雾水吧，别急highCharts中文帮助文档会让你豁然开朗。这个例子算是入门的，有时候并不能满足我们的需求。后面还有进阶的例子，请继续关注。

原创文章，转载请注明： 转载自java开发者

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

相关文章