文档章节

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

f
 flyingsnail
发布于 2014/04/17 11:51
字数 483
阅读 1165
收藏 0

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

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

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

使用简单链接

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

  • 利用XML创建简单链接

将链接属性引入<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创建链接,你必须将链接属性添加至数据对象,方法如下:

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

© 著作权归作者所有

f
粉丝 0
博文 15
码字总数 12962
作品 0
沙坪坝
私信 提问
加载中

评论(1)

贤胜
贤胜
你好,我最近在做fusioncharts图表, 图表钻取到图表的功能,用linkedCharts 实现的,APi只有从前台写死的那种 。没有前后台交互的,可否指点一二
Flash图表组件FusionCharts使用教程大全

Flash图表组件FusionCharts使用教程一:调用静态方法RenderChart Flash图表组件FusionCharts使用教程二:为饼图/环形图添加图例 Flash图表组件FusionCharts使用教程三:在iPhone/iPad中生成J...

lanmeimei
2013/01/09
2.1K
5
Flash图表FusionCharts & Open Flash Chart选型分析

对企业而言,选择一款合适的图表控件是一项非常复杂的任务,因为所选择的图表控件不仅要符合目前的需求还需要考虑未来的需求变化因素。所以,在选择Flash图表的时候,你常常需要评估以下几点...

Leamontea
2012/11/30
0
0
FusionCharts图表控件常见问题解答FAQ

由于最近有不少网友咨询FusionCharts图表的一些常见问题,如安装和配置,导出格式,数据源等等,因此慧都小编特意整理了一些FusionCharts的FAQ供大家参考。>>>下最新版FusionCharts v3.2.2-S...

panda456
2013/01/17
0
0
2012年度FusionCharts图表控件最受欢迎文章精选(上)

本文主要整理了2012年度FusionCharts图表控件最受欢迎的文章,如使用教程,帮助文档,实例,演示,下载地址,参数大全,选型对比等等,希望对FusionCharts使用者有帮助,欢迎交流与评论! Fu...

nautygirl
2013/01/15
0
0
FusionCharts使用教程:事件API总结

1、FusionCharts API:Initialize(初始化)事件 提示用户FusionCharts图表组件相关的Flash和JS文件等等是否准备就绪,能够创建FusionCharts图表对象。 ///添加初始化完成的事件Initialized...

flyingsnail
2014/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IPv4如何转换为IPv6?

导读 ipv6已经逐渐在应用,现在已经有很多的运营商支持ipv6,前天我们也发布了如何让电脑使用ipv6地址?有很多朋友在问?ipv6有什么作用,它的表示方式是什么,今天我们来一起来详细了解下ipv...

问题终结者
4分钟前
0
0
SpringBoot2.0高级案例(05):整合 Swagger2 ,构建接口管理界面

一、Swagger2简介 1、Swagger2优点 整合到Spring Boot中,构建强大RESTful API文档。省去接口文档管理工作,修改代码,自动更新,Swagger2也提供了强大的页面测试功能来调试RESTful API。 2、...

知了一笑
16分钟前
2
0
关于观察者模式总结

观察者模式(发布订阅模式):在对象之间定义一对多的依赖,这样一来,当一个对象改变状态,依赖他的对象都会收到通知,并自动更新。 使用场景:当一个对象状态改变同时需要改变其他对象,且...

cherryboy
22分钟前
0
0
Gradle Sync太慢?你需要使用阿里云仓库服务的代理仓库地址代替jcenter()、maven

在天朝使用jcenter、mavenCentral及google三个远程仓库,Gradle Sync会很慢,goole仓库甚至需要科学上网才能访问。为了加快Gradle Sync速度,一招教你优先用 阿里云仓库服务 的仓库作为下载源...

丁佳辉
35分钟前
2
0
maven打包后运行提示“没有主清单属性”的解决办法

在项目的pom.xml文件里添加如下内容: <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>m......

shatian
37分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部