前面介紹的FusionCharts都是對FusionCharts的基本屬性進行操作，下面幾篇博文就FusionCharts的高級特性做一個介紹，包括：添加下鑽鏈接、使用Style樣式定制圖表、網格組件的使用、導出為圖片等等。
在我們開發的過程中，我們可能會需要這樣一種需求。當客戶點擊圖表的某個柱子時或者圓餅時，可以看到更加詳細的信息。對於這樣的需求我們稱之為下鑽。FusionCharts對下鑽提供了非常好的支持。在前面我們就知道使用FusionCharts我們只需要關心數據是如何產生的，不需要關系圖像是如何生成的，所以下鑽對於FusionCharts是非常簡單的。對於FusionCharts下鑽而言我們只需要添加一個鏈接即可。
FusionCharts目前支持一下幾種下鑽形式。
1、 同一窗口實現鑽取
2、 新窗口中實現鑽取
3、 在指定的frame中實現鑽取
4、 在彈出窗口實現鑽取
5、 觸發js函數
一、 同一窗口實現下鑽
想要在FusionCharts中添加鏈接非常簡單，在<set…/>元素中添加link屬性即可。如下
<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='56' color='F6BD0F' link='../myFusionChart_02/newLink.html'/> <set label='Germany' value='25' color='FF6600' link='showDetailFCS%3Fname%3DGermany'/> <set label='France' value='36' color='8BBA00'link='../myFusionChart_02/newLink.html'/> <set label='Italy' value='22' color='F984A1' link='showDetailFCS%3Fname%3DItaly'/> <set label='Holland' value='98' color='A66EDD'link='../myFusionChart_02/newLink.html'/> <set label='Denmark' value='56' color='B2FF66' link='../myFusionChart_02/newLink.html'/> <set label='Sweden' value='44' color='AFD8F8' link='showDetailFCS%3Fname%3DSweden'/> </chart>
如果把上面的數據用柱狀圖像來顯示的話，就如下圖。
當我們把鼠標放在柱子上面時，鼠標會變成鏈接的形式，點擊就可以進入新的頁面。
可能有朋友對上面某些link的形式不理解。其實在前面就已經提過由於xml對特殊字符?、&、=不能識別，所以FusionCharts對這些不能支持的特殊字符提供了轉義的支持。所以如果link鏈接中存在如?、&等特殊字符，我們就需要進行解碼操作了。
對於：link='showDetailFCS%3Fname%3DSweden'轉義之后就會變成：
link='showDetailFCS?name=Sweden'。
二、 新窗口中實現下鑽
要在新窗口中實現鑽取，只需要在link屬性的鏈接值中添加n-即可。如：
<set label='France' value='36' color='8BBA00'link='n-../myFusionChart_02/newLink.html'/>
Xml Example：
<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='56' color='F6BD0F' link='n-../myFusionChart_02/newLink.html'/> <set label='Germany' value='25' color='FF6600' link='n-../myFusionChart_02/newLink.html'/> <set label='France' value='36' color='8BBA00'link='n-../myFusionChart_02/newLink.html'/> <set label='Italy' value='22' color='F984A1' link='n-../myFusionChart_02/newLink.html'/> <set label='Holland' value='98' color='A66EDD'link='n-../myFusionChart_02/newLink.html'/> <set label='Denmark' value='56' color='B2FF66' link='n-../myFusionChart_02/newLink.html'/> <set label='Sweden' value='44' color='AFD8F8' link='n-../myFusionChart_02/newLink.html'/> </chart>
三、 在指定的frame中實現鑽取
要在frame中顯示鑽取圖像，需要在link屬性中添加F-name，其中name表明frame的名稱。所以link為:F-frameName.. /myFusionChart_02/newLink.html。
Example XML:
<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='26' color='F6BD0F' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Germany' value='25' color='FF6600' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='France' value='36' color='8BBA00'link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Italy' value='22' color='F984A1' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Holland' value='44' color='A66EDD'link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Denmark' value='36' color='B2FF66' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> <set label='Sweden' value='44' color='AFD8F8' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/> </chart>
Html：
<html> <head> </head> <frameset rows="350,*" cols="*" frameborder="YES" border="1" framespacing="0"> <frame src="../myFusionChart_02/myFusionChart_02.html" name="myFusionChartFrame" scrolling="Auto" noresize > <frame src="" name="newLinkFrame" scrolling="Auto" noresize> </frameset> </html>
點擊之前
點擊之后
四、 在彈出窗口實現鑽取
在彈出窗口實現鑽取使用p-。例如
<set label='Spain' value='26' color='F6BD0F' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/>
這里P-表示在彈出窗口中顯示。
111111表示彈出窗口的名字。
width=600,height=500,toolbar=no, scrollbars=no:彈出窗口的各個屬性值。
resizable=no-../myFusionChart_02/newLink.html 鏈接的內容
可指定彈出窗口的屬性：
height：彈出窗口高度，pixels
width: 寬度
resizable：窗口大小是否可變，若=yes表示可通過拖動邊或角進行窗口的放大或縮小；Value = yes or no, 1 or 0.
Scrollbars：是否顯示橫向和縱向滾動條，Value = yes or no, 1 or 0.
Menubar：是否在頂部顯示菜單欄，Value = yes or no, 1 or 0.
Toolbar：是否顯示工具條，包括前進、后退、停止等工具按鈕，Value = yes or no, 1 or 0.
Location：是否顯示url地址欄，Value = yes or no, 1 or 0.
Directories：是否顯示附加工具條，Value = yes or no, 1 or 0.
Status：是否在頁面下方顯示狀態欄， Value = yes or no, 1 or 0.
Left：指定彈出窗口距左側寬度，單位pixels，此屬性應用於IE，Netscape用screenX
Top：指定彈出窗口距頂部寬度，單位pixels，此屬性應用於IE，Netscape用screenY
Fullscreen：是否以全屏打開，只用於ie；
<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='26' color='F6BD0F' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Germany' value='25' color='FF6600' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='France' value='36' color='8BBA00'link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Italy' value='22' color='F984A1' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Holland' value='44' color='A66EDD'link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Denmark' value='36' color='B2FF66' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> <set label='Sweden' value='44' color='AFD8F8' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/> </chart>
五、 觸發js函數
除了使用上面的鏈接形式，FusionCharts還支持javascript函數來觸發。使用方法
<set label='USA' value='235' link="j- showData (' Spain’,26)"/>
j-：觸發js函數myJS(),注意，其中不能用分號。
或者
<set label='USA' value='235' link=" JavaScript:showData('Spain,26')"/>
FusionCharts v3.1以上版本，還可用下面這種形式j-{user function name}-{parameter}：
<set label='USA' value='235' link="j- showData – Spain,26"/>
Example XML
<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'> <set label='Spain' value='26' color='F6BD0F' link="JavaScript:showData('Spain,26')"/> <set label='Germany' value='25' color='FF6600'link="JavaScript:showData('Germany,25')"/> <set label='France' value='36' color='8BBA00'link="JavaScript:showData('France,36')"/> <set label='Italy' value='22' color='F984A1' link="JavaScript:showData('Italy,22')"/> <set label='Holland' value='44' color='A66EDD'link="JavaScript:showData('Holland,44')"/> <set label='Denmark' value='36' color='B2FF66'link="JavaScript:showData('Denmark,36')"/> <set label='Sweden' value='44' color='AFD8F8' link="JavaScript:showData('Sweden,44')"/> </chart>
HTML
<html> <head> <title>這是第一個fusionChart 圖形</title> <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script> <script> function showData(value){ alert(value); } </script> </head> <body bgcolor="#ffffff"> <div id="chartdiv_01" align="center"></div> <script type="text/javascript"> var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId_01", "600", "500"); myChart.setDataURL("Data.xml"); myChart.render("chartdiv_01"); </script> </body> </html>
