前面介绍的FusionCharts都是对FusionCharts的基本属性进行操作，下面几篇博文就FusionCharts的高级特性做一个介绍，包括：添加下钻链接、使用Style样式定制图表、网格组件的使用、导出为图片等等。

在我们开发的过程中，我们可能会需要这样一种需求。当客户点击图表的某个柱子时或者圆饼时，可以看到更加详细的信息。对于这样的需求我们称之为下钻。FusionCharts对下钻提供了非常好的支持。在前面我们就知道使用FusionCharts我们只需要关心数据是如何产生的，不需要关系图像是如何生成的，所以下钻对于FusionCharts是非常简单的。对于FusionCharts下钻而言我们只需要添加一个链接即可。

FusionCharts目前支持一下几种下钻形式。

1、同一窗口实现钻取

2、新窗口中实现钻取

3、在指定的frame中实现钻取

4、在弹出窗口实现钻取

5、触发js函数

一、同一窗口实现下钻

想要在FusionCharts中添加链接非常简单，在<set…/>元素中添加link属性即可。如下

<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'>

    <set label='Spain' value='56' color='F6BD0F' link='../myFusionChart_02/newLink.html'/>

    <set label='Germany' value='25' color='FF6600' link='showDetailFCS%3Fname%3DGermany'/>

    <set label='France' value='36' color='8BBA00'link='../myFusionChart_02/newLink.html'/>

    <set label='Italy' value='22' color='F984A1' link='showDetailFCS%3Fname%3DItaly'/>

    <set label='Holland' value='98' color='A66EDD'link='../myFusionChart_02/newLink.html'/>

    <set label='Denmark' value='56' color='B2FF66' link='../myFusionChart_02/newLink.html'/>

    <set label='Sweden' value='44' color='AFD8F8' link='showDetailFCS%3Fname%3DSweden'/>

</chart>

如果把上面的数据用柱状图像来显示的话，就如下图。

当我们把鼠标放在柱子上面时，鼠标会变成链接的形式，点击就可以进入新的页面。

可能有朋友对上面某些link的形式不理解。其实在前面就已经提过由于xml对特殊字符?、&、=不能识别，所以FusionCharts对这些不能支持的特殊字符提供了转义的支持。所以如果link链接中存在如?、&等特殊字符，我们就需要进行解码操作了。

对于：link='showDetailFCS%3Fname%3DSweden'转义之后就会变成：

link='showDetailFCS?name=Sweden'。

二、新窗口中实现下钻

要在新窗口中实现钻取，只需要在link属性的链接值中添加n-即可。如：

Xml Example：

<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'>

    <set label='Spain' value='56' color='F6BD0F' link='n-../myFusionChart_02/newLink.html'/>

    <set label='Germany' value='25' color='FF6600' link='n-../myFusionChart_02/newLink.html'/>

    <set label='France' value='36' color='8BBA00'link='n-../myFusionChart_02/newLink.html'/>

    <set label='Italy' value='22' color='F984A1' link='n-../myFusionChart_02/newLink.html'/>

    <set label='Holland' value='98' color='A66EDD'link='n-../myFusionChart_02/newLink.html'/>

    <set label='Denmark' value='56' color='B2FF66' link='n-../myFusionChart_02/newLink.html'/>

    <set label='Sweden' value='44' color='AFD8F8' link='n-../myFusionChart_02/newLink.html'/>

</chart>

三、在指定的frame中实现钻取

要在frame中显示钻取图像，需要在link属性中添加F-name，其中name表明frame的名称。所以link为:F-frameName.. /myFusionChart_02/newLink.html。

Example XML:

<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'>

    <set label='Spain' value='26' color='F6BD0F' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/>

    <set label='Germany' value='25' color='FF6600' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/>

    <set label='France' value='36' color='8BBA00'link='F-newLinkFrame-../myFusionChart_02/newLink.html'/>

    <set label='Italy' value='22' color='F984A1' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/>

    <set label='Holland' value='44' color='A66EDD'link='F-newLinkFrame-../myFusionChart_02/newLink.html'/>

    <set label='Denmark' value='36' color='B2FF66' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/>

    <set label='Sweden' value='44' color='AFD8F8' link='F-newLinkFrame-../myFusionChart_02/newLink.html'/>

</chart>

Html：

<html>

<head>

</head>

<frameset rows="350,*" cols="*" frameborder="YES" border="1" framespacing="0">

<frame src="../myFusionChart_02/myFusionChart_02.html" name="myFusionChartFrame" scrolling="Auto" noresize >

<frame src="" name="newLinkFrame" scrolling="Auto" noresize>

</frameset>

</html>

点击之前

点击之后

四、在弹出窗口实现钻取

在弹出窗口实现钻取使用p-。例如

这里P-表示在弹出窗口中显示。

111111表示弹出窗口的名字。

width=600,height=500,toolbar=no, scrollbars=no:弹出窗口的各个属性值。

resizable=no-../myFusionChart_02/newLink.html 链接的内容

可指定弹出窗口的属性：

height：弹出窗口高度，pixels

width: 宽度

resizable：窗口大小是否可变，若=yes表示可通过拖动边或角进行窗口的放大或缩小；Value = yes or no, 1 or 0.

Scrollbars：是否显示横向和纵向滚动条，Value = yes or no, 1 or 0.

Menubar：是否在顶部显示菜单栏，Value = yes or no, 1 or 0.

Toolbar：是否显示工具条，包括前进、后退、停止等工具按钮，Value = yes or no, 1 or 0.

Location：是否显示url地址栏，Value = yes or no, 1 or 0.

Directories：是否显示附加工具条，Value = yes or no, 1 or 0.

Status：是否在页面下方显示状态栏， Value = yes or no, 1 or 0.

Left：指定弹出窗口距左侧宽度，单位pixels，此属性应用于IE，Netscape用screenX

Top：指定弹出窗口距顶部宽度，单位pixels，此属性应用于IE，Netscape用screenY

Fullscreen：是否以全屏打开，只用于ie；

<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'>

    <set label='Spain' value='26' color='F6BD0F' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/>

    <set label='Germany' value='25' color='FF6600' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/>

    <set label='France' value='36' color='8BBA00'link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/>

    <set label='Italy' value='22' color='F984A1' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/>

    <set label='Holland' value='44' color='A66EDD'link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/>

    <set label='Denmark' value='36' color='B2FF66' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/>

    <set label='Sweden' value='44' color='AFD8F8' link='P-111111,width=600,height=500,toolbar=no, scrollbars=no,resizable=no-../myFusionChart_02/newLink.html'/>

</chart>

五、触发js函数

除了使用上面的链接形式，FusionCharts还支持javascript函数来触发。使用方法

j-：触发js函数myJS(),注意，其中不能用分号。

或者

FusionCharts v3.1以上版本，还可用下面这种形式j-{user function name}-{parameter}：

Example XML

<chart caption='Decline in Net Interest Margins of Banks (1995-2005)'>

    <set label='Spain' value='26' color='F6BD0F' link="JavaScript:showData('Spain,26')"/>

    <set label='Germany' value='25' color='FF6600'link="JavaScript:showData('Germany,25')"/>

    <set label='France' value='36' color='8BBA00'link="JavaScript:showData('France,36')"/>

    <set label='Italy' value='22' color='F984A1' link="JavaScript:showData('Italy,22')"/>

    <set label='Holland' value='44' color='A66EDD'link="JavaScript:showData('Holland,44')"/>

    <set label='Denmark' value='36' color='B2FF66'link="JavaScript:showData('Denmark,36')"/>

    <set label='Sweden' value='44' color='AFD8F8' link="JavaScript:showData('Sweden,44')"/>

</chart>

HTML

<html>

    <head>

        <title>这是第一个fusionChart 图形</title>

        <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>

        <script>

            function showData(value){

                alert(value);

            }

        </script>

    </head>

    <body bgcolor="#ffffff">

        <div id="chartdiv_01" align="center"></div>

        <script type="text/javascript">

            var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId_01", "600", "500");

        myChart.setDataURL("Data.xml");

        myChart.render("chartdiv_01");

        </script>

    </body>

</html>

FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能的更多相关文章

FusionCharts简单教程(三)-----如何自定义图表上的工具提示
最近有蛮多人总是问我这个FusionCharts制表的问题,帮助他们解决之后,在昨晚发现以前整理的笔记中有这个简单教程,而且以前也发表了几篇这个博文,所以就将其全部上传上来供别人参考.如有不正确之处望 ...
FusionCharts简单教程(八)-----使用网格组件
有时候我们会觉得使用图像不够直接,对于数据的显示没有表格那样直接明了.所以这里就介绍如何使用网格组件.将网格与图像结合起来.网格组件能够将FusionCharts中的单序列数据以列表的 ...
FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
FusionCharts简单教程（一）---建立第一个FusionCharts图形
由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...
FusionCharts简单教程---建立第一个FusionCharts图形
由于项目需求需要做一个报表,选择FusionCharts作为工具使用.由于以前没有接触过报表,网上也没有比较详细的fusionCharts教程,所以决定好好研究FusionCharts,同时做一个比较 ...
FusionCharts简单教程(三)-----FusionCharts的基本属性
通过前面两章的讲解我们可以制作出简单的图像,但是有时候我们需要对图像进行一个精确的规划,比如设置背景颜色.设置提示信息.设置间隔颜色等等,这时就需要我们对FusionCharts的细节有比 ...
FusionCharts简单教程（五）-----FusionCharts中的那些特殊符号
在FusionCharts中有些特殊字符,我们需要进行编码操作才能够使用,否则就无法正常显示. 欧元符号在FusionCharts里显示"€",你需要用 ...
FusionCharts简单教程(六)------加载外部Logo
一.加载外部文件Logo 在使用FusionCharts时,我们可能需要在加载图像的时候需要在图表中显示标识.图片等等.这里我们可以使用logoURL属性来实现.如: <chart ...
FusionCharts简单教程(六)-----如何自定义图表上的工具提示
所谓图表上的工具提示就是当鼠标放在某个特定的数据块上时所显示的提示信息.如下: 禁用显示工具提示在默认情况下工具提示功能是显示的,但是有时候我们并不是很想需要这个功能提示功能 ...

随机推荐

springMVC 相对于 Structs 的优势
智者说,没有经过自己的思考和估量,就不能接受别人的东西.资料只能是一个参考,至于是否正确,还得自己去分辨 SpringMVC相对于Structs的几个优势: 1.springMVC安全性更高,stru ...
一起买Beta版本系列文档
一起买beta版本文档报告汇总 031402401鲍亮 031402402曹鑫杰 031402403常松 031402412林淋 031402418汪培侨 031402426许秋鑫一.Beta版本冲 ...
【java】：常用工具类
PS; 平时用到的一些工具类,验证非空.字符切割.时间转换.金额转换 package com.jws.common.util; import java.io.UnsupportedEncodingEx ...
freeCodeCamp:Chunky Monkey
猴子吃香蕉可是掰成好几段来吃哦! 把一个数组arr按照指定的数组大小size分割成若干个数组块. 例如:chunk([1,2,3,4],2)=[[1,2],[3,4]]; chunk([1,2,3,4 ...
Some About Spring
什么是Spring:Spring是一个从实际开发中抽取出来的框架,它对代码中需要重复解决的步骤抽象成为了一个框架.留给开发者的仅仅是与特定应用相关的部分,大大提高了企业应用的开发效率.例外.Sprin ...
C# "=="、Equals()、ReferenceEquals()区别
对于值类型: ; ; 1.== 比较的是值内容 2.age2.Equals(age1) = false; Equals比较前需要转换成同类型,age1(int型)需显示转换成byte型 3.age1. ...
InnoDB配置文件复习
1.文件分类 1.参数文件 2.日志文件 3.socket文件 4.pid文件 5.MySQL表文件 6.存储引擎文件 1.参数文件 1.参数内容写在my.cnf中,每次MySQL实例启动时,载入my ...
linux 重新编译低版本gcc
编程实践中,可能会遇到需要较低版本gcc以兼容相应程序的需求,这时就需要我们将系统中默认的gcc版本较低,或者重新编译生成.(UBUNTU12.04下实现gcc4.2.3) 方法1: 对于UBUNTU ...
VHDL生成的ngc文件被verilog的工程调用的问题
1. 问题的提出工程a是一个soft core,用VHDL写的,综合的时候去掉了"Add I/O buffers" ,并将-iob(Pack I/O Registers into ...
C# 通过服务启动窗体（把窗体添加到服务里）实现用户交互的windows服务[转发]
由于个人需要,想找一个键盘记录的程序,从网上下载了很多,多数都是需要注册的,另外也多被杀软查杀.于是决定自己写一个,如果作为一个windows应用程序,可以实现抓取键盘的记录.想要实现随系统启动的话, ...

FusionCharts简单教程(七)-----使用FusionCharts实现下钻功能

一、 同一窗口实现下钻

二、 新窗口中实现下钻

三、 在指定的frame中实现钻取

四、 在弹出窗口实现钻取

五、 触发js函数