Flash图表组件FusionCharts帮助文档十二:创建透明图表-控件新闻-慧都网

Flash图表组件FusionCharts帮助文档十二:创建透明图表

原创|其它|编辑：郝浩|2012-11-30 16:48:17.000|阅读 3787 次

概述：本文讲解如何用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,图表,透明图表,柱状图