Flash图表组件FusionCharts帮助文档八：添加向下钻取链接

所有的 FusionCharts 图表（除了变焦线图表）都支持向下钻取功能，我们可以将单个数据块（如柱状图中的列，饼图中的扇形图等）或者整个图表转换为热点或链接。这些可以打开的URLs，是通过调用JavaScript函数或加载LinkedCharts来实现的。在FusionCharts上可以创建无限层级的向下钻取，而且对所有需求都是通用的。

一般来说，FusionCharts的向下钻取功能又可以分为两类：
1、简单链接：向下钻取打开简单的URLs或调用JavaScript函数（呈现在同一个页面）
2、图表链接(LinkedCharts)：向下钻取到详细的LinkedCharts

本文首先将为你介绍简单链接的创建方式。

简单链接

用简单链接，我们可以把每个数据项要链接的页面（或JavaScript函数）添加一个URL地址。主要有以下几种类型：

• 在相同页面打开URL
• 在新窗口打开URL
• 在指定的frame/iframe打开URL
• 在新的弹出窗口打开URL
• 链接调用JavaScript函数(要么在FusionCharts JavaScript类或在同一个web页面呈现)
• 设置整个图表为一个热点，并应用以上任何一种链接方式

用XML创建简单链接

将link属性放到<set>元素下，把数据图转换为一个链接，示例代码如下：

<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创建简单链接

同样的，如果想用JSON数据代替XML，就必须将link属性添加到数据项下，示例代码如下：

{
  "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"  }
  ]
}