FusionCharts 3.2.1 flash 图表展示、数据钻取

StackedColumn3DLineDY.swf 效果展示：

一、页面代码

<div id="chart2div" align="center" style="margin: 5px 0 0 5px;float: left;700px;border: 1px solid #fff;"></div>
<script type="text/javascript">
var myChart2 = new FusionCharts("/fcharts/StackedColumn3DLineDY.swf", "chartId2", "700", "300");
myChart2.setDataURL(escape("/report/home/02-gzxjscbqkb.xml"));
myChart2.render("chart2div");   
</script>

二、XML数据文件内容

<graph caption='各中心结算成本情况表(二季度)' PYAxisName='结入后成本(万元)'
    SYAxisName='环比增幅(%)' syAxisMaxValue='50' showSYAxisValues='0' showSum='1'
    showValues='0' unescapelinks='0' formatNumberScale='0' formatNumber='0'
    decimalPrecision='0' baseFontSize='12' baseFont='微软雅黑' chartTopMargin='5'
    chartBottomMargin='5' maxColWidth='30'>
    <categories>
        <category name='网优中心' />
        <category name='呼叫中心' />
        <category name='业务支撑系统部' />
        <category name='ICT' />
        <category name='客响中心' />
        <category name='培训中心' />
        <category name='网管中心' />
        <category name='增值业务中心' />
        <category name='集团客户部' />
        <category name='工建中心' />
        <category name='核算中心' />
    </categories>
    <dataset seriesName='结入后成本(万元)' parentYAxis='P'>
        <set value='248' color='afd8f8' />
        <set value='3668' color='f6bd0e' />
        <set value='7554' color='8cba00' />
        <set value='741' color='fe8e46' />
        <set value='158' color='008e8f' />
        <set value='579' color='0097cd' />
        <set value='411' color='d64647' />
        <set value='5256' color='8e468f' />
        <set value='551' color='598726' />
        <set value='256' color='b2aa00' />
        <set value='197' color='008ed6' />

    </dataset>
    <dataset seriesName='环比增幅(%)' parentYAxis='S'>
        <set value='1' />
        <set value='17' />
        <set value='3' />
        <set value='-7' />
        <set value='14' />
        <set value='169' />
        <set value='28' />
        <set value='14' />
        <set value='30' />
        <set value='40' />
        <set value='51' />

    </dataset>
</graph>

三、struts2 框架动态加载内容
Action类增加方法：

    public void doZscbhzbChart1() throws IOException {
        // 读取结出中心列表
        List zxList = DAO_CheckOut.doSelect(
                "select * from t_check_out order by sn", new Object[] {});
        if (zxList == null) {
            zxList = new ArrayList();
        }
        List cbkmList = DAO_Dict.getSubLevels("cbkm"); // 成本科目类型
        // 添加　综合保障分摊
        BN_Dict zhbz = new BN_Dict();
        zhbz.setOp_id("zzlx-zhbz");
        zhbz.setOp_name("综合保障分摊");
        cbkmList.add(zhbz);

        Map valueMap = DAO_Report.getValueMap(id_ver, "report-zscbhzb");

        HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/xml;charset=utf-8");
        response.setHeader("Cache-Control", "no-cache");
        PrintWriter out = response.getWriter();
        out.write("<graph caption='成本各中心分布情况' "+CHART_STYLE+">");
        out.write("<categories>");
        for (int i = 0; i < zxList.size(); i++) {
            BN_CheckOut checkOut = (BN_CheckOut) zxList.get(i);
            out.write("<category name='" + checkOut.getShort_name() + "' />");
        }
        out.write("</categories>");
        for (int i = 0; i < cbkmList.size(); i++) {
            BN_Dict cbkm = (BN_Dict) cbkmList.get(i);
            out.write("<dataset seriesName='" + (i + 1) + "-"
                    + cbkm.getOp_name() + "'>");
            for (int j = 0; j < zxList.size(); j++) {
                BN_CheckOut checkOut = (BN_CheckOut) zxList.get(j);
                out.write("<set value='"
                        + DAO_Report.formatValue(valueMap.get(cbkm.getOp_id()
                                + "--&" + checkOut.getDept_no() + "--"))
                        + "'  " + getGraphColor(i) + " />");
            }
            out.write("</dataset>");
        }

        out.write("</graph>");
        out.flush();
        out.close();
    }

前台页面请求：

myChart1.setDataURL(escape("/manage/report.do?action=doGdsjrcbChart1"));

struts.xml　无须特殊配置即可使用

四、解决数据重复加载的问题

找到FusionCharts.js，利用js工具格式化为可阅读内容

定位到756行，把内容做如下注释掉即可：

            this.options.dataSource = c;
            xStore[this.id] = g.ajax.get(decodeURIComponent(c), function(a, x) {
                var b = false;
                /*   
                g.raiseEvent("DataLoadRequestCompleted", {
                    source:"XmlHttpRequest",
                    url:c,
                    data:a,
                    dataFormat:f,
                    cancelDataLoad:function() {
                        b = true;
                        this.cancelDataLoad = function() {
                            return false;
                        };
                        return true;
                    },
                    xmlHttpRequestObject:x
                }, obj);
               */
                if (b !== true) {
                    obj.setChartData(a, f, e);

五、解决set 中 link 脚本中文乱码问题

out.write("<set name='Dec' value='39800' link="javascript:void(top.addMyTab('各中心成本汇总表','/manage/report.do?action=doGzxcbhzb&module=bbgl-gzxcbhzb','icon-shezi2'))"/>");

在graph节点中设置unescapelinks='0' 属性即可