摘要

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


目录


转:http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html

一、前言(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>

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>

提示: 安装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>

 

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

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

三、如何设置参数(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,

(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文件的代码:

 1 <?php
2 // Set the JSON header
3 header("Content-type: text/json");
4
5 // The x value is the current JavaScript time, which is the Unix time multiplied by 1000.
6 $x = time() * 1000;
7 // The y value is a random number
8 $y = rand(0, 100);
9
10 // Create a PHP array and echo it as JSON
11 $ret = array($x, $y);
12 echo json_encode($ret);
13 ?>

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

1 var chart; // global

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

 1 /**
2 * Request data from the server, add it to the graph and set a timeout to request again
3 */
4 function requestData() {
5 $.ajax({
6 url: 'live-server-data.php',
7 success: function(point) {
8 var series = chart.series[0],
9 shift = series.data.length > 20; // shift if the series is longer than 20
10
11 // add the point
12 chart.series[0].addPoint(point, true, shift);
13
14 // call it again after one second
15 setTimeout(requestData, 1000);
16 },
17 cache: false
18 });
19 }

4.创建图表。

 1 $(document).ready(function() {
2 chart = new Highcharts.Chart({
3 chart: {
4 renderTo: 'container',
5 defaultSeriesType: 'spline',
6 events: {
7 load: requestData
8 }
9 },
10 title: {
11 text: 'Live random data'
12 },
13 xAxis: {
14 type: 'datetime',
15 tickPixelInterval: 150,
16 maxZoom: 20 * 1000
17 },
18 yAxis: {
19 minPadding: 0.2,
20 maxPadding: 0.2,
21 title: {
22 text: 'Value',
23 margin: 80
24 }
25 },
26 series: [{
27 name: 'Random data',
28 data: []
29 }]
30 });
31 });

转:Highcharts图表控件的使用的更多相关文章

  1. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  2. JQuery Highcharts图表控件多样式显示多组数据

    具体实现的效果如图: 具体代码: ASP.NET前台脚本代码: <%@ Page Language="C#" AutoEventWireup="true" ...

  3. ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】

    具体实现的效果如图:

  4. 基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

    在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用 ...

  5. (转)基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

    http://www.cnblogs.com/wuhuacong/p/3736564.html 在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件 ...

  6. ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源

    ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...

  7. HighchartsNET快速图表控件-开源

    前言: HighchartsNET快速图表控件,基于Highcharts的asp.net web控件.只需几行代码你就能快速生成一个图表. 从此不再担心图表复杂.简单几行代码就可以搞定,节省大量工作时 ...

  8. HighChats图表控件显示精度小数点的方法

    相信大家对highchats这个图表控件并不陌生,最近在项目中用到它,但是某些字段需要显示为小数点,顾查找资料文档发现下面两个方式可以实现: 初始化时候添加如下两个参数 tooltip:{    fo ...

  9. HTML5优秀图表控件

    不管是哪个领域的开发,都有机会用到图表来做统计分析,以更直观的表现形式来代替传统的文字.在以前,图表控件主要有使用程序代码生成的静态图片,或者是使用flash实现的图表控件. 在HTML5非常流行的当 ...

随机推荐

  1. PHP函数——urlencode() 函数

    urlencode($str)的作用是对字符串$str进行url编码,方便$str作为一个变量传递给下一页,一般情况下$str有两种, 第一种是数组类型,如果想将数组作为url的一个参数,即必须将数组 ...

  2. TokuDB介绍——本质是分形树(一个叶子4MB)+缓存减少写操作

    其性能特点见:http://www.cnblogs.com/billyxp/p/3567421.html TokuDB 是一个高性能.支持事务处理的 MySQL 和 MariaDB 的存储引擎.Tok ...

  3. SQL 创建索引的作用以及如何创建索引

    SQL 创建索引的作用以及如何创建索引 SQL 创建索引的作用 一.使用索引的优点: 1.通过唯一性索引(unique)可确保数据的唯一性 2.加快数据的检索速度 3.加快表之间的连接 4.减少分组和 ...

  4. 使用2个MR计算

    转载:http://www.cnblogs.com/sharpxiajun/p/5205496.html 最近做了一个小的mapreduce程序,主要目的是计算环比值最高的前5名,本来打算使用spar ...

  5. tar 排除指定目录 –exclude

    假设 test目录下有 1 2 3 4 5 这5个目录, 1下有6 7两个目录, 现在要将3 4 5 6目录tar打包,2和1下的6这两个目录不要.命令如下: Example[www]#cd test ...

  6. mysql 无法启动1067

    关键字:mysql无法启动办事,mysql卡死,InnoDB"" registration as a STORAGE ENGINE failed.Unknown/unsupport ...

  7. LA 4119 - Always an integer

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  8. HTTP协议的chunked编码

    一般情况HTTP的Header包含Content-Length域来指明报文体的长度.如: 有时候服务生成HTTP回应是无法确定消息大小的,比如大文件的下载,或者后台需要复杂的逻辑才能全部处理页面的请求 ...

  9. dancing link 学习资源导航+心得

    dancing link简直是求解数独的神器,NOIP2009最后一题靶形数独,DFS 各种改变搜索顺序 都没法过,最后还是用了卡时过得.用dancing link写,秒杀所有数据,总时间才400ms ...

  10. html5+js实现刮刮卡效果

    通过Canvas实现的可刮涂层效果. 修改img.src时涂层也会自动适应新图片的尺寸. 修改layer函数可更改涂层样式. 涂层: 可刮效果: <!DOCTYPE html> <h ...