zoukankan      html  css  js  c++  java
  • 【转】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

    宽度

    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')"/>

  • 相关阅读:
    js对象的深度克隆
    通用事件监听函数
    JavaScript封装
    Ajax
    MarkDown怎么在博客园展现出来
    MarkDown语法学习
    暑期培训第三周SDN总结
    暑期培训遇到的floodlight+mininet+ubuntu的问题
    Ubuntu14.04搭建mininet与可视化工具miniedit介绍
    Ubuntu 14.04 安装 Sublime Text 3,并用Sublime Text 3 安装Package Control
  • 原文地址:https://www.cnblogs.com/fireicesion/p/1818634.html
Copyright © 2011-2022 走看看