FusionCharts使用教程:为图表添加向下钻取连接

FusionCharts中的全部图表都支持向下钻取功能。这意味着你能够将单个数据图(柱状图中的柱形、饼图中的扇形)或者整个图表转换成热点(或连接)。从广义上来说,FusionCharts图表向下钻取功能能够分为两种类型:html

一、Simple link:向下钻取至一个简单连接或调用JavaScript函数。
 二、Chart links (LinkedCharts):向下钻取至一个详细的LinkedCharts。函数

使用FusionCharts图表组件,能够无限层级向下钻取图表,且每个层级可显示不一样类型的图表。htm

使用简单连接对象

使用简单连接,您能够在图表上每一个数据项(列,线锚,锚区,扇形等)的连接页面(或JavaScript函数)提供一个URL。简单连接能够是各类数据格式。ip

  • 利用XML建立简单连接get

将连接属性引入<set>元素中,能够将数据图转换为连接,例如:io

<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>function

  • 使用JSON建立简单连接scroll

若是你使用JSON建立连接,你必须将连接属性添加至数据对象,方法以下:方法

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

相关文章
相关标签/搜索