所有的 FusionCharts 圖表（除了變焦線圖表）都支持向下鉆取功能，我們可以將單個(gè)數(shù)據(jù)塊（如柱狀圖中的列，餅圖中的扇形圖等）或者整個(gè)圖表轉(zhuǎn)換為熱點(diǎn)或鏈接。這些可以打開(kāi)的URLs，是通過(guò)調(diào)用JavaScript函數(shù)或加載LinkedCharts來(lái)實(shí)現(xiàn)的。在FusionCharts上可以創(chuàng)建無(wú)限層級(jí)的向下鉆取，而且對(duì)所有需求都是通用的。

一般來(lái)說(shuō)，F(xiàn)usionCharts的向下鉆取功能又可以分為兩類(lèi)：
1、簡(jiǎn)單鏈接：向下鉆取打開(kāi)簡(jiǎn)單的URLs或調(diào)用JavaScript函數(shù)（呈現(xiàn)在同一個(gè)頁(yè)面）
2、圖表鏈接(LinkedCharts)：向下鉆取到詳細(xì)的LinkedCharts

本文首先將為你介紹簡(jiǎn)單鏈接的創(chuàng)建方式。

簡(jiǎn)單鏈接

用簡(jiǎn)單鏈接，我們可以把每個(gè)數(shù)據(jù)項(xiàng)要鏈接的頁(yè)面（或JavaScript函數(shù)）添加一個(gè)URL地址。主要有以下幾種類(lèi)型：

• 在相同頁(yè)面打開(kāi)URL
• 在新窗口打開(kāi)URL
• 在指定的frame/iframe打開(kāi)URL
• 在新的彈出窗口打開(kāi)URL
• 鏈接調(diào)用JavaScript函數(shù)(要么在FusionCharts JavaScript類(lèi)或在同一個(gè)web頁(yè)面呈現(xiàn))
• 設(shè)置整個(gè)圖表為一個(gè)熱點(diǎn)，并應(yīng)用以上任何一種鏈接方式

用XML創(chuàng)建簡(jiǎn)單鏈接

將link屬性放到<set>元素下，把數(shù)據(jù)圖轉(zhuǎn)換為一個(gè)鏈接，示例代碼如下：

<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'>
  <set label='Jan' value='17400' link='DemoLinkPages/DemoLink1.html'/> <!-- Simple Link -->
  <set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/> <!-- Link in new window -->
  <set label='Mar' value='21800' link='F-detailsFrame-DemoLinkPages/DemoLink3.htm'/> <!-- Link in a frame -->
  <set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no, 
    scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/> <!-- Link in a pop-up -->
  <set label='May' value='29600' link='j-myJavaScriptFunction-parameters'/> <!-- JavaScript function as link -->
</chart>

用JSON創(chuàng)建簡(jiǎn)單鏈接

同樣的，如果想用JSON數(shù)據(jù)代替XML，就必須將link屬性添加到數(shù)據(jù)項(xiàng)下，示例代碼如下：

{
  "chart":{
    "caption":"Monthly Sales Summary",
    "subcaption":"For the year 2006",
    "xaxisname":"Month",
    "yaxisname":"Sales",
    "numberprefix":"$"
  },
  "data":[
    { "label":"Jan", "value":"17400", "link":"DemoLinkPages/DemoLink1.html" },
    { "label":"Feb", "value":"19800", "link":"n-DemoLinkPages/DemoLink2.html" },
    { "label":"Mar", "value":"21800", "link":"F-detailsFrame-DemoLinkPages/DemoLink3.htm" },
    { "label":"Apr", "value":"23800", "link":"P-detailsPopUp,width=400,height=300,toolbar=no," +
         "scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html" },
    { "label":"May", "value":"29600", "link":"j-myJavaScriptFunction-parameters"  }
  ]
}