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

前面介绍的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>

posted @ 2013-08-31 20:21 chenssy 阅读(4028) 评论(0) 编辑收藏举报

刷新页面返回顶部

Java 技术驿站

全职 Java 程序员，兼职写文章，专注【死磕 Java】系列文章创作，一个立志做专业的程序员...

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

一、同一窗口实现下钻

二、新窗口中实现下钻

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

四、在弹出窗口实现钻取

五、触发js函数

公告

Java 技术驿站

全职 Java 程序员，兼职写文章，专注【死磕 Java】系列文章创作，一个立志做专业的程序员...

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

一、 同一窗口实现下钻

二、 新窗口中实现下钻

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

四、 在弹出窗口实现钻取

五、 触发js函数

公告

一、同一窗口实现下钻

二、新窗口中实现下钻

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

四、在弹出窗口实现钻取

五、触发js函数