chenssy
致力打造Java精品博客站点

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>

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

11111111

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

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

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

link=’showDetailFCS?name=Sweden’。

二、 新窗口中实现下钻

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

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

      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>

      点击之前

222222

      点击之后

33333333333

四、 在弹出窗口实现钻取

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

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

      这里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函数来触发。使用方法

      <set label=’USA’ value=’235′ link=”j- showData (‘ Spain’,26)”/>

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

      或者

      <set label=’USA’ value=’235′ link=” JavaScript:showData(‘Spain,26’)”/>

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

      <set label=’USA’ value=’235′ link=”j- showData – Spain,26″/>

      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>

55555

如未加特殊说明,此网站文章均为原创,转载必须注明出处。cmsblogs-chenssy » FusionCharts简单教程(七)—–使用FusionCharts实现下钻功能

分享到:更多 ()

Chenssy's Blog | 致力打造个人精品博客

联系作者