详解AnyChart创建flash图表

我们都知道，AnyChart是一个非常灵活的flash图表控件。使用AnyChart控件，你可以轻松创建许多图表。下面详细解析一下创建flash图表的步骤：

 

一、创建一个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结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
01 <?xml version="1.0" encoding="UTF-8"?>
02 <anychart>
03 <charts>
04 <chart plot_type="CategorizedHorizontal">
05 <data>
06 <series name="Year 2003" type="Bar">
07 <point name="Department Stores" y="637166" />
08 <point name="Discount Stores" y="721630" />
09 <point name="Men's/Women's Specialty Stores" y="148662" />
10 <point name="Juvenile Specialty Stores" y="78662" />
11 <point name="All other outlets" y="90000" />
12 </series>
13 </data>
14 <chart_settings>
15 <title>
16 <text><![CDATA[Sales of ACME Corp.]]></text>
17 </title>
18 <axes>
19 <y_axis>
20 <title>
21 <text><![CDATA[Sales]]></text>
22 </title>
23 </y_axis>
24 <x_axis>
25 <labels align="Outside" />
26 <title>
27 <text><![CDATA[Retail Channel]]></text>
28 </title>
29 </x_axis>
30 </axes>
31 </chart_settings>
32 </chart>
33 </charts>
34 </anychart>

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

在<series>节点中，我们为表中的每一个零售渠道添加了一个<point> 节点，输入名称及售价，如<point name = "Department Stores" y="637166"/>，并且设置series名称和类型。

 

三、渲染选项

通过设置AnyChart图表的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图表：　

1
AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;

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

1
AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;

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

1
AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;

优先使用SVG来显示：

1
AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;

 

 

四、HTML文件结构

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 = 700;
chart.height = 300;
chart.setXMLFile('./anychart.xml');
chart.write();
//]]>
</script>
</body>
</html>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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>
<script type="text/javascript" language="javascript" src="./js/AnyChartHTML5.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
//<![CDATA[
AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;
var chart = new AnyChart();
chart.width = 700;
chart.height = 300;
chart.setXMLFile('./anychart.xml');
chart.write();
//]]>
</script>
</body>
</html>

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

运行HTML页面

　　http://localhost/AnyChartTest/anychart.html

或者

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

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

　　 anychart,图表,anychart控件,flash控件,flash图表,swf,flash,anychart图表

posted @ 2012-11-12 14:28  flashlala  阅读(543)  评论(0)    收藏  举报