AnyChart图表控件使用指南(2) _Web前端

AnyChart图表控件使用指南(二)

导读：AnyChart是一款跨平台和跨浏览器的图表控件，通过 XML格式获取数据，该格式给开发人员非常灵活的方式控制图表上的每一个数据点，然而当图表有数以千计的数据点时，会导致XML文件相当大，如果不需要对每个别数据点进行单独的设置，可以采用CSV数据输入，以减小数据文件大小和图表加载时间，在这一节我们将介绍AnyChart如何使用CSV格式数据。

AnyChart详细介绍以及事例展示请查看>>

1.?? 准备工作

?????? i.????????? 下载试用版：http://www.componentcn.com/html/jbtbkj_249_5209.html

???? ii.????????? 确保操作系统上安装了IIS以及浏览器和Flash Player 9.0或支持SVG

2.??? 安装好AnyChart后，在IIS的wwwroot文件夹创建一个AnyChartTest文件夹(可随意命名)，然后在该文件夹下创建下面的目录结构：

l? /AnyChartTest

2? /swf

n? AnyChart.swf

2? /js

n? AnyChart.js

n? AnyChartHTML5.js

2? anychart.xml

2? anychart.html

?????

注：

1)???? swf文件夹用于放置控件提供的swf文件，既AnyChart.swf文件，该文件可以在控件安装目录下找到

2)???? js文件夹用于放置控件提供的JS文件，同样地这两个JS文件也是控件提供，在控件安装目录下可以找到

3)???? anychart.xml该文件用于开发人员配置图表，设置图表的各种基本信息，当然还包挎图表所需的数据等

4)???? anychart.html用于显示图表，可以是ASP, ASP.NET, CF, PHP, CGI, Perl等页面

3.??? 添加CSV格式的数据集

Anychart可以使用几个CSV数据块，叫作数据集合，该数据集合在XML文件里使用<data_sets>节点定义，该节点作为<anychart>的子节点，每一个数据集则在<csv_data_set name=" ">节点描述，name属性是独一无二用于匹配每一个数据集的，每一个数据集的数据则包含在<csv_data_set> </csv_data_set>里，具体查看下面的XML代码：

<data_sets>

    <csv_data_set name="simpleDataSet">

P1,174,5854,3242

P2,197,4171,3171

P3,155,1375,700

P4,15,1875,1287

P5,66,2246,1856

P6,85,2696,1126

P7,37,1287,987

P8,10,2140,1610

P9,44,1603,903

    </csv_data_set>

  </data_sets>

如上面的数据格式，AnyChart使用逗号用于列分隔符，换行(“\n”)表示行分隔符，CSV数据经常在第一行包含列名，但是AnyChart在<csv_data_set>节点里只能包含数据行。

4.??? 为图表中的数据序列匹配数据集，在AnyChart中<series>节点表示一个数据序列，每个数据序列都有data_source属性，使用CSV数据格式时，必须设置data_source属性为CSV，在<series>节点下，控件提供了<csv_data_mapping>节点用于为每个数据序列进行CSV数据匹配，该节点下提供了<field>节点，该节点有column属性对应CSV中的某一列，name属性用于对应数据序列的数据列，像下面的代码：

<?xml version="1.0" encoding="UTF-8"?>

? <charts>

??? <chart plot_type="CategorizedVertical">

????? <chart_settings>

??????? <title enabled="false" />

??????? <axes>

????????? <y_axis>

??????????? <title enabled="false" />

????????? </y_axis>

????????? <extra>

??????????? <y_axis name="extra_y_axis1">

????????????? <title enabled="false" />

??????????? </y_axis>

????????? </extra>

??????? </axes>

????? </chart_settings>

????? <data>

??????? <series name="Series 1" type="Spline" data_source="CSV" y_axis="extra_y_axis1">

????????? <csv_data_mapping data_set="simpleDataSet">

??????????? <field column="0" name="name" />

??????????? <field column="1" name="y" />

????????? </csv_data_mapping>

??????? </series>

??????? <series name="Series 2" type="Bar" data_source="CSV">

????????? <csv_data_mapping data_set="simpleDataSet">

??????????? <field column="0" name="name" />

??????????? <field column="2" name="y" />

????????? </csv_data_mapping>

??????? </series>

??????? <series name="Series 3" type="SplineArea" data_source="CSV">

????????? <csv_data_mapping data_set="simpleDataSet">

??????????? <field column="0" name="name" />

??????????? <field column="3" name="y" />

????????? </csv_data_mapping>

??????? </series>

????? </data>

??? </chart>

? </charts>

? <data_sets>

??? <csv_data_set name="simpleDataSet">

P1,174,5854,3242

P2,197,4171,3171

P3,155,1375,700

P4,15,1875,1287

P5,66,2246,1856

P6,85,2696,1126

P7,37,1287,987

P8,10,2140,1610

P9,44,1603,903

??? </csv_data_set>

? </data_sets>

</anychart>

5.??? 打开anychart.xml文件，复制上面的代码到文件里保存

6.??? 打开Html文件，复制下面的代码到文件里保存。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>AnyChart Sample</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
</head>
<body>
????<script type="text/javascript" language="javascript">
????//<![CDATA[
????var chart = new AnyChart('./swf/AnyChart.swf');
????chart.width = 500;
????chart.height = 400;
????chart.setXMLFile('./anychart.xml');
????chart.write();
????//]]>
????</script>
</body>
</html>

7.??? 运行anychart.html可以看见如下的效果

8.??? 对于数据集合<data_sets>节点下，还可以包含多个不同的数据集，像下面的代码：

<data_sets>

??? <csv_data_set name="primaryDataSet"><![CDATA[

Point A,1452

Point B,2101

Point C,3415

Point D,981

Point E,1872

]]></csv_data_set>

??? <csv_data_set name="secondaryDataSet"><![CDATA[

Point A,671

Point B,162

Point C,431

Point F,362

Point G,287

]]></csv_data_set>

? </data_sets>

9.??? 查看下表，列举出了不同的绘制类型和数据序列对应的name关键词

绘制类型：

CategorizedVertical
CategorizedHorizontal
CategorizedVerticalBySeries
CategorizedHorizontalBySeries

Series Type	Field Keywords
Bar	name, y
Line	name, y
Spline	name, y
StepLineForward	name, y
StepLineBackward	name, y
Area	name, y
SplineArea	name, y
StepLineForwardArea	name, y
StepLineBackwardArea	name, y
Marker	name, y
Bubble	name, y, size
RangeBar	name, start, end
RangeArea	name, start, end
RangeSplineArea	name, start, end
OHLC	name, high, low, open, close
Candlestick	name, high, low, open, close

绘制类型：Map

Series Type	Field Keywords
MapRegion	name, y
Marker	name(optional), x, y, link(optional)
Bubble	name(optional), x, y, size, link(optional)
Line	name(optional), x, y, size, link(optional)
Area	x, y
Connector	?

绘制类型：Scatter

Series Type	Field Keywords
Bar	x, y, name(可选)
Line	x, y, name(可选)
Spline	x, y, name(可选)
StepLineForward	x, y, name(可选)
StepLineBackward	x, y, name(可选)
Area	x, y, name(可选)
SplineArea	x, y, name(可选)
StepLineForwardArea	x, y, name(可选)
StepLineBackwardArea	x, y, name(可选)
Marker	x, y, name(可选)
Bubble	x, y, size, name(可选)
RangeBar	x, start, end, name(可选)
RangeArea	x, start, end, name(可选)
RangeSplineArea	x, start, end, name(可选)
OHLC	x, high, low, open, close, name(可选)
Candlestick	x, high, low, open, close, name(可选)