`
wangxiao5530
  • 浏览: 136812 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

FusionCharts的钻取功能

 
阅读更多

FusionCharts的钻取功能

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,此属性应用于IENetscape用screenX

Top:指定弹出窗口距顶部宽度,单位pixels,此属性应用于IENetscape用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钻取功能详解 #### 一、概述 FusionCharts是一款强大的图表库,它支持多种图表类型,包括柱状图、折线图、饼图等,并且提供了丰富的交互功能,如工具提示、动画效果以及钻取功能。钻取(Drill-...

    FusionCharts 的钻取功能

    FusionCharts 可以在点上定义钻取,实现各种link 功能,包括: (1)同一窗口实现钻取 (2)新窗口中实现钻取 (3)在指定的frame 中实现钻取 (4) 在弹出窗口中实现钻取 (5) 触发js 的函数

    FusionCharts

    安装这个库后,我们可以轻松地在网页中集成FusionCharts,利用其强大的功能创建出各种动态图表。 `example.html`是一个使用FusionCharts的实例,通过查看此文件的源代码,我们可以看到如何在HTML页面中引入...

    FusionCharts与HighCharts功能对比分析

    7. 向下钻取:FusionCharts支持通过LinkedCharts实现无限层级的向下钻取,而Highcharts则需要通过JavaScript代码实现。 8. 工具提示和图例:两者都支持工具提示和交互式的图例。 9. 支持缩放、滚动和平移:...

    FusionCharts实际开发案例

    选择FusionCharts作为图表控件的主要原因在于其强大的功能和灵活性。首先,FusionCharts支持多种图表类型,如折线图、条形图和饼状图,满足了BankersLab在信用评级展示中对拖欠率的多样化需求。其次,其交互性特性,...

    FusionCharts 3.2

    3. **交互性**:图表具有丰富的交互功能,如数据钻取、工具提示、缩放和平移等,增强用户体验。 4. **多数据源支持**:FusionCharts能与JSON、XML、CSV等多种数据格式兼容,方便数据的导入和处理。 5. **跨平台与...

    FusionCharts Free中文开发指南.rar

    FusionCharts的JavaScript API提供了丰富的功能,用于创建、操作和控制图表。你可以通过API设置图表的各种参数,如标题、图例、数据格式等,还可以在运行时动态更新图表数据。API函数包括`new FusionCharts()`、`...

    FusionCharts API

    在本篇文章中,我们将深入探讨FusionCharts API的核心功能、使用方法以及如何利用它来构建动态数据展示。 一、FusionCharts API概述 FusionCharts API 是由FusionCharts公司开发的一套JavaScript库,支持HTML5/SVG...

    FusionCharts示例代码(jsp)

    除了基本的图表展示,FusionCharts还支持组合图表、钻取图表、地图图表等高级特性。例如,可以使用`multi-series`类型的图表展示多个系列的数据,或者使用`drilldown`功能允许用户点击图表上的某一部分以查看更详细...

    FusionCharts_XT api

    6. **交互功能**: 用户可以通过API与图表进行交互,如缩放、平移、钻取等,提高用户体验。 ### 示例与Demo 提供的`FusionCharts_XT_Evaluation`文件可能包含FusionCharts XT的示例代码和演示应用,这些示例通常...

    FusionCharts_API_中文帮助文件

    这份“FusionCharts_API_中文帮助文件”将详细阐述如何利用API实现各种功能。 1. **FusionCharts概述** - FusionCharts支持多种图表类型,如柱状图、饼图、线图、散点图等,满足不同数据展示需求。 - 它提供跨...

    Fusioncharts_XT_V3.2.2最新版教程下载

    所有这些图表都支持交互式选项,例如工具提示、钻取功能、导出为image/PDF/CSV以及JavaScript集成。 总而言之,Fusioncharts XT V3.2.2版教程是一个针对最新Fusioncharts产品的详细指南,它不仅提供了安装和使用的...

    FusionCharts_XT_Evaluation3.3.1

    3. **交互性**:FusionCharts XT 提供了丰富的交互功能,如点击图表元素获取详细信息、鼠标悬停时显示数据提示、图表缩放和拖动等,帮助用户更好地理解数据。 4. **自定义与样式**:用户可以通过JavaScript API或...

    fusioncharts资源

    在实际项目中,开发者还可以利用FusionCharts的高级特性,如图例控制、工具提示、钻取导航、数据标签等,构建复杂的数据交互场景。总之,FusionCharts作为一款强大的图表工具,不仅简化了前端数据可视化的流程,也为...

    FusionCharts简单功能

    最近要做一个决策支持的报表系统,遂研究了下FusionCharts实现报表,写了个简单的Demo,基本上实现了钻取、图片及PDF文件的客户端保存、打印等小功能。初学浪费了不少时间,有很多东西都不懂,所以也根据自己遇到的...

    FusionCharts_Evaluation-统计图

    同时,掌握如何响应用户交互,如点击事件、钻取功能(Drill-down)和工具提示,能进一步提升用户体验。 总之,FusionCharts是一个强大的统计图表库,为开发者提供了丰富的图表类型和高度定制的选项,以满足各种数据...

    FusionCharts演示Demo

    3. **交互性**:FusionCharts提供了丰富的交互功能,如点击图表元素后的数据钻取、图表组件的动态更新等。 4. **自定义**:通过CSS和JavaScript,可以对图表样式、颜色、标签等进行高度定制,以满足个性化需求。 5. ...

    FusionCharts代码 Asp.net

    5. **交互功能**:FusionCharts支持多种交互功能,如工具提示、点击事件、钻取等。开发者可能已经实现了这些功能,使得用户可以与图表进行互动,获取更详细的信息。 6. **自定义样式和主题**:FusionCharts允许...

    FusionCharts Suite XT v3.5.1 文件及部分DEMO

    - **交互性**:用户可以点击图表元素查看详细信息,或者通过工具提示和钻取功能进行深入分析。 - **自定义**:允许自定义颜色、字体、动画效果等,以满足特定的设计需求。 - **API和事件**:提供JavaScript和服务器...

Global site tag (gtag.js) - Google Analytics