原創(chuàng)|其它|編輯:郝浩|2013-01-16 14:53:57.000|閱讀 2085 次
概述:在ASP中使用FusionCharts可以繪制動(dòng)態(tài)數(shù)據(jù)驅(qū)動(dòng)圖表。在本文中,我們將通過(guò)一些簡(jiǎn)單的代碼示例來(lái)幫助你了解如何在ASP中使用FusionCharts XT創(chuàng)建一個(gè)3D圖表并熟悉相關(guān)圖表參數(shù)。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>
相關(guān)鏈接:
在ASP中使用FusionCharts可以繪制動(dòng)態(tài)數(shù)據(jù)驅(qū)動(dòng)圖表。在本文中,我們將通過(guò)一些簡(jiǎn)單的代碼示例來(lái)幫助你了解如何在ASP中使用FusionCharts XT創(chuàng)建一個(gè)3D圖表并熟悉相關(guān)圖表參數(shù)。>>>下載最新版FusionCharts v3.2.2-SR5
在我們的代碼中,我們需要使用圖表和JavaScript類文件。它們包含在Download Package > Code > FusionCharts 文件夾中。當(dāng)你運(yùn)行示例時(shí),你需要確認(rèn)SWF文件處于正確的位置。
在這個(gè)例子中,我們將使用Data URL 方法來(lái)創(chuàng)建一個(gè)"Monthly Unit Sales"。首先,我們需要在XML數(shù)據(jù)文件的Data.xml 文件中手動(dòng)編寫(xiě)XML數(shù)據(jù),然后,然后將其利用到ASP頁(yè)面 (SimpleChart.asp)的圖表上。
XML數(shù)據(jù)文件的代碼如下:
<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數(shù)據(jù)文件被存放在BasicExample文件夾中的Data文件夾中。該數(shù)據(jù)文件中基本包含了"Monthly Unit Sales"單系列圖表所需要的數(shù)據(jù)。我們將使用這些數(shù)據(jù)來(lái)繪制一個(gè)3D圖表。
要繪制包含了上述數(shù)據(jù)的3D圖表,你需要將 HTML 和JavaScript 代碼嵌入到圖表對(duì)象,然后提供必要的參數(shù)。為了簡(jiǎn)化操作, ASP函數(shù)renderChart()中的包含了該功能。renderChart()函數(shù)位于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>
根據(jù)上述代碼可知,我們需要具備以下幾點(diǎn):
1、擁有可幫助我們創(chuàng)建圖表的FusionCharts.asp。
2、需要添加FusionCharts.js文件,用于生成圖表,處理事件以及提供高級(jí)功能。
3、調(diào)用renderChart函數(shù)渲染圖表。要實(shí)現(xiàn)次該功能,你需要使用下列參數(shù):
chartSWF參數(shù):你即將繪制的圖表的SWF文件名和路徑。在本文中,我們將繪制一個(gè)3D圖表,所以我們需要指定:../../FusionCharts/Column3D.swf
dataUrl參數(shù):如果你想使用Data URL方法,你需要將URL作為參數(shù)。否則,將其設(shè)置為“”。在本文中,我們使用了Data.xml 文件,所以我們指定:Data/Data.xml。
dataStr參數(shù):如果你想使用 Data String 方法,你需要將 XML/JSON Data String作為參數(shù)。
chartId參數(shù):圖表ID,每個(gè)圖表的ID是唯一的。考慮到瀏覽器的兼容性,建議圖表ID不要以數(shù)值和空格開(kāi)頭。
chartWidth參數(shù):圖表寬度(像素或百分比),如"400"或者"100%"。
chartHeight參數(shù):圖表高度(像素或百分比),如"400"或者"100%"。
debugMode參數(shù):是否啟動(dòng)調(diào)試模式中的圖表。同意啟動(dòng)設(shè)置為T(mén)rue,不同意設(shè)置為False。
registerWithJS參數(shù):是否注冊(cè)JavaScript圖表。該參數(shù)值始終被設(shè)置為T(mén)rue。
擴(kuò)展閱讀:
FusionCharts參數(shù)大全及詳細(xì)說(shuō)明(中文)
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:慧都控件網(wǎng)