日韩大片免费观,国产一区视频在线观看,精品免费观在线国产

Flash圖表組件FusionCharts幫助文檔十二:創建透明圖表

原創|其它|編輯：郝浩|2012-11-30 16:48:17.000|閱讀 3831 次

概述：本文講解如何用FusionCharts創建透明圖表。

相關鏈接：

想讓自己的圖表與眾不同？想創建讓人眼前一亮的圖表？那就試試透明的圖表效果吧。本文就為你講解如何設置 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屬性。

效果如圖所示：

FusionCharts,圖表,透明圖表,柱狀圖