Flash图表组件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属性。
效果如图所示：
