FusionChart中点击事件

最新推荐文章于 2020-08-14 20:24:17 发布

xiyang5530

最新推荐文章于 2020-08-14 20:24:17 发布

阅读量205

点赞数

CC 4.0 BY-SA版权

分类专栏： FusionCharts

本文链接：https://blog.youkuaiyun.com/xiyang5530/article/details/84288240

FusionCharts 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何通过XML配置实现图表的多种交互方式，包括点击执行JS事件、跳转新页面、在原页面或Frame中打开链接及弹出窗口等。通过具体示例说明不同交互效果的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）点击执行js
在页面中添加点击chart后需要触发的js事件：

<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()+"' /> ");
		}

效果如下：

（2）点击跳转到新页面

在拼写加载chart时使用的xml文件时，在
<set value="1">中添加link='test/index.html'；
其中，"test/index.htm"为你需要跳转的页面目录

效果如下：

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

在拼写加载chart时使用的xml文件时，在
<set value="1">中添加link='n-test/index.html'；
其中，n代表在原页面上打开新页面，"test/index.htm"为你需要跳转的页面目录

效果如下：

（4）点击后在Frame中显示页面

页面中Frame设置如下：

 <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"为你需要跳转的页面目录

效果如下：

（5）点击整个chart作为热点

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

<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的画面，其他各项为画面打开时的参数。