Highcharts: 非常漂亮的免费纯JavaScript图表库

杰拉斯 | 时间：2013-02-01, Fri | 22,798 views
前端开发　

Highcharts是什么？

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

HighCharts界面美观，由于使用JavaScript编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度快。另外HighCharts还有很好的兼容性，能够完美支持当前大多数浏览器。现在官方的最新版本为HighCharts2.3.5。

特点

具有良好的兼容性：它可以在所有现代浏览器中很好地工作，包括iPhone，iPad甚至Internet Explorer 6。标准的浏览器使用SVG进行图形绘制，而在传统的Internet Explorer则使用VML进行绘制。
对非商业用户完全免费：无论你想要在个人网站，学校网站或是任何一个非营利组织中使用Highcharts，你都不需要经过授权。
开源：无论你使用的是Highcharts的免费版本还是商业授权版本，你都可以下载它的源代码并作出自己的修改，这给予了用户极大的自由度。
纯粹的JavaScript：Highcharts是完全基于本地浏览器技术的，不需要像Flash或Java那样依赖于客户端插件。此外，你不需要在服务器上安装任何东西，包括PHP或ASP.NET。Highcharts只需要两个核心文件：highcharts.js核心文件和jQuery，MooTools或Prototype框架的其中之一，而这个框架可能已经早就在你的网页中使用了。
众多的图表类型：Highcharts支持直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图等常见的图表类型，并且能够将他们结合在一个图表里。
简单的配置语法：配置Highcharts不需要任何的编程技术，它的配置变量只需要一个简单的JavaScript对象。
动态：在创建图表后的任何时候，你都可以通过一个完整的API对系列和数据点进行添加，删除和修改，也对坐标轴进行修改。许多事件都提供了为图表进行编程的钩子，结合jQuery，MooTools或Prototype框架的AJAX API，它甚至提供了能够实时动态地显示服务器数据的解决方案。
多轴：有时候你需要比较不同度量的数据，比如温度，降雨量和空气压力，Highcharts可以让你为每个数据集设置不同的Y轴，而如果你想要比较不同类别的数据，也可以设置不同的X轴。每个轴都可以放置在图表上下左右的任何位置，所有选项都可以单独设置，包括翻转，风格和位置。
提示标签：当鼠标停在图表的任何一个点或一个系列，都可以显示一个包含相关信息的工具条提示，而当鼠标在图表上移动时，它会自动选择离鼠标最近的点来进行显示，这对查看图表数据提供了极大的便利。
时间轴：75%的图表都带有一个时间轴作为X轴，Highcharts非常智能，甚至可以精确到毫秒，它也可以标志出一个月的开始或一周的开始，乃至午夜和正午等等。
导出和打印：如果启用了导出模块，您的用户可以通过点击导出按钮将图表导出为PNG, JPG, PDF或SVG格式，也可以直接将其打印出来。
缩放：你可以通过缩放来更仔细地查看你对图表中感兴趣的部分，缩放可以作用在X轴或Y轴上，也可以同时作用在两个轴上。
外部数据加载：Highcharts的数据来自于一个JavaScript数组，因此数据可以定义在一个本地配置对象中，也可以定义在一个单独的文件中，甚至可以来自不同的网站。此外，数据可以以任何形式传递给Highcharts，只需一个将数据解析为数组的回调函数。
角度计：针对仪表盘和角度计等，Highcharts提供了一种类似速度计的图表，让你可以一目了然地查看数据。
极坐标图表：笛卡尔坐标系的图表可以很简单的选项来转换成极坐标系图表或径向图。
倒转或翻转图表：有时候你需要将图表翻转，使X轴垂直，这也是支持的。
旋转标签：所有的文本标签，包括轴标签，数据点标签和坐标轴标题标签，都可以进行任意角度的旋转。

调用方式

var chart = new Highcharts.Chart({
	chart: {…}
	colors: [{…}]
	credits: {…}
	exporting: {…}
	global: {…}
	labels: {…}
	lang: {…}
	legend: {…}
	loading: {…}
	navigation: {…}
	pane: {…}
	plotOptions: {…}
	series: [{…}]
	subtitle: {…}
	title: {…}
	tooltip: {…}
	xAxis: {…}
	yAxis: {…}
});

官方网站：http://www.highcharts.com/

演示地址：http://www.highcharts.com/demo/

API文档：http://api.highcharts.com/highcharts

下载地址：http://www.highcharts.com/download/

中文API文档：http://higrid.net/docs/highcharts_cn/

如需转载请注明出处：杰拉斯的博客