(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
分享到:
相关推荐
它还会介绍如何使用API和事件处理来增强图表的功能和交互性。 通过阅读和学习压缩包中的"**FusionCharts+free+使用手册.doc**",你可以了解如何在实际项目中设置和配置FusionCharts;而"**FusionCharts参数大全+...
在这个“FusionChart实例”压缩包中,很可能是包含了一系列使用FusionCharts的实际示例代码,用于帮助学习者更好地理解和应用FusionCharts。 首先,我们要了解FusionCharts的基本概念。FusionCharts是一个基于...
4. 交互性:添加点击事件、工具提示、缩放等交互功能,提升用户体验。 三、FusionCharts工作流程 1. 引入库文件:在HTML文件中引入FusionCharts所需的核心JavaScript库和CSS样式文件。 2. 初始化图表:创建图表对象...
通过调整XML数据和使用FusionChart的API,可以定制图表的颜色、字体、图例、工具提示等视觉效果,以及添加交互性功能,如点击事件和动态更新。 总之,FusionChart甘特图控件为项目管理和监控提供了一种直观、互动的...
4. **交互与事件处理**:了解如何添加事件监听器,处理用户与图表的交互,如点击、鼠标悬停等事件。 5. **API使用**:熟悉FusionCharts提供的JavaScript API,用于动态更新图表、获取图表数据等操作。 四、...
FusionCharts还提供了丰富的API和事件,允许用户自定义图表的外观和行为,比如添加点击事件、调整颜色主题、设置图例样式等。同时,它支持响应式设计,能够自动适应不同设备和屏幕尺寸。 总结来说,"Fusionchart.js...
4. **自定义事件**:监听并处理图表的点击、鼠标悬停等事件,实现更丰富的交互功能。 总之,FusionChart是Java开发者在构建数据可视化应用时的一个强大工具,它以丰富的图表种类、优秀的交互性和易用性,帮助开发者...
5. **事件处理**:可选地,可以添加事件监听器以响应用户的交互行为,如点击图表时触发新的数据请求或展示详细信息。 6. **渲染图表**:最后,调用`render()`方法,FusionCharts将根据提供的配置和数据在网页上渲染...
一旦图表被渲染,用户可以通过EXT的事件监听和处理来实现图表的交互,如点击图表项获取详细数据,或者根据用户操作动态更新数据源。 综上所述,在EXT中使用FusionCharts,开发者可以利用EXT的组件化和数据绑定优势...
5. **交互功能**:FusionCharts提供了诸如点击事件、工具提示、缩放、平移等交互功能,博客可能涉及如何启用和定制这些功能。 6. **自定义样式**:FusionCharts允许开发者调整图表的颜色、字体、边框等样式,以符合...
JavaScript的使用使得图表具有交互性,用户可以点击图表元素,进行数据钻取或者触发其他事件。 2. **跨浏览器兼容性**:FusionChart V3利用JavaScript的跨平台特性,支持多种主流浏览器,包括Internet Explorer、...
5. **事件处理**:FusionCharts支持多种用户交互事件,如点击、鼠标悬停等,你可以注册事件处理器来响应这些事件,增强用户体验。 6. **自定义样式和主题**:FusionCharts提供了预设的主题和样式,同时也允许你...
ZKoss是一种开源的、基于组件的Java Web应用框架,它允许开发者用Java语言编写客户端和服务器端代码,提供了一种事件驱动的编程模型。ZKoss的核心是组件模型,使得开发者可以像操作桌面应用那样创建Web应用,提高了...
同时,它还支持事件处理,如点击图表元素时触发的回调函数。 5. **图表交互性**: 用户可以通过点击、拖动、缩放和旋转图表进行交互,这增强了用户体验并方便用户深度探索数据。 6. **地图组件**: FusionCharts...
FusionCharts支持多种事件,如图表加载、数据加载、图例点击等。可以使用`events`属性绑定事件处理函数。例如,监听图表加载完成: ```javascript var chartObj = new FusionCharts({ ... events: { "load": ...
FusionCharts提供了丰富的交互功能,如点击事件处理。`events.click`可以绑定点击事件的回调函数。 12. **自定义JS函数(Custom JS Functions)** 通过`chart.events.onload`,开发者可以设置图表加载后的自定义...
- **事件监听**:可以为图表添加事件监听器,以便在用户交互时触发特定的行为,如点击图表元素后的响应。 4. **示例代码**: 在`Ext_Fusionchart`目录下,可能会包含一个HTML文件和相关的JavaScript文件,展示了...
9. **自定义事件**:了解如何为图表添加自定义的触发事件,如点击事件后的数据操作或页面跳转。 通过深入研究和实践这些Demo,开发者可以快速掌握FusionCharts的使用,提升数据可视化项目的质量。每个Demo都是一次...
6. **交互功能**:利用FusionCharts的API添加交互功能,如点击事件、图例开关、数据钻取等。 7. **样式自定义**:通过CSS或FusionCharts的内置样式选项调整图表的颜色、字体、边框等外观。 8. **性能优化**:对于...