彩票走势图

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

原创|其它|编辑:郝浩|2012-11-20 13:21:54.000|阅读 2805 次

概述:本文为你介绍创建FusionCharts向下钻取简单链接的两种方式,并提供XML和JSON示例代码。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

所有的 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"  }
  ]
}

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都控件

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP