资源描述
Highcharts中文使用指南.docx
《Highcharts中文使用指南.docx》由会员分享，可在线阅读，更多相关《Highcharts中文使用指南.docx（13页珍藏版）》请在冰点文库上搜索。
Highcharts中文使用指南
Highcharts使用指南
摘要
Highcharts图表控件是目前使用最为广泛的图表控件。
本文将从零开始逐步为你介绍Highcharts图表控件。
通过本文，你将学会如何配置Highcharts以及动态生成Highchart图表。
∙前言（Preface）
∙安装（Installation）
∙如何设置参数（Howtosetuptheoptions）
∙预处理参数（Preprocesstheoptions）
∙活动图（Livecharts）
一、前言（Preface）
Highcharts是一个非常流行，界面美观的纯Javascript图表库。
它主要包括两个部分：
Highcharts和Highstock。
Highcharts可以为您的网站或Web应用程序提供直观，互动式的图表。
目前支持线，样条，面积，areaspline，柱形图，条形图，饼图和散点图类型。
Highstock可以为您方便地建立股票或一般的时间轴图表。
它包括先进的导航选项，预设的日期范围，日期选择器，滚动和平移等等。
如果想要了解更多Highcharts的信息，可以参考官网：
。
二、安装（Installation）
1.Highcharts沿用jQuery,MooTool以及Prototype等Javascript框架来处理基本的Javascript任务。
因此,在使用Highcharts之前，需要在页面头部引用这些脚本文件。
如果你使用jQuery作为基本框架，那么你需要在页面头部同时引用jQuery和Hightcharts两个文件。
如下：
Highcharts（Highstock）已经内置了jQuery适配器（adapter）（注：
可能是jQuery框架最流行的缘故），但是并没有内置MooTool等其他javascript框架的适配器（adapter）。
因此，当我们使用MooTool等其他JS框架时，需要单独引用适配器（adapter）脚本文件。
如下：
提示：
安装Highstock过程与上述相同，除了JavaScript文件名称是highstock.js而不是highcharts.js。
2.在您的网页头部的脚本标签，或在一个单独的js文件，添加JavaScript代码来初始化图表。
renderTo参数用来设置图表渲染的位置，一般来说是一个具有ID的DIV元素（参考第3步）。
varchart1;//全局变量
$（document）.ready（function（）{
chart1=newHighcharts.Chart（{
chart:
{
renderTo:
'container',
type:
'bar'
},
title:
{
text:
'FruitConsumption'
},
xAxis:
{
categories:
['Apples','Bananas','Oranges']
},
yAxis:
{
title:
{
text:
'Fruiteaten'
}
},
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调用远程服务器提供的数据。
varchart1;//全局变量
$（document）.ready（function（）{
chart1=newHighcharts.StockChart（{
chart:
{
renderTo:
'container'
},
rangeSelector:
{
selected:
1
},
series:
[{
name:
'USDtoEUR',
data:
usdtoeur//数组变量
}]
}）;
}）;
3.在页面中添加一个DIV元素，作为放置Highcharts图表的容器。
需要为其设置ID值，与第2步rendTo参数绑定。
设置的宽度和高度将作为Highcharts图表的宽度和高度。
100%;height:
400px">
4.你可以通过Highcharts.setOptions方法为Highcharts图表设置一个全局的主题（可选的）。
下载包含有四个预定义的主题，如果你需要使用从这些主题，只需在 highcharts.js后引用这些文件。
比如：
三、如何设置参数（Howtosetuptheoptions）
Highcharts使用一个JavaScript对象结构来定义参数。
选项的值可以是字符串和数字，数组，其他对象，甚至是函数。
当您初始化使用新Highcharts.Chart的图表，options对象将作为第一个参数传递。
如果你想在同一个页面上使用一组参数，可以定义一个选项对象（optionsobject）来设置选项。
更多内容参考#4预处理选项（Preprocessingtheoptions）。
四、预处理参数（Preprocesstheoptions）
了解配置对象（configurationobject）的工作原理，以及如何用程序来实现，对于实现高效的Highcharts图表显得十分重要。
下面将介绍JavaScript对象的基本知识点：
∙在上面的例子中,Highchartsoptions被定义为对象字面值（objectliterals）。
通过这种方法来标记配置，我们可以的到一个清晰的，可读性强的，占用空间低的配置对象。
下面这种复杂的代码对于C程序员来说可能比较熟悉：
//不良的风格
varoptions=newObject（）;
options.chart=newObject（）;
options.chart.renderTo='container';
options.chart.type='bar';
options.series=newArray（）;
options.series[0]=newObject（）;
options.series[0].name='Jane';
options.series[0].data=newArray（1,0,4）;
对于JavaScript程序员来说，我们更喜欢使用下面的风格。
需要注意的是，两种实现方式的结果是完全相同的。
//良好的风格
varoptions={
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案例学习：
preprocessingthedatafromCSV
通过这个简单的例子，我们将学会如何配置基本的参数（options），然后通过一个Ajax调用远程数据以及解析数据，最后通过合适的格式展现出来。
在这个例子中，我们使用jQuery来处理Ajax请求。
当然，你也可以使用MooTool或者Prototype来实现类似的功能。
所有的代码在$（document）.ready（）函数中处理。
你可以在data-from-csv.htm看到这个例子的效果。
（1）创建一个外部的仅包含数据的CSV文件（数据源）。
从下面数据文件中，我们可以看到第一行列出了类别的名称（类似于字段名）。
后继的行的第一个位置列出了seriesname（比如：
第二行的'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对象创建了空数组（emptyarrays），稍后我们可以为其添加数据。
varoptions={
chart:
{
renderTo:
'container',
defaultSeriesType:
'column'
},
title:
{
text:
'FruitConsumption'
},
xAxis:
{
categories:
[]
},
yAxis:
{
title:
{
text:
'Units'
}
},
series:
[]
};
（3）加载数据。
我们通过jQuery的.get方法来获取数据文件.csv的内容。
在success回调函数中，我们解析请求返回的字符串，并将结果添加到参数对象（optionsobject）的categories和series成员对象中，最后创建图表。
请注意，我们不能在Ajaxcallback外创建图表，因为我们要等待服务器返回的数据（当请求成功后，返回数据，该过程是异步的）。
$.get（'data.csv',function（data）{
//Splitthelines
varlines=data.split（'\n'）;
//Iterateoverthelinesandaddcategoriesorseries
$.each（lines,function（lineNo,line）{
varitems=line.split（','）;
//headerlinecontainescategories
if（lineNo==0）{
$.each（items,function（itemNo,item）{
if（itemNo>0）options.xAxis.categories.push（item）;
}）;
}
//therestofthelinescontaindatawiththeirnameinthefirstposition
else{
varseries={
data:
[]
};
$.each（items,function（itemNo,item）{
if（itemNo==0）{
series.name=item;
}else{
series.data.push（parseFloat（item））;
}
}）;
options.series.push（series）;
}
}）;
//Createthechart
varchart=newHighcharts.Chart（options）;
}）;
4.2加载XML数据
从XML文件加载数据与加载CSV文件类似。
Highcharts不能处理预定义的XML数据（只能处理数组）。
因此，整个过程由你来编写XML数据，并为它定义一个解析函数。
相对于CSV文件来说，XML的最大缺点是，它增加了一些标记数据（这也是选择JSON的缘故）。
使用XML的好处在于，至少对于小量的数据来说，你不必要手动解析返回的数据。
你可以使用jQuery现有的DOM解析能力来访问XML数。
你可以在data-from-xml.htm看到实例，数据包含在data.xml。
五、活动图（LiveCharts）
尽管我们已经通过配置对象（configurationobject）定义图表，然后选择性地预处理（optionallypreprocessed），最后通过newHighcharts.Chart（）初始化和渲染图表，我们仍然有机会通过API来改变图表。
chart,axis,series以及point对象有许多方法，比如update,remove,addSeries,addPoints等等。
完整的列表可以查看API参考（theAPIReference）下方法和属性。
5.1案例学习：
aliveconnectiontotheserver
下面的例子将展示怎样构建一个活动的图表（livechart）通过每一秒种从服务器检索的数据。
首先，我们要建立自定义函数requestData，它开始在图表加载事件（loadevent）中调用，随后在Ajax回调函数success中调用。
你可以在live-server.htm中看到结果。
1.建立服务器。
在这个例子中，我们选择PHP作为服务器脚本语言返回包含时间（time）以及y值（yvalue）的javascript数组。
下列为live-server-data.php文件的代码：
1
php
2//SettheJSONheader
3header（"Content-type:
text/json"）;
4
5//ThexvalueisthecurrentJavaScripttime,whichistheUnixtimemultipliedby1000.
6$x=time（）*1000;
7//Theyvalueisarandomnumber
8$y=rand（0,100）;
9
10//CreateaPHParrayandechoitasJSON
11$ret=array（$x,$y）;
12echo$ret）;
13?
>
2.定义全局变量。
需要强调的是，这里必须定义chart全局变量，因为在documentready函数以及requestData函数均要访问。
1varchart;//global
3.实现requestData函数。
在这个例子中使用jQuery中$.ajax函数来处理ajax事务（你也可以用其他ajax框架来替代）。
当数据从服务器成功返回后，通过addPoint方法添加点。
1/**
2*Requestdatafromtheserver,addittothegraphandsetatimeouttorequestagain
3*/
4functionrequestData（）{
5$.ajax（{
6url:
'live-server-data.php',
7success:
function（point）{
8varseries=chart.series[0],
9shift=series.data.length>20;//shiftiftheseriesislongerthan20
10
11//addthepoint
12chart.series[0].addPoint（point,true,shift）;
13
14//callitagainafteronesecond
15setTimeout（requestData,1000）;
16},
17cache:
false
18}）;
19}
4.创建图表。
1$（document）.ready（function（）{
2chart=newHighcharts.Chart（{
3chart:
{
4renderTo:
'container',
5defaultSeriesType:
'spline',
6events:
{
7load:
requestData
8}
9},
10title:
{
11text:
'Liverandomdata'
12},
13xAxis:
{
14type:
'datetime',
15tickPixelInterval:
150,
16maxZoom:
20*1000
17},
18yAxis:
{
19minPadding:
0.2,
20maxPadding:
0.2,
21title:
{
22text:
'Value',
23margin:
80
24}
25},
26series:
[{
27name:
'Randomdata',
28data:
[]
29}]
30}）;
31}）;
升级会员 