国产盗摄不卡,日本精品一区二区在线播放,欧美日韩精品专区在线观看

用AnyChart控件創(chuàng)建flash圖表步驟詳解

原創(chuàng)|其它|編輯：郝浩|2012-02-27 20:30:29.000|閱讀 884 次

概述：AnyChart是一款靈活的flash圖表控件。使用AnyChart控件，你可以輕松創(chuàng)建許多圖表。本文將介紹如何使用Anychart控件來一步一步地創(chuàng)建圖表。

AnyChart是一款靈活的flash圖表控件。使用AnyChart控件，你可以輕松創(chuàng)建許多圖表。本文將介紹如何使用 Anychart 控件來一步一步地創(chuàng)建圖表。

一、創(chuàng)建一個(gè)Web頁面

首先，我們需要創(chuàng)建一個(gè)含有Flash對象的空白HTML頁面，并將該頁面保存到某個(gè)網(wǎng)頁文件夾在中，根據(jù)下面的結(jié)構(gòu)，在IIS的wwwroot文件夾創(chuàng)建一個(gè)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該文件用于開發(fā)人員配置圖表，設(shè)置圖表的各種基本信息，當(dāng)然還包挎圖表所需的數(shù)據(jù)等

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

　　AnyChart JavaScript library：該集成庫可將圖表嵌入到網(wǎng)頁中。

二、選擇圖表和圖表風(fēng)格

當(dāng)我們創(chuàng)建圖表時(shí)，我們需要為圖表提供一些數(shù)據(jù)。如果我們需要對比某公司零售渠道的銷售情況，我們可以繪制一個(gè)柱狀圖，圖表數(shù)據(jù)如下：

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

我們需要將上面的數(shù)據(jù)轉(zhuǎn)換為XML結(jié)構(gòu)：

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> 節(jié)點(diǎn)中，我們創(chuàng)建了一個(gè)<series>，因?yàn)楫?dāng)我們創(chuàng)建一個(gè)multiseries圖表時(shí)，我們需要更多的series。

在<series>節(jié)點(diǎn)中，我們?yōu)楸碇械拿恳粋€(gè)零售渠道添加了一個(gè)<point> 節(jié)點(diǎn)，輸入名稱及售價(jià)，如<point name = "Department Stores" y="637166"/>，并且設(shè)置series名稱和類型。

三、渲染選項(xiàng)

通過設(shè)置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

如果只設(shè)置了FLASH_ONLY 選項(xiàng)，用戶必須要有Flash Player才能查看AnyChar圖表：　

AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;

如果只設(shè)置了SVG_ONLY選項(xiàng)，只有能顯示SVG對象的瀏覽器才能顯示圖表；

AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;

如果同時(shí)支持FLASH_PREFERRED或者SVG_PREFERRED，你可以設(shè)置優(yōu)先等級。
優(yōu)先使用Flash來顯示：

AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;

優(yōu)先使用SVG來顯示：

AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;

四、HTML文件結(jié)構(gòu)

要查看我們web上的圖表僅剩一步之遙啦~~~~~~

以下是該事例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 = 700;
chart.height = 300;
chart.setXMLFile('./anychart.xml');
chart.write();
//]]>
</script>
</body>
</html>

或者你也可以創(chuàng)建一個(gè)基于JavaScript HTML5 Chart的anychart.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>
<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頁面，復(fù)制上面的一種代碼到頁面里，保存。

運(yùn)行HTML頁面

　　//localhost/AnyChartTest/anychart.html

或者

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

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

　　 anychart,圖表,anychart控件,flash控件,flash圖表,swf,flash,anychart圖表