强大的jQuery图表插件之：Highcharts

发表于: 星期六, 2010 一月 23 作者: Hobo

15 条评论

之前已经为大家推荐过一些很不错的图表插件了：

漂亮方便的jQuery图表插件flot

FusionCharts Free 漂亮的JS+Flash图表插件

Emprise JavaScript Charts强大的图表插件

这些图表插件各有各的强处，有一些有略有不足，今天再一次为大家推荐一个强大的图表插件：Highcharts。

首先简单的介绍一下：

特点：

兼容现今所有的主流浏览器。
支持各种图表类型，包括，线状图、并状图、柱状图、散列图、各种区域图等。
多种皮肤样式任君选择，官方默认支持的有表格式、深色系、蓝黑、绿黑、天空背景等。
支持动态显示，可以在图上操作隐藏和现实图表，显示效果堪比Flash。
支持多种类型图表在同图上显示。
支持选区放大功能，用鼠标选择部分区域对图表进行放大。
官方示例很全，直接可以看到例子和代码。
支持中文字符显示（这一点对我来讲比较重要）。

缺点：

其在功能操作上，相对于Flash的还是差一些。
在生成的图表中右下角有其网站的链接（下面有详细说明及解决办法）。
实在是找不到其他的缺点了，如果你觉得有什么缺点的话，麻烦提供给我。

官方示例截图：（点击图片可以看相应的例子）

线状图Gray风格：

柱状图Dark Blue风格：

饼状图Skies背景风格:

区域线状图默认风格：

多个图表同时显示DarkGreen风格：

点击“View Options”可以查看源代码：

使用方法：

下载官方的演示包，里面同时也带上了js源文件。
下载一个jQuery库文件。
按照官方示例文件中的方式调用jQuery库和官方的js库文件如下：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="../js/highcharts.js"></script>

<!--[if IE]>

<script type="text/javascript" src="../js/excanvas.compiled.js"></script>

<![endif]-->

4.写入生成图表的js代码,如下：

<script type="text/javascript">

$(document).ready(function() {
			var chart = new Highcharts.Chart({

				chart: {

					renderTo: 'container',

					defaultSeriesType: 'area'

				},

				title: {

					text: 'US and USSR nuclear stockpiles'

				},

				subtitle: {

					text: 'Source: http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf'

				},

				xAxis: {

				},

				yAxis: {

					title: {

						text: 'Nuclear weapon states'

					},

					labels: {

						formatter: function() {

							return this.value / 1000 +'k';

						}

					}

				},

				tooltip: {

					formatter: function() {

						return this.series.name +' produced <b>'+

							Highcharts.numberFormat(this.y, 0, null, ' ') +'</b><br/>warheads in '+ this.x;

					}

				},

				plotOptions: {

					area: {

						pointStart: 1940,

						marker: {

							enabled: false,

							symbol: 'circle',

							radius: 2,

							states: {

								hover: {

									enabled: true

								}

							}

						}

					}

				},

				series: [{

					name: 'USA',

					data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,

						1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,

						27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,

						26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,

						24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,

						22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,

						10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]

				}, {

					name: 'USSR/Russia',

					data: [null, null, null, null, null, null, null , null , null ,null,

					5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,

					4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,

					15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,

					33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,

					35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,

					21000, 20000, 19000, 18000, 18000, 17000, 16000]

				}]

			});


			
		});
		</script>

5.简单的代码说明：

defaultSeriesType：设定图表类型：line、spline、area、areaspline、bar、column等等

title：最顶端的标题

subtitle：最顶端的子标题

xAxis：X轴，数据以数组的形式组装

yAxis：Y轴，数据以数组的形式组装

tooltip：提示信息

series：ajax获得数据放到数据里面

更详细的代码，自己要仔细研究官方的例子。

6.去掉或修改右下角链接的方法：

官方的下载压缩包里面有三个js文件。

其中highcharts.js是本插件的核心代码的压缩版，默认调用的就是这个。

而highcharts.src.js是核心文件的开源版，未经过任何压缩。

如果你想去掉右下角的那个链接，便要修改这个highcharts.src.js文件。

在highcharts.src.js中找到如下代码（注意，带//的注释是我加的。）：

credits: {

    enabled: true,//这里改成false的话就不会显示右下角的字符链接了。

    text: ‘Highcharts.com’, //这里可以修改成你要显示的字符串。

    href: ‘http://www.highcharts.com’, //这里可以修改成你的链接。

    style: {

        position: ABSOLUTE,

        right: ‘50px’,

        bottom: ‘5px’,

        color: ‘#999′,

        textDecoration: ‘none’,

        font: defaultFont.replace(‘12px’, ‘10px’)

    }

接下来,你可以直接调用highchatrs.src.js来替代highcharts.js，当然，在用之前你也可以将highchatrs.src.js压缩一下，有很多在线压缩js的工具，随便找一个用用就行。