详解FusionChart图表控件点击事件

(1)点击执行js

在页面中添加点击chart后需要触发的js事件:

1
2
3
4
5
<script> 
    function myJS(myVar){
       window.alert(myVar);
    }
</script> 

在拼写加载chart时使用的xml文件时,在<set value="1">中添加link='j-myJS-1,2';

其中,j代表调用的是js,myJS代表你前台页面上要调用的js方法名,1代表前台js方法myJS需要的参数。

在这里,我点击chart时需要获得category 的值:

  for(int j=0;j<commentChartList.size();j++){
   Project project = commentChartList.get(j);
   chartTitle.append("   <category label='"+ project.getShip_no() + "' /> ");
   chartDataSet.append("  <set value='"+project.getProgress_cnt()+"' /> ");
   chartOver.append("  <set value='"+StringUtil.checkNull(project.getClosed_cnt(),"0")+"' link='j-myJS-"+project.getShip_no()+"' /> ");
  }

效果如下:

详解FusionChart图表控件点击事件

2)点击跳转到新页面

在拼写加载chart时使用的xml文件时,在<set value="1">中添加link='test/index.html';

其中,"test/index.htm"为你需要跳转的页面目录

效果如下:

详解FusionChart图表控件点击事件

3)点击时在原页面上打开新页面

在拼写加载chart时使用的xml文件时,在<set value="1">中添加link='n-test/index.html';

其中,n代表在原页面上打开新页面,"test/index.htm"为你需要跳转的页面目录

效果如下:

详解FusionChart图表控件点击事件

4)点击后在Frame中显示页面

页面中Frame设置如下:

Html代码:

1
2
3
4
< 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 >

在拼写加载chart时使用的xml文件时,在<set value="1">中添加link='F-detailsFrame-test/index.htm';

其中,F代表打开的是Frame,detailsFrame是需要加载的Frame名称,"test/index.htm"为你需要跳转的页面目录

效果如下:

详解FusionChart图表控件点击事件

5)点击整个chart作为热点

将整个chart作为一个热点,点击chart时打开新页面:

Xml代码

1
2
3
4
5
6
7
8
< chart caption = 'Monthly Sales Summary' subcaption = 'For the year 2006' xAxisName = 'Month' yAxisName = 'Sales' numberPrefix = '$' clickURL = 'n-http://www.infosoftglobal.com' >
    < set label = 'Jan' value = '17400' />
    < set label = 'Feb' value = '19800' />
    < set label = 'Mar' value = '21800' />
    < set label = 'Apr' value = '23800' />
    < set label = 'May' value = '29600' />
    < set label = 'Jun' value = '27600' />
</ chart >

其中clickURL='n-http://www.infosoftglobal.com'

(6)点击打开一个popup画面

在拼写加载chart时使用的xml文件时,在<set value="1">中添加
link='P-detailsPopUp,width=400,height=300,toolbar=no, scrollbars=no,resizable=no-_template/common/pop_search03.html'

其中P代表打开的是一个pop-up画面,detailsPopUp为打开画面的名称,“template/common/pop_search03.html”为要pop的画面,其他各项为画面打开时的参数。

本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:慧都控件网 [ http://www.evget.com/]
本文地址: http://www.evget.com/zh-CN/info/catalog/17937.html
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,点击事件是指用户在网页上点击某个元素时所触发的事件。在JavaScript中,我们可以通过给元素添加点击事件监听器来实现对点击事件的响应。下面是一些关于点击事件详解: 1. 给元素添加点击事件监听器的方法 在JavaScript中,我们可以通过以下两种方法为元素添加点击事件监听器: - 使用HTML的onclick属性 我们可以在HTML标签中使用onclick属性来添加点击事件监听器,例如: ``` <button onclick="myFunction()">Click me</button> ``` 这里的myFunction()就是我们要执行的函数,点击按钮时就会触发该函数。 - 使用JavaScript的addEventListener()方法 我们也可以使用JavaScript的addEventListener()方法来为元素添加点击事件监听器,例如: ``` document.getElementById("myButton").addEventListener("click", myFunction); ``` 这里的myButton是我们要添加监听器的按钮元素的id,myFunction是我们要执行的函数。 2. 点击事件的触发条件 点击事件只有在满足以下两个条件时才会被触发: - 用户单击了鼠标左键 只有在用户单击了鼠标左键时,点击事件才会被触发。如果用户单击了鼠标右键或中键,则不会触发点击事件。 - 鼠标单击的元素上有点击事件监听器 只有在用户单击的元素上有点击事件监听器时,点击事件才会被触发。如果用户单击的元素上没有点击事件监听器,则不会触发点击事件。 3. 点击事件对象 在点击事件触发时,会自动创建一个点击事件对象。我们可以通过该对象来获取一些与点击事件相关的信息,例如: - event.target:获取被点击的元素 - event.clientX和event.clientY:获取鼠标单击位置的横坐标和纵坐标 - event.preventDefault():阻止元素的默认行为(例如,阻止链接跳转或表单提交) 4. 防止重复点击 有时候我们可能会遇到这样的情况:用户在短时间内多次点击同一个按钮,导致按钮的事件被触发多次,从而影响网页的正常运行。为了避免这种情况,我们可以采用以下两种方法: - 在函数中添加一个变量,记录上一次点击事件的时间戳,如果当前时间与上一次点击事件的时间间隔小于某个值,就不执行函数。 - 使用JavaScript的debounce函数,该函数可以延迟函数的执行时间,从而防止过于频繁的触发点击事件。 以上就是关于点击事件的一些详解,希望能对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值