FusionCharts的文档结构:
1.getProductionReportChart.jsp
<%@ page language="java" pageEncoding="gbk"%> <%@ page import="bussiness.report.*"%> <%@ include file="/FusionCharts.jsp"%> <html> <head></head> <% Report report = new Report(); out.println(report.getReportYTDNote()); out.println("</br>"); String pie2dXml = report.getYtdApePieReportXml(); String pie2dHtmlCode = createChartHTML("../fusionCharts/Pie2D.swf", "", pie2dXml , "myFirst4", 900, 600, false) ; out.println(pie2dHtmlCode); out.println("</br></br>"); %>
2.Report.java
package bussiness.report; import business.db.ConnectionPool; import java.io.PrintStream; import java.math.BigDecimal; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import java.text.DecimalFormat; import java.util.ArrayList; import java.util.Calendar; import java.util.Iterator; import java.util.List; public class Report { private String itemName; private BigDecimal itemValue; /** * 保留 * * @return */ public String getReportYTDNote() { Calendar now = Calendar.getInstance(); now.add(5, -1); int year = now.get(1); int month = now.get(2) + 1; int date = now.get(5); String dateStr = year + "-" + month + "-" + date; StringBuilder sbXml = new StringBuilder(); sbXml.append("<div style='background: #FFFFE6; margin-left: 0px; width: 640px; border: #FAD185 solid 1px;'>"); sbXml.append("<p style='Padding: 5px 0px 5px 20px;'>"); sbXml.append("<table class=tablestyle cellSpacing=0 cellPadding=0 width=560>"); sbXml.append("<TBODY>"); sbXml.append("<tr><td align='left'><span class='style9'>YTD:</span><span class='style11'>"); sbXml.append(dateStr); sbXml.append("</span></td></tr></TBODY></table></p></div>"); return sbXml.toString(); } public static String getYtdApePieReportXml() { StringBuilder xmlSb = new StringBuilder(); Connection conn = null; Statement st = null; ResultSet rs = null; List list = new ArrayList(0); try { conn = ConnectionPool.getConnection(); st = conn.createStatement(); for (rs = st .executeQuery("select c.ai_area_desc2, c.ape from (select b.ai_area_desc2,sum(a.Y_NET_DELIVER_APE)/1000 as ape from tu_ods_report_collect_daily a join vw_ods_area_code2 b on a.branch_code = b.ai_area_code5 where a.load_dt = (select max(load_dt) from tu_ods_report_collect_daily) group by b.ai_area_desc2)c order by ape asc"); rs .next();) { Report report = new Report(); report.setItemName(rs.getString(1)); report.setItemValue(rs.getBigDecimal(2)); list.add(report); } } catch (SQLException sqle) { sqle.printStackTrace(); } finally { ConnectionPool.releaseStatement(st); } xmlSb.append("<chart subCaption='(RMB ,000)' baseFontSize='14' caption='Net Delivery APE' startingAngle='90'"); StringBuilder subCaptionXml = new StringBuilder(); StringBuilder bodyXml = new StringBuilder(); BigDecimal total = new BigDecimal(0); int i = 0; for (Iterator iterator = list.iterator(); iterator.hasNext(); i++) { Report report = (Report) iterator.next(); bodyXml.append("<set label='"); bodyXml.append(report.getItemName()); bodyXml.append("' value= '"); bodyXml.append(report.getItemValue()); bodyXml.append("' toolText = '"); bodyXml.append(format3p(report.getItemValue().doubleValue())); bodyXml.append("' />"); } xmlSb.append(" palette='4' showPercentValues='1'> "); xmlSb.append(bodyXml.toString()); xmlSb.append("</chart>"); return xmlSb.toString(); } private static String format3(double value) { DecimalFormat decimalFormat = new DecimalFormat("#"); return decimalFormat.format(value); } private static String format3p(double value) { DecimalFormat decimalFormat = new DecimalFormat(",###"); return decimalFormat.format(value); } public String getItemName() { return this.itemName; } public void setItemName(String itemName) { this.itemName = itemName; } public BigDecimal getItemValue() { return this.itemValue; } public void setItemValue(BigDecimal itemValue) { this.itemValue = itemValue; } public static void main(String[] args) { System.out.println(format3(654321123456.98987D)); } }
3.发布成功后效果图如下,可以看到flash动画并没有显示:
4.我们Copy上面embed(蓝色部分)的代码到Data.xml,并稍微修改value的值,如下:
<chart subCaption='(RMB ,000)' baseFontSize='14' caption='Net Delivery APE' startingAngle='90' palette='4' showPercentValues='1'> <set label='上海 Shanghai' value='26' toolText='0' /> <set label='北京 Beijing' value='56' toolText='0' /> <set label='天津 Tianjin' value='456' toolText='0' /> <set label='浙江 Zhejiang' value='233' toolText='0' /> <set label='广东 Guangdong' value='111' toolText='0' /> <set label='江苏 Jiangsu' value='25' toolText='0' /> <set label='河北 Hebei' value='45' toolText='0' /> <set label='山东 Shandong' value='78' toolText='0' /> </chart>
5.编写一个测试JSP(index.jsp)
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My First FusionCharts</title> </head> <body bgcolor="#ffffff"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="900" height="300" id="Column3D" > <param name="movie" value="fusionCharts/Pie2D.swf" /> <param name="FlashVars" value="&dataURL=data/Data.xml"> <param name="quality" value="high" /> <embed src="fusionCharts/Pie2D.swf" flashVars="&dataURL= data/Data.xml" quality="high" width="900" height="300" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </body> </html>
最终项目的目录结构如下:
6.发布成功后访问index.jsp页面,效果如下:
说明:没数据会造成flash动画不能显示
参考:http://blog.csdn.net/chenssy/article/details/9773797
相关推荐
FusionCharts是一款强大的JavaScript图表库,用于创建交互式的、丰富的数据可视化解决方案。本资料集全面涵盖了FusionCharts的各个方面,包括基础使用、实例演示、XML数据源生成、图表导出功能等。下面将详细阐述...
FusionCharts是一款强大的JavaScript图表库,它提供了丰富的交互式图表,可用于Web应用程序中展示数据。这份"fusioncharts全套资料分享"包含的资源很可能是帮助学习和掌握FusionCharts的全面教程、示例代码以及可能...
FusionCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型和高度自定义的选项,用于创建交互式的、数据可视化效果。本压缩包中的“fusionCharts导出相关资料打包”集成了关于如何实现FusionCharts图表自动...
1. 引入FusionCharts库,包括JavaScript和SWF文件。 2. 创建图表对象,并设置图表的类型、宽度、高度、标题等属性。 3. 定义数据源,可以是XML、JSON或者其他格式,其中包含图表所需的所有数据和配置信息。 4. 渲染...
在"asp.net报表FusionCharts资料文档"中,我们可以深入学习以下几个关键知识点: 1. **FusionCharts介绍**:FusionCharts是一套包含多种图表类型的JavaScript图表库,支持HTML5和Flash。它提供超过90种图表类型,如...
以下是对FusionCharts资料的详细解读: 1. **FusionCharts报表工具**: FusionCharts 提供了丰富的报表工具,允许开发者创建各种类型的图表,如柱状图、饼图、线图、地图等,以满足不同数据展示需求。这些图表具有...
1. **安装与集成**:了解如何将FusionCharts库引入到你的项目中,无论是静态HTML页面还是动态服务器端语言如PHP、ASP.NET、Java等。 2. **基本图表类型**:熟悉各种图表类型,如条形图、折线图、饼图、散点图等,并...
在“FusionCharts统计完整总结版”这个压缩包中,你可能找到了关于FusionCharts的所有关键信息,包括教程、示例代码、API文档等,这些都是深入理解和使用FusionCharts的重要参考资料。无论你是数据分析师还是Web...
**FusionCharts学习资料及源码** FusionCharts是一款强大的JavaScript图表库,它能够帮助开发者在Web应用中创建丰富的、交互式的图表。FusionCharts的主要优势在于其易用性和灵活性,使得开发者无需深入图形编程就...
离线开发文档是开发者的重要参考资料,包含了所有必要的信息,帮助用户深入理解和有效地使用FusionCharts。 **FusionCharts的主要特点:** 1. **多样的图表类型** - FusionCharts支持多种图表类型,如柱状图、饼图...
在压缩包`FusionCharts_Evaluation`中,可能包含了FusionCharts的库文件、示例代码、文档资料等,用户可以通过这些资源快速了解和学习如何使用FusionCharts v3.2.1,进行数据可视化项目的开发。通过实践和探索,...
"FusionCharts帮助文档"是专为使用该产品设计的一系列指导资料,旨在帮助用户更好地理解和利用FusionCharts的功能。这篇文档将深入探讨FusionCharts的核心特性、安装与配置、图表类型、数据源集成以及常见问题解决...
FusionCharts是一款强大的JavaScript图表库,它用于创建交互式的、动画丰富的数据可视化图表。这个"**FusionCharts2.*版本API及源码**"资源包含了关于FusionCharts 2.x系列版本的API文档、免费版的API介绍以及详细的...
在提供的压缩包文件“FusionCharts3.1资料”中,可能包含了FusionCharts3.1的使用手册、示例代码、API参考、无水印SWF文件等资源,对于学习和使用FusionCharts3.1是非常宝贵的资料。通过这些资源,开发者可以深入...
"最全的swf文件资料"可能包含FusionCharts支持的所有图表类型的示例、模板或者组件,这对于开发者来说是一个宝贵的资源库,他们可以快速理解和学习如何使用这些图表来展示数据。 FusionCharts的主要特点包括: 1. ...
FusionCharts是一款强大的数据可视化工具,它通过JavaScript库来创建交互式图表,广泛应用于Web应用程序中,以生动、直观的方式展示复杂数据。FusionCharts API是开发者与FusionCharts进行交互的重要接口,允许用户...
在压缩包文件的"char"目录下,可能包含了FusionCharts的示例代码、库文件、教程资料等。开发者可以参考这些资源来快速上手和深入了解FusionCharts的使用方法。例如,示例代码可能展示了如何创建不同类型的图表,以及...
总的来说,FusionCharts v3的帮助文档是一份全面且易懂的参考资料,无论你是初次接触还是经验丰富的开发者,都能从中受益。通过学习和实践,你可以熟练掌握FusionCharts,将其强大的图表功能应用于各种Web应用中,以...
1. **FusionCharts**:FusionCharts是一个基于JavaScript和Flash技术的图表库,它提供了超过90种不同类型的图表,如柱状图、线图、饼图、地图等,能够满足各种数据分析和展示的需求。它支持XML或JSON数据格式,可以...