摘要
Highcharts 图表控件是目前使用最为广泛的图表控件. 本文将从零开始逐步为你介绍 Highcharts 图表控件. 通过本文, 你将学会如何配置 Highcharts 以及动态生成 Highchart 图表.
目录
前言(Preface)
安装(Installation)
如何设置参数(How to set up the options)
预处理参数(Preprocess the options)
活动图(Live charts)
一, 前言(Preface)
Highcharts 是一个非常流行, 界面美观的纯 JavaScript 图表库. 它主要包括两个部分: Highcharts 和 Highstock.
Highcharts 可以为您的网站或 web 应用程序提供直观, 互动式的图表. 目前支持线, 样条, 面积, areaspline, 柱形图, 条形图, 饼图和散点图类型.
Highstock 可以为您方便地建立股票或一般的时间轴图表. 它包括先进的导航选项, 预设的日期范围, 日期选择器, 滚动和平移等等.
如果想要了解更多 Highcharts 的信息, 可以参考官网: http://www.highcharts.com/ .
二, 安装(Installation)
1.Highcharts 沿用 jQuery,MooTool 以及 Prototype 等 JavaScript 框架来处理基本的 JavaScript 任务. 因此, 在使用 Highcharts 之前, 需要在页面头部引用这些脚本文件. 如果你使用 jQuery 作为基本框架, 那么你需要在页面头部同时引用 jQuery 和 Hightcharts 两个文件. 如下:
- <script src="http://Ajax.googleapis.com/Ajax/libs/jQuery/1.6.1/jQuery.min.JS"
- ; type="text/JavaScript">
- </script>
- <script src="/JS/highcharts.JS" type="text/JavaScript">
- </script>
- [/code]
Highcharts(Highstock)已经内置了 jQuery 适配器 (adapter)(注: 可能是 jQuery 框架最流行的缘故), 但是并没有内置 MooTool 等其他 JavaScript 框架的适配器(adapter). 因此, 当我们使用 MooTool 等其他 JS 框架时, 需要单独引用适配器(adapter) 脚本文件. 如下:
- <script src="https://Ajax.googleapis.com/Ajax/libs/mootools/1.3.0/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>
- [/code]
提示: 安装 Highstock 过程与上述相同, 除了 JavaScript 文件名称是 highstock.JS 而不是 highcharts.JS.
2. 在您的网页头部的脚本标签, 或在一个单独的 JS 文件, 添加 JavaScript 代码来初始化图表. renderTo 参数用来设置图表渲染的位置, 一般来说是一个具有 ID 的 DIV 元素(参考第 3 步).
- 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 // 数组变量
- }]
- });
- });
3. 在页面中添加一个 DIV 元素, 作为放置 Highcharts 图表的容器. 需要为其设置 ID 值, 与第 2 步 rendTo 参数绑定. 设置的宽度和高度将作为 Highcharts 图表的宽度和高度.
<div id="container" style="width: 100%; height: 400px"></div>[/code]
4. 你可以通过 Highcharts.setOptions 方法为 Highcharts 图表设置一个全局的主题(可选的). 下载包含有四个预定义的主题, 如果你需要使用从这些主题, 只需在 highcharts.JS 后引用这些文件. 比如:
<script type="text/JavaScript" src="/JS/themes/gray.JS"></script>[/code]
三, 如何设置参数(How to set up the options)
Highcharts 使用一个 JavaScript 对象结构来定义参数. 选项的值可以是字符串和数字, 数组, 其他对象, 甚至是函数. 当您初始化使用新 Highcharts.Chart 的图表, options 对象将作为第一个参数传递.
如果你想在同一个页面上使用一组参数, 可以定义一个选项对象 (options object) 来设置选项. 更多内容参考 #4 预处理选项(Preprocessing the options).
四, 预处理参数(Preprocess the options)
了解配置对象 (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']
4.1 案例学习: preprocessing the data from CSV
通过这个简单的例子, 我们将学会如何配置基本的参数 (options), 然后通过一个 Ajax 调用远程数据以及解析数据, 最后通过合适的格式展现出来. 在这个例子中, 我们使用 jQuery 来处理 Ajax 请求. 当然, 你也可以使用 MooTool 或者 Prototype 来实现类似的功能. 所有的代码在 $(document).ready() 函数中处理. 你可以在 data-from-CSV.htm 看到这个例子的效果.
(1)创建一个外部的仅包含数据的 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
(2)定义基本的初始的参数. 注意到, 我们为 categorys 和 series 对象创建了空数组(empty arrays), 稍后我们可以为其添加数据.
- var options = {
- chart: {
- renderTo: 'container',
- defaultSeriesType: 'column'
- },
- title: {
- text: 'Fruit Consumption'
- },
- xAxis: {
- categories: []
- },
- yAxis: {
- title: {
- text: 'Units'
- }
- },
- series: []
- };
(3)加载数据. 我们通过 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);
- });
4.2 加载 xml 数据
从 xml 文件加载数据与加载 CSV 文件类似. Highcharts 不能处理预定义的 xml 数据(只能处理数组). 因此, 整个过程由你来编写 xml 数据, 并为它定义一个解析函数. 相对于 CSV 文件来说, xml 的最大缺点是, 它增加了一些标记数据(这也是选择 JSON 的缘故). 使用 xml 的好处在于, 至少对于小量的数据来说, 你不必要手动解析返回的数据. 你可以使用 jQuery 现有的 DOM 解析能力来访问 xml 数. 你可以在 data-from-xml.htm 看到实例, 数据包含在 data.xml.
五, 活动图(Live Charts)
尽管我们已经通过配置对象 (configuration object) 定义图表, 然后选择性地预处理 (optionally preprocessed), 最后通过 new Highcharts.Chart() 初始化和渲染图表, 我们仍然有机会通过 API 来改变图表. chart,axis,series 以及 point 对象有许多方法, 比如 update,remove,addSeries,addPoints 等等. 完整的列表可以查看 API 参考 (the API Reference) 下方法和属性.
5.1 案例学习: a live connection to the server
下面的例子将展示怎样构建一个活动的图表 (live chart) 通过每一秒种从服务器检索的数据. 首先, 我们要建立自定义函数 requestData, 它开始在图表加载事件 (load event) 中调用, 随后在 Ajax 回调函数 success 中调用. 你可以在 live-server.htm 中看到结果.
1. 建立服务器. 在这个例子中, 我们选择 PHP 作为服务器脚本语言返回包含时间 (time) 以及 y 值 (y value) 的 JavaScript 数组. 下列为 live-server-data.PHP 文件的代码:
- <?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);
- ?>
2. 定义全局变量. 需要强调的是, 这里必须定义 chart 全局变量, 因为在 document ready 函数以及 requestData 函数均要访问.
1 var chart; // global[/code]
3. 实现 requestData 函数. 在这个例子中使用 jQuery 中 $.Ajax 函数来处理 Ajax 事务(你也可以用其他 Ajax 框架来替代). 当数据从服务器成功返回后, 通过 addPoint 方法添加点.
- /*2 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 second
- setTimeout(requestData, 1000);
- },
- cache: false
- });
- }
4. 创建图表.
- $(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 * 1000
- },
- yAxis: {
- minPadding: 0.2,
- maxPadding: 0.2,
- title: {
- text: 'Value',
- margin: 80
- }
- },
- series: [{
- name: 'Random data',
- data: []
- }]
- });
- });
原文来自:
来源: http://www.qdfuns.com/article/16085/4e0ace411e0739fb793c57bd96433358.html