AnyChart是一款跨平台和跨浏览器的图表控件,通过 XML格式获取数据,该格式给开发人员非常灵活的方式控制图表上的每一个数据点,然而当图表有数以千计的数据点时,会导致XML文件相当大,如果不需要对每个别数据点进行单独的设置,可以采用CSV数据输入,以减小数据文件大小和图表加载时间,在这一节我们将介绍AnyChart如何使用CSV格式数据。
1. 准备工作
i. 下载试用版:http://www.componentcn.com/html/jbtbkj_249_5209.html
ii. 确保操作系统上安装了IIS以及浏览器和Flash Player 9.0或支持SVG
2. 安装好AnyChart后,在IIS的wwwroot文件夹创建一个AnyChartTest文件夹(可随意命名),然后在该文件夹下创建下面的目录结构:
AnyChartTest
swf
AnyChart.swf
js
AnyChart.js
AnyChartHTML5.js
anychart.xml
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"?> <anychart> <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(可选) |