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

FusionChart中点击事件

 
阅读更多



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

  • 大小: 11.3 KB
  • 大小: 34.5 KB
  • 大小: 77.4 KB
  • 大小: 51.1 KB
分享到:
评论
1 楼 feilian09 2013-08-30  

相关推荐

    fusionchart v3. 0参数大全+中文说明+使用手

    它还会介绍如何使用API和事件处理来增强图表的功能和交互性。 通过阅读和学习压缩包中的"**FusionCharts+free+使用手册.doc**",你可以了解如何在实际项目中设置和配置FusionCharts;而"**FusionCharts参数大全+...

    fusionchart实例

    在这个“FusionChart实例”压缩包中,很可能是包含了一系列使用FusionCharts的实际示例代码,用于帮助学习者更好地理解和应用FusionCharts。 首先,我们要了解FusionCharts的基本概念。FusionCharts是一个基于...

    fusionchart报表demo

    4. 交互性:添加点击事件、工具提示、缩放等交互功能,提升用户体验。 三、FusionCharts工作流程 1. 引入库文件:在HTML文件中引入FusionCharts所需的核心JavaScript库和CSS样式文件。 2. 初始化图表:创建图表对象...

    FusionChart甘特图控件

    通过调整XML数据和使用FusionChart的API,可以定制图表的颜色、字体、图例、工具提示等视觉效果,以及添加交互性功能,如点击事件和动态更新。 总之,FusionChart甘特图控件为项目管理和监控提供了一种直观、互动的...

    FusionChart学习及简单实例1

    4. **交互与事件处理**:了解如何添加事件监听器,处理用户与图表的交互,如点击、鼠标悬停等事件。 5. **API使用**:熟悉FusionCharts提供的JavaScript API,用于动态更新图表、获取图表数据等操作。 四、...

    Fusionchart.js

    FusionCharts还提供了丰富的API和事件,允许用户自定义图表的外观和行为,比如添加点击事件、调整颜色主题、设置图例样式等。同时,它支持响应式设计,能够自动适应不同设备和屏幕尺寸。 总结来说,"Fusionchart.js...

    FusionChart生成基于flash的动态报表

    4. **自定义事件**:监听并处理图表的点击、鼠标悬停等事件,实现更丰富的交互功能。 总之,FusionChart是Java开发者在构建数据可视化应用时的一个强大工具,它以丰富的图表种类、优秀的交互性和易用性,帮助开发者...

    一个fusionchart deom

    5. **事件处理**:可选地,可以添加事件监听器以响应用户的交互行为,如点击图表时触发新的数据请求或展示详细信息。 6. **渲染图表**:最后,调用`render()`方法,FusionCharts将根据提供的配置和数据在网页上渲染...

    在ext中使用fusionChart时文件

    一旦图表被渲染,用户可以通过EXT的事件监听和处理来实现图表的交互,如点击图表项获取详细数据,或者根据用户操作动态更新数据源。 综上所述,在EXT中使用FusionCharts,开发者可以利用EXT的组件化和数据绑定优势...

    FusionChart

    5. **交互功能**:FusionCharts提供了诸如点击事件、工具提示、缩放、平移等交互功能,博客可能涉及如何启用和定制这些功能。 6. **自定义样式**:FusionCharts允许开发者调整图表的颜色、字体、边框等样式,以符合...

    基于xml的图表控件FusionChart V3

    JavaScript的使用使得图表具有交互性,用户可以点击图表元素,进行数据钻取或者触发其他事件。 2. **跨浏览器兼容性**:FusionChart V3利用JavaScript的跨平台特性,支持多种主流浏览器,包括Internet Explorer、...

    fusionChart

    5. **事件处理**:FusionCharts支持多种用户交互事件,如点击、鼠标悬停等,你可以注册事件处理器来响应这些事件,增强用户体验。 6. **自定义样式和主题**:FusionCharts提供了预设的主题和样式,同时也允许你...

    在zkoss中集成fusionchart

    ZKoss是一种开源的、基于组件的Java Web应用框架,它允许开发者用Java语言编写客户端和服务器端代码,提供了一种事件驱动的编程模型。ZKoss的核心是组件模型,使得开发者可以像操作桌面应用那样创建Web应用,提高了...

    Fusionchart

    同时,它还支持事件处理,如点击图表元素时触发的回调函数。 5. **图表交互性**: 用户可以通过点击、拖动、缩放和旋转图表进行交互,这增强了用户体验并方便用户深度探索数据。 6. **地图组件**: FusionCharts...

    fusionchart

    FusionCharts支持多种事件,如图表加载、数据加载、图例点击等。可以使用`events`属性绑定事件处理函数。例如,监听图表加载完成: ```javascript var chartObj = new FusionCharts({ ... events: { "load": ...

    FusionChart API 属性翻译

    FusionCharts提供了丰富的交互功能,如点击事件处理。`events.click`可以绑定点击事件的回调函数。 12. **自定义JS函数(Custom JS Functions)** 通过`chart.events.onload`,开发者可以设置图表加载后的自定义...

    Ext-Fusionchart

    - **事件监听**:可以为图表添加事件监听器,以便在用户交互时触发特定的行为,如点击图表元素后的响应。 4. **示例代码**: 在`Ext_Fusionchart`目录下,可能会包含一个HTML文件和相关的JavaScript文件,展示了...

    FusionChart的Demo实例

    9. **自定义事件**:了解如何为图表添加自定义的触发事件,如点击事件后的数据操作或页面跳转。 通过深入研究和实践这些Demo,开发者可以快速掌握FusionCharts的使用,提升数据可视化项目的质量。每个Demo都是一次...

    fusionchart demo

    6. **交互功能**:利用FusionCharts的API添加交互功能,如点击事件、图例开关、数据钻取等。 7. **样式自定义**:通过CSS或FusionCharts的内置样式选项调整图表的颜色、字体、边框等外观。 8. **性能优化**:对于...

Global site tag (gtag.js) - Google Analytics