前面介绍的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简单教程(六)-----如何自定义图表上的工具提示
所谓图表上的工具提示就是当鼠标放在某个特定的数据块上时所显示的提示信息.如下: 禁用显示工具提示在默认情况下工具提示功能是显示的,但是有时候我们并不是很想需要这个功能提示功能 ...

随机推荐

Sql Server 行转列
--摘自百度 PIVOT用于将列值旋转为列名(即行转列),在SQL Server 2000可以用聚合函数配合CASE语句实现 PIVOT的一般语法是:PIVOT(聚合函数(列) FOR 列 in (… ...
PHP 汉字转拼音类
本文转载自:http://www.epubit.com.cn/article/867 <?php function Pinyin($_String, $_Code='gb2312') { $_D ...
[linux]windows无法访问samba的安全性问题(关闭selinux)
背景在某一天重启了虚拟机的 linux 之后,我的 windows 在连接上 samba 之后,点击某些文件夹的时候,会出现没有权限打开的情况.这问题折腾了我一度重新配置了好几次 samba 的配置 ...
linuxMint下面的截图工具
sudo apt-get install shutter 然后配合系统快捷键,我定义的和qq的截屏一样的.用着感觉很舒服.
kernel 对浮点的支持
http://blog.chinaunix.net/uid-22545494-id-316735.html 作者: Sam(甄峰) sam_code@hotmail.com 一:早期ARM上的浮点模 ...
window.innerWidth、document.body.clientWidth和html的大小的区别
首先,我们知道document.body指向的就是body元素,如此,我们就可以以document.body来获取body的大小.何以知之?如下代码: var body = document.quer ...
62. Unique Paths && 63 Unique Paths II
https://leetcode.com/problems/unique-paths/ 这道题,不利用动态规划基本上规模变大会运行超时,下面自己写得这段代码,直接暴力破解,只能应付小规模的情形,当23 ...
velocity模板入门
$!{velocityCount} 随机
vim指令常用
慢慢尝试使用vim,不断学习使用新的快捷键,将常用快捷键但经常容易忘的写下来, 1. 复制黏贴命令行模式下按住v选中,y表示复制,d表示剪切,p为复制.
oracle中的函数及其应用
--..............常用的单行函数...................... ------------------- 常用的字符函数 ---------------------- ...

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

一、 同一窗口实现下钻

二、 新窗口中实现下钻

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

四、 在弹出窗口实现钻取

五、 触发js函数