FusionCharts报表使用方法

　　主要就是把后台数据拼成报表工具所需要的xml字符串形式传给对应的js，页面引用即可。

　　现在以一张区域水费的报表为例。

　　

public String getChartXml_qysf(List listAreaWater) {
        try {
//listAreaWater 为查询出来的区域水费数据包括区域和对应的水费
            //listAreaWater = waterChartService.findAreaWater(geoArea, waterMonth,areaId);
            String clickUrl = "";
            String caption = "区域水费统计";

            ColumnChartHelper helper = new ColumnChartHelper();
            helper.setCaption(caption);
            helper.setClickURL(clickUrl);
            for(int i = 0 ; i < listAreaWater.size() ; i++){
                Object[] str = (Object[]) listAreaWater.get(i);
                String a = (String)str[0];
                Double b = (Double)str[1];
                helper.addDataItem(a, b);
            }
            // helper.setxAxisName("科室");
            // helper.setyAxisName("人次");
            // chart.setyAxisMinValue("0"); // 最小值
            // chart.setyAxisMaxValue(getAxisMaxValue(valueList));// 最大值
            String xmlData = helper.createChartXmlData();
            return xmlData;
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return null;
        }
    }

ColumnChartHelper为柱状图报表工具类，负责将数据拼成对应的xml字符串，代码如下：

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.commons.lang.StringUtils;



/**
 * 
<chart caption="Monthly Unit Sales" xAxisName="Month" yAxisName="Units" showValues="0" decimals="0" formatNumberScale="0">
<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>
 * 
 *
 */
public class ColumnChartHelper {
    private String caption;// 标题
    private String  xAxisName;
    private String yAxisName;
    private String showValues="1";//是否在图表显示对应的数据值，默认为1(True)
    private String decimals="0";// 保留0位小数，四舍五入
    private String formatNumberScale="0";//是否格式化数字,默认为1(True),自动的给你的数字加上K（千）或M（百万）；若取0,则不加K或M
    private String clickURL;
    private List<String> paletteColors=new ArrayList<String>();//指定数据项显示颜色paletteColors='FF5904,0372AB,FF0000'
    private List<Map<String,String>> dataSet=new ArrayList<Map<String,String>>();


    public void addDataItem(String label,Number value){
        Map<String,String> itemMap=new HashMap<String,String>();
        itemMap.put("label", label);
        itemMap.put("value", value.toString());
        dataSet.add(itemMap);
    }
    public void addpaletteColor(String color){
        paletteColors.add(color);
    }
    
    public String createChartXmlData(){
        StringBuilder builder=new StringBuilder();
        //ChartColorsHelper.getRandomPalette()  生成1-5的随机数，
        builder.append("<chart palette='"+ChartColorsHelper.getRandomPalette()+"' bgColor='FFFFFF' caption='"+caption+"' ");
        //builder.append("xAxisName='"+xAxisName+"' ");
        //builder.append("yAxisName='"+yAxisName+"' ");
        if(StringUtils.isNotBlank(clickURL)){
            builder.append("clickURL='"+clickURL+"' ");
        }
        StringBuilder colors=new StringBuilder();
        if(paletteColors.size()>0){
            for (int i = 0; i < paletteColors.size(); i++) {
                colors.append(paletteColors.get(i));
                if(i<paletteColors.size()-1){
                    colors.append(",");
                }
            }
            builder.append("paletteColors='"+colors.toString()+"' ");
        }
        //builder.append("paletteColors='FF5904,0372AB,FF0000,FF5904,0372AB' ");
        builder.append("showValues='"+showValues+"' ");
        builder.append("decimals='"+decimals+"' ");
        builder.append("formatNumberScale='"+formatNumberScale+"' >");
        for (int i = 0; i < dataSet.size(); i++) {
            Map<String, String> map=dataSet.get(i);
            if(i==3){
                //把默认的有点 红色 的颜色替换成其他颜色
                builder.append("<set color='BCF0DA' label='"+map.get("label")+"' value='"+map.get("value")+"'/>");
            }else{
                builder.append("<set label='"+map.get("label")+"' value='"+map.get("value")+"'/>");
            }
        }
        /*for (Map<String, String> map : dataSet) {
            builder.append("<set label='"+map.get("label")+"' value='"+map.get("value")+"'/>");
        }*/
     builder.append("</chart>");
     
     return builder.toString();
    }
    public String getCaption() {
        return caption;
    }

    public void setCaption(String caption) {
        this.caption = caption;
    }

    public String getxAxisName() {
        return xAxisName;
    }

    public void setxAxisName(String xAxisName) {
        this.xAxisName = xAxisName;
    }

    public String getyAxisName() {
        return yAxisName;
    }

    public void setyAxisName(String yAxisName) {
        this.yAxisName = yAxisName;
    }

    public String getShowValues() {
        return showValues;
    }

    public void setShowValues(String showValues) {
        this.showValues = showValues;
    }

    public String getDecimals() {
        return decimals;
    }

    public void setDecimals(String decimals) {
        this.decimals = decimals;
    }

    public String getFormatNumberScale() {
        return formatNumberScale;
    }

    public void setFormatNumberScale(String formatNumberScale) {
        this.formatNumberScale = formatNumberScale;
    }

    public String getClickURL() {
        return clickURL;
    }

    public void setClickURL(String clickURL) {
        this.clickURL = clickURL;
    }


}

页面上比较简单

<script type="text/javascript" src="${pageContext.request.contextPath}/chart/script/FusionCharts.js"></script>
。
.
.
.
.
.
 $(document).ready(function(){
           var width=480;
           var height=360;
           var chart = new FusionCharts("${pageContext.request.contextPath}/chart/swf/Column3D.swf", "myChartId1",width, height);
           //alert("${chart_xml}");
         chart.setDataXML("${chart_xml}");           
         chart.render("chart1");     
      });

.
.
.
.
.
.
<a id="chart1" href="" num='1'></a>

页面代码省去很多无关东西，只留下报表相关的

实现效果如图：