AnyChart是一款跨平台和跨浏览器的图表控件，通过 XML格式获取数据，该格式给开发人员非常灵活的方式控制图表上的每一个数据点，然而当图表有数以千计的数据点时，会导致XML文件相当大，如果不需要对每个别数据点进行单独的设置，可以采用CSV数据输入，以减小数据文件大小和图表加载时间，在这一节我们将介绍AnyChart如何使用CSV格式数据。
1. 准备工作
i. 下载试用版
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文件，复制下面的代码到文件里保存。
view sourceprint?
<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(可选) |
标签：
本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com
文章转载自：网络转载
首页 
263次
相关产品
最新文章 
相关文章 
微信
在线咨询
渝公网安备
50010702500608号
客服热线