Highcharts 多功能类型丰富的 HTML5 交互图表

Highcharts图表控件是目前使用最为广泛的图表控件。本文将从零开始逐步为你介绍 Highcharts 图表控件。通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。

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

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

前言

Highcharts 是一个非常流行，界面美观的纯 JavaScript 图表库。它主要包括两个部分：Highcharts 和 Highstock。

Highcharts 可以为您的网站或Web应用程序提供直观，互动式的图表。目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。

Highstock 可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。

如果想要了解更多 Highcharts 的信息，可以参考官网： www.highcharts 商业网。

主要特性

兼容性

Highcharts 可以在所有的移动设备及电脑上的浏览器中使用，包括 iPhone，iPad 和 IE6 以上的版本，在 IOS 和 Android 系统中 Highcharts 支持多点触摸功能，因而可以给您提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制，在低版本 IE 则使用 VML 进行图形绘制。

非商业使用免费

在个人网站、学校网站及非盈利机构中使用 Highcharts 完全不需要经过我们的许可，直接可以任意使用！

开源

Highcharts 最重要的特点之一就是：无论免费版还是付费版，你都可以下载源码并可以对其进行编辑。

基于开源社区我们可以第一时间获取用户的需求、及时的 Bug 修复及吸收社区贡献。

纯 JavaScript

Highcharts 完全基于 HTML5 技术，不需要再客户端安装任何插件，如 Flash 或 Java。此外你也不用配置任何服务端环境，不需要 PHP、Tomcat、ASP.NET 等，只需要两个 JS 文件即可运行。

丰富的图表类型

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

简单的配置语法

在 Highcharts 中设置配置选项不需要任何高级的编程技术，所有的配置都是 JSON 对象，只包含用冒号连接的键值对、用逗号进行分割、用括号进行对象包裹。JSON 具有易于人阅读和编写，同时也易于机器解析和生成的特点。

动态交互性

Highcharts 支持丰富交互性，在图表创建完毕后，可以用丰富的 API 进行添加、移除或修改数据列、数据点、坐标轴等操作。

结合 jQuery 的 ajax 功能，可以做到实时刷新数据、用户手动修改数据等功能，结合事件处理，可以做到各种交互功能。

支持多坐标轴

多个数据进行对比这是非常常见的需求，Highcharts 可以让你为每个类型的数据添加坐标轴，每个轴可以定义放置的位置，所有的设置都可以独立生效，包括旋转、样式设计和定位，当然也支持多个数据共用一个坐标轴。

数据提示框

当鼠标划过图形时，Highcharts 可以将数据点或数据列的信息展示在提示框中，并且提示框会跟随用户的鼠标；我们做了大量工作，可以智能的显示离鼠标最近的点或被遮盖点的信息。

时间轴

75% 的直角坐标系（包含 X轴 和 Y轴）图表中是时间轴图表，因为 Highcharts 对时间轴的处理非常智能。Highcharts 以毫秒为单位，可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。

导出和打印

Highcharts 支持导出功能，用户可以一键导出 PNG、JPEG、PDF 或 SVG 文件，通过插件可以实现导出为 Excel 文件功能；另外，用户还可以从网页上直接打印图表。

缩放和钻取

通过缩放可以方便的查看不同范围的数据；通过钻取可以方便的查看不同级别的详细数据。

方便加载外部数据

Highcharts 的数据是 JavaScript 数组或对象，这些数据可以是本地的配置对象，独立的数据文件（JSON、CVS）甚至是不同的网站上定义。另外，这些数据可以用任何形式处理好并加载到 Highcharts 中。

仪表图

仪表图对于 Dashboard 来说特别理想，这种图表就像速度计一样，一眼就可以轻松阅读。

极地图

折线图、面积图、柱形图等图形可以通过一个简单的配置转换成极地图、雷达图。

图表或坐标轴反转

Highcharts 支持图表反转（X 轴或 Y轴对调），这样 X轴是垂直的，方便进行数据对比；坐标轴旋转则可以坐标轴的最大值和最小值显示对调。

文本旋转

图表中所有的文本，包括坐标轴标签、数据标签等都可以进行任意角度旋转。

使用方法

安装 Highcharts

Highcharts 沿用 jQuery、MooTool 以及 Prototype 等 JavaScript 框架来处理基本的 JavaScript 任务。因此在使用 Highcharts 之前，需要在页面头部引用这些脚本文件。如果你使用 jQuery 作为基本框架，那么你需要在页面头部同时引用 jQuery 和 Hightcharts 两个文件。如下：

<script src="/js/jquery.min.js"></script>
<script src="/js/highcharts.js"></script>

Highcharts 已经内置了 jQuery 适配器 （adapter）（这可能是 jQuery 框架最流行的缘故），但是并没有内置 MooTool 等其他 JavaScript 框架的适配器（adapter）。因此当我们使用 MooTool 等其他 JS 框架时，需要单独引用适配器（adapter）脚本文件。如下面的代码：

<script src="/js/mootools-yui-compressed.js" type="text/javascript"></script>
<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

提示： 安装 Highstock 过程与上述相同，除了 JavaScript 文件名称是 highstock.js 而不是 highcharts.js。

Highcharts 初始化

在您的网页头部的脚本标签，或在一个单独的js文件，添加JavaScript代码来初始化图表。

renderTo 参数用来设置图表渲染的位置，一般来说是一个具有 ID 的 DIV 元素。

var chart1; // 全局变量
$(document).ready(function() {
	chart1 = new Highcharts.Chart({
		chart: {
			renderTo: 'container',
			type: 'bar'
		},
		title: {
			text: 'Fruit Consumption'
		},
		xAxis: {
			categories: ['Apples', 'Bananas', 'Oranges']
		},
		yAxis: {
			title: {
				text: 'Fruit eaten'
			}
		},
		series: [{
			name: 'Jane',
			data: [1, 0, 4]
		}, {
			name: 'John',
			data: [5, 7, 3]
		}]
	});
});

上述代码适用于使用 jQuery 作为基本框架的情况，$(document).ready() 函数表示在文档加载完成后进行相应处理。如果你使用 MooTool 等其他 JS 框架，需要使用相对应的代码来替代 $(document).ready() 函数。

如果你想生成 HighStock 图表，有一个单独的构造方法调用 Highcharts.StockChart。在这些图表中，数据源是一个典型的 JavaScript 数组数据。其来源可以是一个单独的 JavaScript 文件，或者是通过 Ajax 调用远程服务器提供的数据。

var chart1; // 全局变量
$(document).ready(function(){
	chart1 = new Highcharts.StockChart({
		chart: {
			renderTo: 'container'
		},
		rangeSelector: {
			selected: 1
		},
		series: [{
			name: 'USD to EUR',
			data: usdtoeur // 数组变量
		}]
	});
});

在页面中添加一个 DIV 元素，作为放置Highcharts图表的容器。需要为其设置ID值，与第2步rendTo参数绑定。设置的宽度和高度将作为Highcharts图表的宽度和高度。

<div id="container" style="width: 100%; height: 400px"></div>

4.你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题（可选的）。下载包含有四个预定义的主题，如果你需要使用从这些主题，只需在 highcharts.js 后引用这些文件。比如：

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

设置自定义参数

Highcharts 使用一个 JavaScript 对象结构来定义参数。选项的值可以是字符串和数字、数组、其他对象，甚至是函数。当您初始化使用新 Highcharts.Chart 的图表，options 对象将作为第一个参数传递。 如果你想在同一个页面上使用一组参数，可以定义一个选项对象（options object）来设置选项。

预处理参数

了解配置对象（configuration object）的工作原理，以及如何用程序来实现，对于实现高效的 Highcharts 图表显得十分重要。下面将介绍 JavaScript 对象的基本知识点：

在上面的例子中，Highcharts options 被定义为对象字面值（object literals）。通过这种方法来标记配置，我们可以得到一个清晰的、可读性强的、占用空间低的配置对象。下面这种复杂的代码对于 C 程序员来说可能比较熟悉：

//不良的风格
var options = new Object();
options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'bar';
options.series = new Array();
options.series[0] = new Object();
options.series[0].name = 'Jane';
options.series[0].data = new Array(1, 0, 4);

对于 JavaScript 程序员来说，我们更喜欢使用下面的风格。需要注意的是，两种实现方式的结果是完全相同的。

// 良好的风格
var options = {
	chart: {
		renderTo: 'container',
		defaultSeriesType: 'bar'
	},
	series: [{
		name: 'Jane',
		data: [1, 0, 4]
	}]
};

在创建命名的对象后，我们可以通过点.操作符来扩展其成员。假设我们已经定义一个对象（见良好的风格代码）。下面代码代码将添加另一个 series。请记住 options.series 是一个数组，因此我们可以使用 push 方法。

options.series.push({
	name: 'John',
	data: [3, 4, 2]
})

另外一个可以排上用场的事实是，对于 JavsScript 对象来说，点符号（.）和方括号 [] 是等价的。所以你可以通过名称来访问成员。这意味着：

options.renderTo

等价于

options['renderTo']

案例学习

通过这个简单的例子，我们将学会如何配置基本的参数（options），然后通过一个 Ajax 调用远程数据以及解析数据，最后通过合适的格式展现出来。在这个例子中，我们使用 jQuery 来处理 Ajax 请求。当然，你也可以使用 MooTool 或者 Prototype 来实现类似的功能。所有的代码在 $(document).ready() 函数中处理。你可以在 data-from-csv.htm 看到这个例子的效果。

创建一个外部的仅包含数据的 CSV 文件（数据源）。从下面数据文件中，我们可以看到第一行列出了类别的名称（类似于字段名）。后继的行的第一个位置列出了 series name (比如：第二行的'John')，随后的位置列出相关的值（value）。在实际开发过程中，我们经常使用 PHP 或者其他服务器端编程语言（C#，java 等)来创建这个文件的内容。或者你会选择其他的标记格式，比较的常见的如 XML 或者 JSON（JSON 相对 XML 更加轻巧）。在这些情况下，jQuery 可以解析出数据对象本身。

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15

定义基本的初始的参数。注意到，我们为 categorys 和 series 对象创建了空数组（empty arrays），稍后我们可以为其添加数据。

var options = {
	chart: {
		renderTo: 'container',
		defaultSeriesType: 'column'
	},
	title: {
		text: 'Fruit Consumption'
	},
	xAxis: {
		categories: []
	},
	yAxis: {
		title: {
			text: 'Units' 
		}
	},
	series: []
};

加载数据。我们通过 jQuery 的 .get 方法来获取数据文件 .csv 的内容。在 success 回调函数中，我们解析请求返回的字符串，并将结果添加到参数对象（options object)的 categories 和 series 成员对象中，最后创建图表。请注意，我们不能在 Ajax callback 外创建图表，因为我们要等待服务器返回的数据（当请求成功后，返回数据，该过程是异步的）。

$.get('data.csv', function(data) {
	// Split the lines    var lines = data.split('\n');
	// Iterate over the lines and add categories or series
	$.each(lines, function(lineNo, line) {
		var items = line.split(',');
		// header line containes categories
		if (lineNo == 0) {
			$.each(items, function(itemNo, item) {
			if (itemNo > 0) options.xAxis.categories.push(item);
		});
		}
		// the rest of the lines contain data with their name in the first position
		else {
		var series = {
			data: []
		};
		$.each(items, function(itemNo, item) {
			if (itemNo == 0) {
				series.name = item;
			} else {
				series.data.push(parseFloat(item));
		}
		}); 
		options.series.push(series);
	}
	});
	// Create the chart
	var chart = new Highcharts.Chart(options);
});

加载XML数据

从 XML 文件加载数据与加载 CSV 文件类似。Highcharts 不能处理预定义的 XML 数据（只能处理数组）。因此整个过程由你来编写 XML 数据，并为它定义一个解析函数。相对于 CSV 文件来说，XML 的最大缺点是，它增加了一些标记数据（这也是选择 JSON 的缘故）。使用 XML 的好处在于，至少对于小量的数据来说，你不必要手动解析返回的数据。你可以使用 jQuery 现有的 DOM 解析能力来访问 XML 树。你可以在 data-from-xml.htm 看到实例，数据包含在 data.xml。

活动图

尽管我们已经通过配置对象（configuration object）定义图表，然后选择性地预处理（optionally preprocessed），最后通过 new Highcharts.Chart() 初始化和渲染图表，我们仍然有机会通过 API 来改变图表。chart axis series 以及 point 对象有许多方法，比如 update remove addSeries addPoints 等等。完整的列表可以查看API参考（ www.highcharts 商业网/ref）下方法和属性。

案例学习

下面的例子将展示怎样构建一个活动的图表（live chart）通过每一秒种从服务器检索的数据。首先我们要建立自定义函数 requestData，它开始在图表加载事件（load event）中调用，随后在 Ajax 回调函数 success 中调用。你可以在 live-server.htm 中看到结果。

建立服务器文件。在这个例子中，我们选择 PHP 作为服务器脚本语言返回包含时间（time）以及 y 值（y value）的 JavaScript 数组。下列为 live-server-data.php 文件的代码：

// Set the JSON header
header("Content-type: text/json");
// The x value is the current JavaScript time, which is the Unix time multiplied by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(0, 100);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);

定义全局变量。需要强调的是，这里必须定义 chart 全局变量，因为在 document ready 函数以及 requestData 函数均要访问。

var chart; // global

实现 requestData 函数。在这个例子中使用 jQuery 中 $.ajax 函数来处理 ajax 事务（你也可以用其他 ajax 框架来替代）。当数据从服务器成功返回后，通过 addPoint 方法添加点。

/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
	$.ajax({
		url: 'live-server-data.php',
		success: function(point) { 
			var series = chart.series[0], 
			shift = series.data.length > 20;
			// shift if the series is longer than 20
			// add the point
			chart.series[0].addPoint(point, true, shift);
			// call it again after one second15
			setTimeout(requestData, 1000);    
		},
		cache: false;
	});
}

最后创建图表

$(document).ready(function() {
	chart = new Highcharts.Chart({ 
		chart: {
			renderTo: 'container',
			defaultSeriesType: 'spline',
		events: {
			load: requestData
		} 
	},
	title: {
		text: 'Live random data'
	},
	xAxis: {
		type: 'datetime',
		tickPixelInterval: 150,
		maxZoom: 20 * 100017 
	},
	yAxis: {
		minPadding: 0.2,
		maxPadding: 0.2,
	title: {
		text: 'Value',
		margin: 8024
	}
	},
	series: [{
		name: 'Random data',
		data: []
	}]
	});        
});