原創|其它|編輯:郝浩|2012-05-24 02:06:44.000|閱讀 335 次
概述:Fusion Charts是一款圖表效果絢麗的flash圖表控件, 兼容所有的web技術,如ASP,ASP.NET,PHP,JSP,ColdFusion,Ruby on Rails,JavaScript,甚至簡單的HTML頁面。在本文中,將一步步指導讀者如何使用 Fusion Charts及asp.net去開發圖表應用。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
Fusion Charts是一款圖表效果絢麗的flash圖表控件, 兼容所有的web技術,如ASP,ASP.NET,PHP,JSP,ColdFusion,Ruby on Rails,JavaScript,甚至簡單的HTML頁面。在本文中,將一步步指導讀者如何使用 Fusion Charts及asp.net去開發圖表應用,其中給出了三種結合使用的場景,其中第一種情景是使用XML文件作數據源,第二種是使用用戶 輸入數據的方式,第三種方式是使用連接ACCESS數據庫讀取圖表所需的數據。讀者在閱讀完本文后,應該能掌握如何在ASP.NET中輕松地使用 Fusion Charts圖表工具。
準備工作
由于本文是使用asp.net進行學習,因此我們只關心在code/cs目 錄下的一個FusionCharts.DLL,因為我們將要使用這個DLL文件來加載相關的Fusion Chart功能。同時,本文使用的是 Visual Studio 2010這個工具,同時本文要求讀者已掌握基本的Visual Studio 2010及asp.net的基本知識。
第一種使用方法:使用XML作為圖表數據源
下面介紹第一種使用Fusion Charts的方法,就是使用XML作為圖表數據源。步驟如下:
1) 啟動Visual Studio 2010。
2) 在File菜單中,選擇新建立一個空白的網站,并且選擇c#作為構建語言在項目網站建立后,再在這個項目中新建立一個XML文件,如下:
<chart caption='Indian Premier League Points' xAxisName='Teams' yAxisName='Points'
showValues='0' formatNumberScale='0' showBorder='0'>
<set label='Mumbai Indians' value='16'
/>
<set label='Chennai Super Kings' value='14'
/>
<set label='Kolkata Riders' value='12'
/>
<set label='Bangalore Royals' value='14'
/>
<set label='Kochi Tuskers' value='10'
/>
<set label='Kings XI Punjab' value='10'
/>
</chart>
在這個XML文件中,指定了圖表的X軸及Y軸的名稱,分別是Teams和Points,并且用set label的標簽方法分別指定了6個不同的數據(數據的值用value表示)。
3) 將前面提到的Fusion Charts解壓后的文件夾中包含的code/cs和bin目錄都復制到你的當前項目中,以方便引入Fusion Charts的庫文件和相關JS文件。
4) 在default.aspx代碼中,引入Fusion Charts的JS文件,如下:
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
5) 在default.aspx中添加一個按鈕,一個Literall控件,在按鈕的事件中編寫如下代碼:
Literal1.Text = FusionCharts.RenderChart("FusionCharts/Column3D.swf",
"XMLFile.xml", "", "myFirst", "700", "500", false, true);
在這里,通過調用RenderChart方法,在頁面中輸出相關的柱狀圖,其中指定了數據的來源文件XMLFile.xml,并指定了圖表的尺寸大小。運行工程項目,馬上會得到如下的實際效果圖:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:網絡轉載