Highcharts中文使用指南.docx

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}）;