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，此属性应用于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')"/>

 

六. link 传参出现乱码问题

例：link="JavaScript:myJSFunction('USA', 235);"

    link="JavaScript:myJSFunction('中文', 235);"//此时中文会出现乱码在xml文件的chart属性中添加unescapeLinks='0'，那么js乱码问题就轻松解决啦。（困扰了很久）

如果用ajax，访问action?id=xxx，如果是中午，后台得到数据，又会是乱码，

解决中文乱码的最关键一行,加上  id= encodeURI(id); 

                                 function myJs(id) {
                                       alert(id);
                                       id= encodeURI(id);
                                        var chart = new FusionCharts("XXXX");
                                        $.ajax({
                                                url:'line!line.action?name='+name,
                                                type:'post',
                                                dataType:'text',
                                                async:false,
                                                error:function(){},
                                                success:function(data){
                                                        chart.setDataXML(data);
                                                }
                                        });