您的位置：首页 > 其它

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

2013-08-31 20:21 603 查看

      前面介绍的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-即可。如：

      <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>

点击之前

点击之后

四、在弹出窗口实现钻取

      在弹出窗口实现钻取使用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

一、 同一窗口实现下钻

二、 新窗口中实现下钻

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

四、 在弹出窗口实现钻取

五、 触发js函数

一、同一窗口实现下钻

二、新窗口中实现下钻

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

四、在弹出窗口实现钻取

五、触发js函数