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 : [ '第一季度', '第二季度', '第三季度', '第四季度', ] }, // 右下角显示的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 ] }] }); });

         写到这里，基本上已经大功告成了。看看显示的效果吧。

 

        效果是有了，只是没有什么样式。具体的css自己编写就行了。看了上面的js文件还是一头雾水吧，别急highCharts中文帮助文档会让你豁然开朗。这个例子算是入门的，有时候并不能满足我们的需求。后面还有进阶的例子，请继续关注。

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

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