使用Anychart控件创建flash图表的步骤

　　AnyChart是一款灵活的flash图表控件。使用AnyChart控件，你可以轻松创建许多图表。本文将介绍如何使用Anychart控件来一步一步地创建图表。

　　一、创建一个web页面

　　首先，我们需要创建一个含有Flash对象的空白HTML页面，并将该页面保存到某个网页文件夹在中，根据下面的结构，在IIS的wwwroot文件夹创建一个AnyChartTest文件夹(可随意命名)。

　　/AnyChartTest

　　 /swf
AnyChart.swf
/js
AnyChart.js
AnyChartHTML5.js
anychart.xml
anychart.html

　　注意：

　　Container page:anychart.html用于显示图表，可以是ASP, ASP.NET, CF, PHP, CGI, Perl等页面

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

　　Chart SWF:swf文件夹用于放置控件提供的swf文件

　　AnyChart JavaScript library：该集成库可将图表嵌入到网页中。

　　二、选择图表和图表风格

　　当我们创建图表时，我们需要为图表提供一些数据。如果我们需要对比某公司零售渠道的销售情况，我们可以绘制一个柱状图，图表数据如下：

Retail Channel	Sales
Department Stores	$637.166
Discount Stores	$721.630
Men's/Women's Specialty Stores	$148.662
Juvenile Specialty Stores	$78.662
All other outlets	$90.000

　　我们需要将上面的数据转换为XML结构，

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
18
19
20
23
24
25
26
29
30
31
32
33
34

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

　　XML结构可能看起来复杂，但大多数的标签可以自我描述，我们可以通过几个单词来描述XML中的一切。

　　在节点中，描述节点的方向，可使用。

　　在节点中对chart进行了描述。

　　通过下面的代码我们队图表的标题文本进行了设置：

01

　　下面我们设置一个Y轴标题文本：

01
02
05

　　下面我们设置X轴标题文本和轴标签的对齐方式：

01
02
03
06

　　在 节点中，我们创建了一个，因为当我们创建一个multiseries图表时，我们需要更多的series。

　　在节点中，我们为表中的每一个零售渠道添加了一个 节点，输入名称及售价，如，并且设置series名称和类型。

　　三、渲染选项

　　通过设置的renderingType属性，你可以选择使用Flash或者是JavaScript来在页面上显示图表。

RenderingType	Description
FLASH_ONLY	Charts are always rendered using Flash Player, nothing is displayed if Flash is not supported.
SVG_ONLY	Charts are always rendered using Java Script as SVG objects, nothing is displayed is SVG is not supported.
FLASH_PREFERRED	If both SVG and Flash are supported, Flash is used.
SVG_PREFERRED	If both Flash and SVG are supported, SVG is used.

　　如果只设置了FLASH_ONLY 选项，用户必须要有Flash Player才能查看AnyChar图表：

　　AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;

　　如果只设置了SVG_ONLY选项，只有能显示SVG对象的浏览器才能显示图表；

　　AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;

　　如果同时支持FLASH_PREFERRED或者SVG_PREFERRED，你可以设置优先等级。
优先使用Flash来显示：

　　AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;

　　优先使用SVG来显示：

　　AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;

　　四、HTML文件结构

　　要查看我们web上的图表仅剩一步之遥啦~~~~~~

　　以下是该事例Html页面的代码：

　　或者你也可以创建一个基于JavaScript HTML5 Chart的anychart.html：

　　

　　 打开Html页面，复制上面的一种代码到页面里，保存。

　　运行HTML页面

　　

　　 或者

　　C:\Inetpub\wwwroot\AnyChartTest\anychart.html

　　最后 ，您可以看到下面的效果

　　 

　　下载anychart试用版：