FusionCharts可以在点上定义钻取,实现各种link功能,包括:
(1)同一窗口实现钻取
(2)新窗口中实现钻取
(3)在指定的frame中实现钻取
(4) 在弹出窗口中实现钻取
(5) 触发js的函数
一. 同一窗口实现钻取
在set上定义link,如:
<set ... value='2235' ... link='ShowDetails.asp%3FMonth%3DJan' ...>
XML Example:
|
<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'> <set label='Jan' value='17400' link='DemoLinkPages/DemoLink1.html'/> <set label='Feb' value='19800' link='DemoLinkPages/DemoLink2.html'/> <set label='Mar' value='21800' link='DemoLinkPages/DemoLink3.html'/> <set label='Apr' value='23800' link='DemoLinkPages/DemoLink4.html'/> <set label='May' value='29600' link='DemoLinkPages/DemoLink5.html'/> <set label='Jun' value='27600' link='DemoLinkPages/DemoLink6.html'/> </chart>
|
如果链接中带有?,&等字符,需用Encoded形式的字符,FusionCharts将对其进行解码。
热点中参数的传递:因为在XML中对特殊字符? & 不能识别FusionCharts对特殊字符提供了转义的支持所以在上面的link 参数传递改为<set … link=’ /chartDemo/link.jsp%3Fvalue%3D999> 要是在传一个参数是就得用&了
<set … link=’ /chartDemo/link.jsp%3Fvalue%3D999%26name=成都>
<set … link=’ /chartDemo/link.jsp?value=999&name=成都>
二。新窗口中钻取
要在新页面中打开链接,需在链接前增加n-字符,如
<set ... value='2235' ... link='n-ShowDetails.asp%3FMonth%3DJan' ...>
Example XML:
|
<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'> <set label='Jan' value='17400' link='n-DemoLinkPages/DemoLink1.html'/> <set label='Feb' value='19800' link='n-DemoLinkPages/DemoLink2.html'/> <set label='Mar' value='21800' link='n-DemoLinkPages/DemoLink3.html'/> <set label='Apr' value='23800' link='n-DemoLinkPages/DemoLink4.html'/> <set label='May' value='29600' link='n-DemoLinkPages/DemoLink5.html'/> <set label='Jun' value='27600' link='n-DemoLinkPages/DemoLink6.html'/> </chart>
|
三 在指定的frame中实现钻取
要在指定的frame中打开链接,需在链接中指定frame的name,如:
<set ... value='2235' link='F-FrameName-ShowDetails.asp%3FMonth%3DJan' ... >
链接中第一个字符F:表示在frame中打开链接;其后加上连接符-,加上frame的名称,最后是链接的真正的url。
XML Example:
|
<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'> <set label='Jan' value='17400' link='F-detailsFrame-../DemoLinkPages/DemoLink1.html'/> <set label='Feb' value='19800' link='F-detailsFrame-../DemoLinkPages/DemoLink2.html'/> <set label='Mar' value='21800' link='F-detailsFrame-../DemoLinkPages/DemoLink3.html'/> <set label='Apr' value='23800' link='F-detailsFrame-../DemoLinkPages/DemoLink4.html'/> <set label='May' value='29600' link='F-detailsFrame-../DemoLinkPages/DemoLink5.html'/> <set label='Jun' value='27600' link='F-detailsFrame-../DemoLinkPages/DemoLink6.html'/> </chart>
|
上面的html页面包含2个frameset,分别在上下位置,上面的frameset是主图,下面的frameset是根据上面的链接点击后显示图。Html格式如下:
The HTML code of FrameExample.html is as under:
|
<html> <head> <title> FusionCharts Frame Drill-down example </title> </head> <frameset rows="350,*" cols="*" frameborder="YES" border="1" framespacing="0"> <frame src="FramePages/FrameChart.html" name="chartFrame" scrolling="NO" noresize > <frame src="FramePages/LowerFrame.html" name="detailsFrame" scrolling="Auto" noresize> </frameset> </html>
|
四. 在弹出窗口中打开链接
<set .. value='235' link="P-detailsWin,width=400,height=300,toolbar=no,scrollbars=no, resizable=no-ShowDetails.asp%3FMonth%3DJan" />
P-:表示在弹出窗口中打开
detailsWin: 指定弹出窗口名,如果每个点指定的弹出窗口名相同,则在同一个弹出窗口中打开这些链接;如果不同,将为每一个链接打开一个弹出窗口。
width=400,height=300,toolbar=no,scrollbars=no, resizable=no:弹出窗口属性;
ShowDetails.asp%3FMonth%3DJan:链接内容
可指定的弹出窗口属性:
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;
Sample XML:
|
<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'> <set label='Jan' value='17400' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink1.html'/> <set label='Feb' value='19800' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink2.html'/> <set label='Mar' value='21800' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink3.html'/> <set label='Apr' value='23800' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink4.html'/> <set label='May' value='29600' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink5.html'/> <set label='Jun' value='27600' link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-DemoLinkPages/DemoLink6.html'/> </chart>
|
五):触发js函数
Js函数需在chart所在页面定义
<set label='USA' value='235' link="j-myJS('USA',235)"/>
j-:触发js函数myJS(),注意,其中不能用分号。
FusionCharts v3.1以上版本,还可用下面这种形式j-{user function name}-{parameter}:
<set label='USA' value='235' link="j-myJS-USA,235"/>
参数之间逗号分隔
<html> <head> <title>JavaScript Link Example</title> <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script> <SCRIPT LANGUAGE="JavaScript"> <!-- function myJS(myVar){ window.alert(myVar); } //--> </SCRIPT> </head>
<body bgcolor="#ffffff"> <div id="chartdiv" align="center">The chart will appear within this DIV. This text will be replaced by the chart.</div> <script type="text/javascript"> var myChart = new FusionCharts("../FusionCharts/Column2D.swf", "myChartId", "500", "300", "0", "1"); myChart.setDataURL("JSExample.xml"); myChart.render("chartdiv"); </script> </body> </html>
|
Additionally, it's important to set the registerWithJS attribute in constructor to 1 (the last attribute in the line which initializes a FusionCharts chart in the page).
JSExample.xml:
<chart caption='ABC Bank Branches' subCaption='(In Asian Countries)' yaxislabel='Branches' xaxislabel='Country'> <set label='Hong Kong' value='235' link='j-myJS-Hong Kong, 235'/> <set label='Japan' value='123' link='j-myJS-Japan, 123'/> <set label='Singapore' value='129' link='j-myJS-Singapore, 129'/> <set label='Malaysia' value='121' link='j-myJS-Malaysia, 121'/> <set label='Taiwan' value='110' link='j-myJS-Taiwan, 110'/> <set label='China' value='90' link='j-myJS-China, 90'/> <set label='S. Korea' value='86' link='j-myJS-S. Korea, 86'/> </chart>
|
以上方式基本适用于所有浏览器。
下面的方式有时候IE不支持:
<set label='USA' value='235' link="JavaScript:myJS('USA, 235')"/>
相关推荐
详细描述了fusioncharts的钻取功能
FusionCharts 可以在点上定义钻取,实现各种link 功能,包括: (1)同一窗口实现钻取 (2)新窗口中实现钻取 (3)在指定的frame 中实现钻取 (4) 在弹出窗口中实现钻取 (5) 触发js 的函数
FusionCharts 参数及功能特性详解实例 FusionCharts 是一款功能强大且灵活的图表工具,可以帮助开发者快速创建各种类型的图表,如折线图、柱状图、饼图等。通过设置不同的参数,可以实现图表的高度自定义,满足不同...
FusionCharts v3.X功能特性参数介绍,呵呵,比较详细的文档
利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示 利用FusionCharts 实现数据图表展示
最近要做一个决策支持的报表系统,遂研究了下FusionCharts实现报表,写了个简单的Demo,基本上实现了钻取、图片及PDF文件的客户端保存、打印等小功能。初学浪费了不少时间,有很多东西都不懂,所以也根据自己遇到的...
FusionCharts一个好用的报表工具,方便、高效、快速创建报表。各式报表应有尽有。
FusionCharts
FusionCharts Free(图表flash控件),单dll文件,用于WEB页面图表生成的组件FusionCharts,非常好用,效果好
简单易用且功能强大的AJAX / JavaScript的一体化 FusionCharts提供先进的办法,将图表与AJAX应用程式或JavaScript模组。您可以随时更新海图在用户端,调用JavaScript函数的热点链结,或要求作出动态XML资料到伺服器...
fusionCharts正式版 You need to enable frames in your browser to see FusionCharts documentation.
FusionCharts是一种制图组件,可以帮您为您的Web应用创建交互式的、数据驱动的图表、仪表盘和地图。它具有智能化、用户友好和创新等特点,可以将单调的数据转化为栩栩如生的图像,从而使您的Web应用更加的生动。它...
FustionCharts总结:包含FusionCharts XT (v3.2.2),test项目,FusionCharts参数说明
FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。 FusionCharts free 是一个跨平台,跨浏览器的flash...
FusionCharts-v3.1功能特性中文介绍
FusionCharts是InfoSoft Global公司的一个产品,InfoSoft Global 公司是专业的Flash图形方案提供商,他们还有几款其他的,基于Flash技术的产品,都非常的漂亮。 FusionCharts free 是一个跨平台,跨浏览器的flash...
FusionCharts XML标签及属性 FusionCharts XML标签及属性 FusionCharts XML标签及属性
FusionCharts是一个闪光的图表组件,它可以用来制作数据动画图表,其中动画效果用的是Adobe Flash 8 (原Macromedia Flash的)制作的flash , FusionCharts可用于任何网页的脚本语言类似于HTML , .NET,ASP , ...