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

随机推荐

通过viewmodel找到view
如何通过viewmodel找到view? 之前的做法是,在view加载时(Loaded),将view保存到viewmodel中,后来想想Caliburn-Micro,自带方法可以通过viewmodel ...
5ucms后台调用标签
<%=Rs.Data(1,i)%>栏目 <%=Rs.Data(2,i)%>标题 <%=Rs.Data(3,i)%>推荐 <%=Rs.Data(4,i)%> ...
Jmeter学习
网址: http://www.ltesting.net/ceshi/open/kyxncsgj/jmeter/ http://www.cnblogs.com/TankXiao/p/4059378.ht ...
【java】：枚举小demo
package com.jwis.study.enumeration; /** * @author lx * 枚举的一些方法 */ //⑴ enum Substar{tst1,tst2,ts3} pu ...
[C#.net] SendMessage
函数功能:该函数将指定的消息发送到一个或多个窗口.此函数为指定的窗口调用窗口程序,直到窗口程序处理完消息再返回.该函数是应用程序和应用程序之间进行消息传递的主要手段之一. 函数原型:LRESU ...
ilspy导致c# dll代码被窃取
不得不放弃.net框架的任何开发!!!微软现在太蛋疼了!!! 不得不放弃.net框架的任何开发!!!微软现在太蛋疼了!!! 不得不放弃.net框架的任何开发!!!微软现在太蛋疼了!!! 不得不放弃.n ...
C#开发Android环境搭建
目前破解比较稳定的版本(我亲自尝试过的)是4.2. wuleba上的4.6,4.8,4.10 破解均会出现各种问题. 1 当前电脑账户最好是使用英文账号,而不要使用汉字,否则路径会出现乱码问题. 2 ...
GCC4.8.2升级安装
一.查看本机GCC版本: 使用gcc -v 查看本机版本信息,我的gcc版本为: gcc 版本 4.4.6 20120305 (Red Hat 4.4.6-4) (GCC) 二.升级或安装编译器: 1 ...
C#装箱和拆箱
1.装箱是将值类型转换为引用类型(或者转换为此值类型所实现的任何接口类型)的隐式转换,当 CLR 对值类型进行装箱时,会将该值包装到 System.Object 内部,再将后者存储在托管堆上. ; / ...
jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

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

一、 同一窗口实现下钻

二、 新窗口中实现下钻

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

四、 在弹出窗口实现钻取

五、 触发js函数