FusionChartFree 圖表[ASP版]

http://tomieric.wordpress.com/2009/12/17/fusionchartfree_about_aspversion/

原來yo2.cn文章被牆了。

fusionchartsFusionChartsFree作為FusionCharts免費版。

唯一缺點是在y軸上不支援中文顯示。

FusionChart支援當今流行的各種web語言，如asp，jsp，php，ruby on rails等。

由於工作需要，找了大量的圖表外掛程式，但有許多不支援中文顯示。選擇了asp，因為自己項目是asp。

類似的有許多圖表都是採取flash讀取xml來實現的，之前也意識到，但js和flash不是很懂。

FusionChartsFree asp精簡版主要由兩個檔案構成。自己翻譯了中文注釋。

 

<!--r />--> '  02 '頁面: FusionCharts.asp  03 '作者: InfoSoft Global (P) Ltd.  04 '@中文注釋 By tomieric  05 '</div>  06 <div>'本頁包含一個可以返回FusionCharts的函數</div>  07 <div>'encodeDataURL函數通過dataURL傳送參數到FusionCharts中。  08 '如果您的dataURL參數已經有參數值，記住一定要進行編碼。  09 '參數: strDataURL - dataURL必須傳送圖表資料（chart data）  10 '參數: addNoCacheStr - 是否添加其它的URL字串的資料禁用緩衝。  11 Function encodeDataURL(strDataURL, addNoCacheStr)  12 '如果需要可以添加無必要字串緩衝  13 if addNoCacheStr=true then  14 '我們添加 ?FCCurrTime=xxyyzz  15 '如果dataURL已經包含一個a ?, 我們添加 &FCCurrTime=xxyyzz  16 '我們要替換"_", 因為 FusionCharts在URLs不能使用包含此字元  17 if Instr(strDataURL,"?")0 then  18 strDataURL = strDataURL & "&FCCurrTime=" & Replace(Now(),":","_")  19 else  20 strDataURL = strDataURL & "?FCCurrTime=" & Replace(Now(),":","_")  21 end if  22 end if  23 ' 將URL進行編碼  24 encodeDataURL = Server.URLEncode(strDataURL)  25 End Function</div>  26 <div>'renderChart函數是通過JavaScript + HTML代碼需要嵌入一個圖表。  27 '假如在您的網頁此函數已經包括了FusionCharts JS類</div>  28 <div>' chartSWF - 圖表的顯示主要通過的SWF檔案名稱 (和路徑)  29 ' strURL - 如果您打算使用dataURL方法顯示圖表, 就通過URL傳送swf檔案路徑. 否則，將其設定為“”（在dataXML方法的情況下）  30 ' strXML - 如果您打算使用dataXML方法顯示圖表, 就利用xml來傳送資料.否則，設定為 "" (在 dataURL 的情況下)  31 ' chartId - 圖表的DIV的ID值, 用於圖表在html頁面中顯示的位置. 每個圖表在html頁面中必須使用一個ID.  32 ' chartWidth - 圖表顯示寬度  33 ' chartHeight -圖表顯示高度 (像素)</div>  34 <div>Function renderChart(chartSWF, strURL, strXML, chartId, chartWidth, chartHeight)  35 '首先我們要為圖表寫一個div. 一般設定div的id為"chartId"Div.  36 'DIV的名稱是區分大小寫.  37 -->  38 <!-- 圖表指令碼塊從 開始 -->  39 <div id="<%=chartId%>Div">Chart.圖表載入中...  40 <!--r />--> '"Chart.圖表載入中..."在圖表未載入完成前顯示，（可以加入進度條圖片等。）  41 '(如果伺服器中的swf檔案載入滯後). "Chart.圖表載入中..."文本也會顯示給使用者  42 '沒有安裝Flash Player.你可以配置它按你的需要（寫一個線上安裝Flash Player或提示下載url）.  43 --></div>  44 <!--r />--> '現在，我們使用FusionCharts圖表類。每個被命名為chart_“chartId”的ID建立圖表的執行個體。  45 -->  46 <!--  47         //執行個體圖，主要利用js讀取xml中的資料  48         var chart_ = new FusionCharts("", "", "", "");  49    50         //設定圖表chart的dataURL值  51         chart_.setDataURL("");  52    53         //提供完整的XML資料使用dataXML方法  54         chart_.setDataXML("");  55    56         //最後反饋到chart圖表中（指傳送xml資料到swf中，flash檔案可以通過xml交換資料。）  57         chart_.render("Div");  58 // -->  59 <!-- 圖表指令碼塊從 結束 -->  60 <!--r />--> End Function</div>  61 <div>'renderChartHTML函數利用JavaScript轉換它成html代碼.  62 '此方法不使用圖表嵌入JavaScript類.  63 '相反，它使用直接的HTML嵌入。  64 '所以，如果你看到的IE 6的圖表（或以上），您會看到在圖表上看到“點擊啟用...”資訊。</div>  65 <div>' chartSWF - 圖表的顯示主要通過的SWF檔案名稱 (和路徑)  66 ' strURL - 如果您打算使用dataURL方法顯示圖表, 就通過URL傳送swf檔案路徑. 否則，將其設定為“”（在dataXML方法的情況下）  67 ' strXML - 如果您打算使用dataXML方法顯示圖表, 就利用xml來傳送資料.否則，設定為 "" (在 dataURL 的情況下)  68 ' chartId - 圖表的DIV的ID值, 用於圖表在html頁面中顯示的位置. 每個圖表在html頁面中必須使用一個ID.  69 ' chartWidth - 圖表顯示寬度  70 ' chartHeight -圖表顯示高度 (像素)</div>  71 <div>Function renderChartHTML(chartSWF, strURL, strXML, chartId, chartWidth, chartHeight)  72 'Generate the FlashVars string based on whether dataURL has been provided  73 'or dataXML.  74 Dim strFlashVars  75 if strXML="" then  76 'DataURL方法  77 strFlashVars = "&chartWidth=" & chartWidth & "&chartHeight=" & chartHeight & "&dataURL=" & strURL  78 else  79 'DataXML方法  80 strFlashVars = "&chartWidth=" & chartWidth & "&chartHeight=" & chartHeight & "&dataXML=" & strXML  81 end if  82 -->  83 <!-- 圖表指令碼塊 開始 -->  84 <div></div>  

 

 

<%'----------------------------------------------------------------------------------'頁面: FC_Colors.asp'作者: InfoSoft Global (P) Ltd.'@中文注釋 By tomieric'----------------------------------------------------------------------------------' 本頁麵包含一個設定FusionCharts的顏色數組'是一個包含的顏色的十六進位代碼數組' 顏色全部使用十六進位表示Dim arr_FCColors(20), FC_ColorCounter'我們先定義一個變數數組，讓它能夠迴圈取出參數值'顏色代碼數組.FC_ColorCounter=0arr_FCColors(0) = "1941A5" '深藍色arr_FCColors(1) = "AFD8F8"arr_FCColors(2) = "F6BD0F"arr_FCColors(3) = "8BBA00"arr_FCColors(4) = "A66EDD"arr_FCColors(5) = "F984A1" arr_FCColors(6) = "CCCC00" '鉻黃+綠arr_FCColors(7) = "999999" '灰色arr_FCColors(8) = "0099CC" '藍影arr_FCColors(9) = "FF0000" '亮紅色 arr_FCColors(10) = "006F00" '深綠色arr_FCColors(11) = "0099FF" '藍色 (淡)arr_FCColors(12) = "FF66CC" '深粉色arr_FCColors(13) = "669966" '綠色arr_FCColors(14) = "7C7CB4" '紫藍色帶陰影arr_FCColors(15) = "FF9933" '橘色arr_FCColors(16) = "9900FF" '紫藍arr_FCColors(17) = "99FFCC" '藍色+淡綠arr_FCColors(18) = "CCCCFF" '淺紫藍arr_FCColors(19) = "669900" '綠色帶陰影'getFCColor方法能夠返回arr_FCColors數值的一個顏色代碼值.'它能迴圈迭代返回一個顏色代碼的索引值。'這個索引值是包含在FC_ColorCounter裡的。Function getFCColor() '更新顏色代碼值FC_ColorCounter = FC_ColorCounter + 1'返回一個顏色代碼值getFCColor = arr_FCColors(FC_ColorCounter mod Ubound(arr_FCColors))End function%>