原創|其它|編輯:郝浩|2013-01-16 14:53:57.000|閱讀 2085 次
概述:在ASP中使用FusionCharts可以繪制動態數據驅動圖表。在本文中,我們將通過一些簡單的代碼示例來幫助你了解如何在ASP中使用FusionCharts XT創建一個3D圖表并熟悉相關圖表參數。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
在ASP中使用FusionCharts可以繪制動態數據驅動圖表。在本文中,我們將通過一些簡單的代碼示例來幫助你了解如何在ASP中使用FusionCharts XT創建一個3D圖表并熟悉相關圖表參數。>>>下載最新版FusionCharts v3.2.2-SR5
在我們的代碼中,我們需要使用圖表和JavaScript類文件。它們包含在Download Package > Code > FusionCharts 文件夾中。當你運行示例時,你需要確認SWF文件處于正確的位置。
在這個例子中,我們將使用Data URL 方法來創建一個"Monthly Unit Sales"。首先,我們需要在XML數據文件的Data.xml 文件中手動編寫XML數據,然后,然后將其利用到ASP頁面 (SimpleChart.asp)的圖表上。
XML數據文件的代碼如下:
<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1'> <set label='Jan' value='462' /> <set label='Feb' value='857' /> <set label='Mar' value='671' /> <set label='Apr' value='494' /> <set label='May' value='761' /> <set label='Jun' value='960' /> <set label='Jul' value='629' /> <set label='Aug' value='622' /> <set label='Sep' value='376' /> <set label='Oct' value='494' /> <set label='Nov' value='761' /> <set label='Dec' value='960' /> </chart>
該XML數據文件被存放在BasicExample文件夾中的Data文件夾中。該數據文件中基本包含了"Monthly Unit Sales"單系列圖表所需要的數據。我們將使用這些數據來繪制一個3D圖表。
要繪制包含了上述數據的3D圖表,你需要將 HTML 和JavaScript 代碼嵌入到圖表對象,然后提供必要的參數。為了簡化操作, ASP函數renderChart()中的包含了該功能。renderChart()函數位于Download Package > Code > ASP > Includes > FusionCharts.asp文件夾中。
SimpleChart.asp文件中包含以下可用于渲染圖表的代碼:
<% 'We've included ../Includes/FusionCharts.asp, which contains functions 'to help us easily embed the charts. %> <!-- #INCLUDE FILE="../Includes/FusionCharts.asp" --> <HTML> <HEAD> <% 'You need to include the following JS file, if you intend to embed the chart using JavaScript. 'When you make your own charts, make sure that the path to this JS file is correct. Else, you 'will get JavaScript errors. %> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT> <TITLE>FusionCharts XT - Simple Column 3D Chart</TITLE> </HEAD> <BODY> <% 'Create the chart - Column 3D Chart with data from Data/Data.xml Call renderChart("../../FusionCharts/Column3D.swf", "Data/Data.xml", "", "myFirst", 600, 300, False, True) %> </BODY> </HTML>
根據上述代碼可知,我們需要具備以下幾點:
1、擁有可幫助我們創建圖表的FusionCharts.asp。
2、需要添加FusionCharts.js文件,用于生成圖表,處理事件以及提供高級功能。
3、調用renderChart函數渲染圖表。要實現次該功能,你需要使用下列參數:
chartSWF參數:你即將繪制的圖表的SWF文件名和路徑。在本文中,我們將繪制一個3D圖表,所以我們需要指定:../../FusionCharts/Column3D.swf
dataUrl參數:如果你想使用Data URL方法,你需要將URL作為參數。否則,將其設置為“”。在本文中,我們使用了Data.xml 文件,所以我們指定:Data/Data.xml。
dataStr參數:如果你想使用 Data String 方法,你需要將 XML/JSON Data String作為參數。
chartId參數:圖表ID,每個圖表的ID是唯一的。考慮到瀏覽器的兼容性,建議圖表ID不要以數值和空格開頭。
chartWidth參數:圖表寬度(像素或百分比),如"400"或者"100%"。
chartHeight參數:圖表高度(像素或百分比),如"400"或者"100%"。
debugMode參數:是否啟動調試模式中的圖表。同意啟動設置為True,不同意設置為False。
registerWithJS參數:是否注冊JavaScript圖表。該參數值始終被設置為True。
擴展閱讀:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網