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

发布于 2017-12-05 20:41:40 字数 12200 浏览 3205 评论 0

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

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

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

前言

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

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

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

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

主要特性

兼容性

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参考（the API Reference）下方法和属性。

案例学习

下面的例子将展示怎样构建一个活动的图表（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: []
	}]
	});        
});