97超碰人人操人人干,国产福利在线视频导航,国产白浆视频

用AnyChart控件創建flash圖表步驟詳解

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

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

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

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 <?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圖表：　

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頁面的代碼：

<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：

<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頁面

　　//localhost/AnyChartTest/anychart.html

或者

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

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

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