原創|其它|編輯:郝浩|2012-11-30 16:48:17.000|閱讀 3831 次
概述:本文講解如何用FusionCharts創建透明圖表。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
想讓自己的圖表與眾不同?想創建讓人眼前一亮的圖表?那就試試透明的圖表效果吧。本文就為你講解如何設置 FusionCharts 圖表的透明背景。
創建兩個數據源相同的3D柱狀圖,調用Data文件夾中的SimpleChart.asp 和 Data.xml,修改SimpleChart.asp渲染兩個柱狀圖,示例代碼如下:
<%@ Language=VBScript %> <HTML> <HEAD> <TITLE>FusionCharts XT - Simple Column 3D Chart</TITLE> </HEAD> <!-- #INCLUDE FILE="../Includes/FusionCharts.asp" --> <BODY> <div style="padding:40px; background-color:#9d7fbd; border:1px solid #745C92; width: 600px;"> <% ' Set the chart mode transparent. This will affect all the charts ' Rendered after this declaration. Call SetTransparentChart(True) ' render chart : This will be a transparent chart Call renderChart("../../FusionCharts/Column3D.swf", "Data/Data_Transparent.xml", "", "myFirst_Transparent", 600, 300, false, false) %> <BR /><BR /> <% ' Set the chart mode opaque. This will affect all the charts ' Rendered after this declaration. Call SetTransparentChart(False) ' Render chart : This will be an opaque chart Call renderChart("../../FusionCharts/Column3D.swf", "Data/Data_Transparent.xml", "", "myFirst_Opaque", 600, 300, false, false) %> </div> </BODY> </HTML>
1.首先調用SetTransparentChart(true),將隨后的圖表渲染成透明模式。
2.調用 SetTransparentChart(false),這個語句將所有的圖表設置為不透明模式。
3.將圖表放入一個紫色容器中,確認圖表是否透明。
我將Data_Transparent.xml文件作為兩個圖表的Data URL,對當前的Data.xml作了一些小的修改,設置圖表背景為透明,并將它保存為Data_Transparent.xml。
我們看一下修改后的XML:
<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1' canvasBgAlpha='0' bgAlpha='0'> <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和之前的SimpleChart.asp示例類似,但你發現沒有,bgAlpha 和 canvasBgAlpha 屬性發生了改變。那是因為bgAlpha屬性設置圖表主背景的透明,canvasBgAlpha設置圖表3D畫板的透明。將兩個屬性設置為0,就可以實現完全透明。注意,如果只設置bgAlpha為0,這只實現了背景透明,而沒有實現畫板透明。
設置圖表透明簡單來說需要兩個步驟:首先設置圖表為透明模式,然后設置bgAlpha屬性。
效果如圖所示:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件