我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

Flash图表(FusionChartsV3)的简单应用

项目中需要用到报表,发现这个Flash做的工具很好用~
效果漂亮,且支持多达40多种报表。
看图:

简单说下这个东东在jsp环境下的应用.
java代码:
package com.eline.epicc.utils;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

/**
 * 报表生成公共类(创建FusionCharts<flash cool>)
 * 
 * 
@author zdw
 * 
 
*/

public class ChartUtils
{
    
/**
     * 对Url数据转码的方法
     * 
@param strDataURL   - chart的数据url
     * 
@param addNoCacheStr - 非缓存字符串
     * 
@return
     
*/


    
public String encodeDataURL(String strDataURL, String addNoCacheStr,
            HttpServletResponse response)
    
{
        String encodedURL 
= strDataURL;
        
if (addNoCacheStr.equals("true"))
        
{
            java.util.Calendar nowCal 
= java.util.Calendar.getInstance();
            java.util.Date now 
= nowCal.getTime();
            java.text.SimpleDateFormat sdf 
= new java.text.SimpleDateFormat(
                    
"MM/dd/yyyy HH_mm_ss a");
            String strNow 
= sdf.format(now);
            
if (strDataURL.indexOf("?"> 0)
            
{
                encodedURL 
= strDataURL + "&FCCurrTime=" + strNow;
            }

            
else
            
{
                strDataURL 
= strDataURL + "?FCCurrTime=" + strNow;
            }

            encodedURL 
= response.encodeURL(strDataURL);

        }

        
return encodedURL;
    }


    
/**
     * 用HTML+JavaScript创建FusionCharts对象(用此方式需要导入FusionCharts.js文件)
     * 
@param chartSWF -
     *            flash文件的位置,即chart图表类型
     * 
@param strURL - xml数据源
     * 
@param strXML - 字符流
     * 
@param chartId - chart对象在HTML中的唯一标识
     * 
@param chartWidth -  flash chart 的宽度(单位px)
     * 
@param chartHeight -  flash chart 的高度(单位px)
     * 
@param debugMode - 是否开启chart 调试模式
     * 
@param registerWithJS - 是否注册自己
     
*/

    
public static String createChart(String chartSWF, String strURL,
            String strXML, String chartId, 
int chartWidth, int chartHeight,
            
boolean debugMode, boolean registerWithJS)
    
{
        StringBuffer strBuf 
= new StringBuffer();
        strBuf.append(
"<!--START Script Block for Chart -->\n");
        strBuf.append(
"\t\t<div id='" + chartId + "Div' align='center'>\n");
        strBuf.append(
"\t\t\t\tChart.\n");
        strBuf.append(
"\t\t</div>\n");
        strBuf.append(
"\t\t<script type='text/javascript'>\n");
        Boolean registerWithJSBool 
= new Boolean(registerWithJS);
        Boolean debugModeBool 
= new Boolean(debugMode);
        
int regWithJSInt = boolToNum(registerWithJSBool);
        
int debugModeInt = boolToNum(debugModeBool);

        strBuf.append(
"\t\t\t\tvar chart_" + chartId + " = new FusionCharts('"
                
+ chartSWF + "', '" + chartId + "', '" + chartWidth + "', '"
                
+ chartHeight + "', '" + debugModeInt + "', '" + regWithJSInt
                
+ "');\n");
        
if (strXML.equals(""))
        
{
            strBuf.append(
"\t\t\t\t//Set the dataURL of the chart\n");
            strBuf.append(
"\t\t\t\tchart_" + chartId + ".setDataURL(\""
                    + strURL + "\");\n");
        }

        
else
        
{
            strBuf
                    .append(
"\t\t\t\t//Provide entire XML data using dataXML method\n");
            strBuf.append(
"\t\t\t\tchart_" + chartId + ".setDataXML(\""
                    + strXML + "\");\n");
        }

        strBuf.append(
"\t\t\t\t//Finally, render the chart.\n");
        strBuf.append(
"\t\t\t\tchart_" + chartId + ".render(\"" + chartId
                + "Div\");\n");
        strBuf.append("\t\t</script>\n");
        strBuf.append(
"\t\t<!--END Script Block for Chart-->\n");
        
return strBuf.substring(0);
    }


    
/**
     * 创建swf charts对象(HTML)
     * 
     * 
@param chartSWF -
     *            flash文件的位置,即chart图表类型
     * 
     * 
@param strURL -
     *            xml数据源
     * 
@param strXML -
     *            If you intend to use dataXML method for this chart, pass the
     *            XML data as this parameter. Else, set it to "" (in case of
     *            dataURL method)
     * 
@param chartId -
     *            chart对象在HTML中的唯一标识
     * 
@param chartWidth -
     *            flash chart 的宽度(单位px)
     * 
@param chartHeight -
     *            flash chart 的高度(单位px)
     * 
@param debugMode -
     *            是否开启chart 调试模式
     
*/


    
public static String createChartHTML(String chartSWF, String strURL,
            String strXML, String chartId, 
int chartWidth, int chartHeight,
            
boolean debugMode)
    
{
        String strFlashVars 
= "";
        Boolean debugModeBool 
= new Boolean(debugMode);

        
if (strXML.equals(""))
        
{
            strFlashVars 
= "chartWidth=" + chartWidth + "&chartHeight="
                    
+ chartHeight + "&debugMode=" + boolToNum(debugModeBool)
                    
+ "&dataURL=" + strURL + "";
        }

        
else
        
{
            strFlashVars 
= "chartWidth=" + chartWidth + "&chartHeight="
                    
+ chartHeight + "&debugMode=" + boolToNum(debugModeBool)
                    
+ "&dataXML=" + strXML + "";
        }

        StringBuffer strBuf 
= new StringBuffer();
        
// 开始输出Object chart
        strBuf.append("\t\t<!--START Code Block for Chart-->\n");
        strBuf
                .append(
"\t\t\t\t<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='"
                        
+ chartWidth
                        
+ "' height='"
                        
+ chartHeight
                        
+ "' id='"
                        
+ chartId + "'>\n");
        strBuf
                .append(
"\t\t\t\t    <param name='allowScriptAccess' value='always' />\n");
        strBuf.append(
"\t\t\t\t    <param name='movie' value='" + chartSWF
                
+ "'/>\n");
        strBuf.append(
"\t\t\t\t<param name='FlashVars' value=\"" + strFlashVars
                + "\" />\n");
        strBuf.append("\t\t\t\t    <param name='quality' value='high' />\n");
        strBuf
                .append(
"\t\t\t\t<embed src='"
                        
+ chartSWF
                        
+ "' FlashVars=\""
                        + strFlashVars
                        
+ "\" quality='high' width='"
                        + chartWidth
                        
+ "' height='"
                        
+ chartHeight
                        
+ "' name='"
                        
+ chartId
                        
+ "' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' />\n");
        strBuf.append(
"\t\t</object>\n");
        strBuf.append(
"\t\t<!--END Code Block for Chart-->\n");
        
return strBuf.substring(0);
    }


    
/**
     * 提供快速输出Chart的便捷方法(基于字符流的方式)
     * 
     * 
@param chartSWF :
     *            flash文件的位置,即chart图表类型
     * 
@param strXml :
     *            xml文件流(string格式)
     * 
@param chartId :
     *            chart对象在HTML中的唯一标识
     * 
@param chartWidth :
     *            flash chart 的宽度(单位px)
     * 
@param chartHeight:
     *            flash chart 的高度(单位px)
     * 
@param response :
     *            reponse对象
     
*/

    
public static void outChartHTML(String chartSWF, String strXml,
            String chartId, 
int chartWidth, int chartHeight,
            HttpServletResponse response)
    
{
        String str 
= createChartHTML(chartSWF, "", strXml, chartId, chartWidth,
                chartHeight, 
false);
        
try
        
{
            response.getWriter().write(str);
        }
 catch (IOException e)
        
{
            e.printStackTrace();
        }

    }


    
/**
     * 提供快速输出Chart的便捷方法(基于xml文件的方式)
     * 
     * 
@param chartSWF :
     *            flash文件的位置,即chart图表类型
     * 
@param strURL :
     *            xml数据源(路径格式)
     * 
@param chartId :
     *            chart对象在HTML中的唯一标识
     * 
@param chartWidth :
     *            flash chart 的宽度(单位px)
     * 
@param chartHeight:
     *            flash chart 的高度(单位px)
     * 
@param response :
     *            reponse对象
     
*/

    
public static void outChartSourceHTML(String chartSWF, String strURL,
            String chartId, 
int chartWidth, int chartHeight,
            HttpServletResponse response)
    
{
        String str 
= createChartHTML(chartSWF, strURL, "", chartId, chartWidth,
                chartHeight, 
false);
        
try
        
{
            response.getWriter().write(str);
        }
 catch (IOException e)
        
{
            e.printStackTrace();
        }

    }


    
/**
     * bollean转换为int
     
*/

    
private static int boolToNum(Boolean bool)
    
{
        
int num = 0;
        
if (bool.booleanValue())
        
{
            num 
= 1;
        }

        
return num;
    }

}


jsp:
<%@ page language="java" pageEncoding="UTF-8"%>
<%@page import="com.eline.epicc.utils.ChartUtils"%>
<%@page import="com.eline.epicc.utils.Constants"%>
<HTML>
    
<HEAD>
        
<TITLE>FusionCharts - Simple Column 3D Chart</TITLE>
    
</HEAD>
    
<BODY>
        
<%
            
//文件源示例
            ChartUtils.outChartSourceHTML(
"common/charts/Column3D.swf",
                    
"data.xml""myFirst"600300, response);
            
String[][] arrData = new String[6][2];
            
//产品名字
            arrData[
0][0= "Product A";
            arrData[
1][0= "Product B";
            arrData[
2][0= "Product C";
            arrData[
3][0= "Product D";
            arrData[
4][0= "Product E";
            arrData[
5][0= "Product F";

            arrData[
0][1= "567500";
            arrData[
1][1= "815300";
            arrData[
2][1= "556800";
            arrData[
3][1= "734500";
            arrData[
4][1= "676800";
            arrData[
5][1= "648500";
            
//Now, we need to convert this data into XML. We convert using string concatenation.
            
String strXML;
            
int i = 0;
            strXML 
= "<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='0'>";
            
for (i = 0; i < arrData.length; i++)
            {
                strXML 
= strXML + "<set label='" + arrData[i][0]
                        
+ "'       value='" + arrData[i][1+ "' />";
            }
            strXML 
= strXML + "</chart>";
            
//String字符串流示例
            ChartUtils.outChartHTML(Constants.COLUMN3D, strXML,
                    
"myFirst"600300, response);
        
%>
    
</BODY>
</HTML>


xml数据文件:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1'>
    
<set label='Jan' value='462' />
    
<set label='Feb' value='857' />
    
<set label='Mar' value='671' />
    
<set label='Apr' value='494' />
    
<set label='May' value='761' />
    
<set label='Jun' value='960' />
    
<set label='Jul' value='629' />
    
<set label='Aug' value='622' />
    
<set label='Sep' value='376' />
    
<set label='Oct' value='494' />
    
<set label='Nov' value='761' />
    
<set label='Dec' value='960' />
</chart>

当然FusionCharts支持很多种编程语言,具体你可以看附件的CHM.
附上破解版的下载和我做的Chm帮助文档。
下载

posted on 2008-11-06 16:14 々上善若水々 阅读(6186) 评论(22)  编辑  收藏

评论

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

下载需要密码,密码是多少呢?
2008-11-06 16:50 | tp

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

我知道了,用纳米盘客户端下载就要密码。ie下载不需要
2008-11-06 16:52 | tp

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

谢谢。正需要呢。
不过是否可以在项目中用破解版,这个还真不好取舍。
2008-11-06 17:18 | IceRao

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

to:@IceRao
哈哈,我们公司用的就是破解版~
2008-11-06 17:21 | 々上善若水々

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

好东西 谢谢分享
2008-11-06 17:38 | lvq810

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

有free版本的却要用破解版,有必要吗?我觉得free版本已经基本够用了,连程序员自己都支持盗版,这年头。。。
2008-11-06 18:00 | EricFan

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

@EricFan

破解的支持的多,还有就是效果好一些。对于外国的软件,坚决用破解,因为在清朝的时候我们已经付过钱了。
2008-11-06 21:24 | supercrsky

# re: Flash图表(FusionChartsV3)的简单应用 [未登录]  回复  更多评论   

慎用盗版
2008-11-06 21:35 | xZeus

# re: Flash图表(FusionChartsV3)的简单应用 [未登录]  回复  更多评论   

好东西,有机会要用一下.
2008-11-06 23:27 | 的的

# re: Flash图表(FusionChartsV3)的简单应用 [未登录]  回复  更多评论   

谢谢。正需要呢。
2008-11-07 08:42 | gg

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

使用FLEX,交互性更好吧
2008-11-07 16:39 | dfjnn

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

不能下载
2008-11-07 22:32 | 扭曲的铅笔

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

不错的工具,不知FREE版是不是够用,做程式的还是要支持正版才好。
2008-11-08 13:55 | Vincent.Yu

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

Constants 这个类在哪里啊。怎么没有呢
2008-11-11 10:37 | pikenlike

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

能留下你的qq或者是msn么?
共同研究
2008-11-11 11:37 | pikenlike

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

@pikenlike
Constants.COLUMN3D 是我自己写的常量类,你只需要把你的swf文件的路径传进去就行了。
2008-11-12 08:47 | 々上善若水々

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

请问一下楼主,如何让FusionCharts生成的图表在网页上循环播放啊,谢谢!!!
2008-11-20 17:34 |

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

不明白你说的什么意思,不断刷新Chart自己?
2008-11-21 18:44 | 々上善若水々

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

就是说网页上有多个图表,当页面加载时所有动画效果已经完成,下边的图表无法看到动画的效果,只是个最终的结果,如果有循环控制的话就可以看到下边的图表时仍然可以看到动画效果,也相当于不断刷新自己吧!谢谢
2008-11-22 10:18 |

# re:ALL  回复  更多评论   

诸位大虾,请问这个案例是否从数据库中取值,然后通过XML加载到swf中?
有人用asp或者.net做过吗?
2009-03-24 08:43 | 网名很土

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

@网名很土
当然可以,chm中有例子
2009-03-26 14:09 | 々上善若水々

# re: Flash图表(FusionChartsV3)的简单应用   回复  更多评论   

@々上善若水々
大哥。。。貌似chm是英文版的。。。
不过还是感谢您的解答,谢谢啦,我会常来的。
2009-03-26 16:12 | 网名很土

只有注册用户登录后才能发表评论。


网站导航: