fushioncharts的使用教程

            FusionCharts 是使用javascript 实现统计图表的js组件；其官网地址：http://www.fusioncharts.com。其早期版本FusionCharts Free 是基于flash来实现，而在2014年其脱离开flash完全使用js来实现统计图表的FusionCharts Suite XT来替代FusionCharts Free使其具有充分跨浏览器和终端的特点。到官网下载FusionCharts:

1、把下载后js包复制到项目中，然后JSP页面引入所需要的js,如下：

 

<!-- 引入fusioncharts所需要的js包 -->
<script type="text/javascript" src="${basePath}js/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="${basePath}js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>/

 

2、在JSP页面中写一个<div>,注意id为chartContainer

 

<div id="chartContainer" class="menu-21"></div>

 

 3、在JSP页面中加载写下面js代码就可加载出写死的图表

$(function(){
             var revenueChart = new FusionCharts({
        "type": "column2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource":  {
          "chart": {
            "caption": "Monthly revenue for last year",
            "subCaption": "Harry's SuperMart",
            "xAxisName": "Month",
            "yAxisName": "Revenues (In USD)",
            "theme": "fint"
         },
         "data": [
            {
               "label": "Jan",
               "value": "420000"
            },
            {
               "label": "Feb",
               "value": "810000"
            },
            {
               "label": "Mar",
               "value": "720000"
            },
            {
               "label": "Apr",
               "value": "550000"
            },
            {
               "label": "May",
               "value": "910000"
            },
            {
               "label": "Jun",
               "value": "510000"
            },
            {
               "label": "Jul",
               "value": "680000"
            },
            {
               "label": "Aug",
               "value": "620000"
            },
            {
               "label": "Sep",
               "value": "610000"
            },
            {
               "label": "Oct",
               "value": "490000"
            },
            {
               "label": "Nov",
               "value": "900000"
            },
            {
               "label": "Dec",
               "value": "730000"
            }
          ]
      }

  });
  revenueChart.render();    
});

 

 接下来做动态的图形图表

1、jsp页面的JS 这次没有从前台传数据到后台， data:{"year":"year"}，这个数据后台没接收

 

<script type="type="text/javascript"">
$(function(){
     getFormIdNumber();
     getWuquData();
});
function getFormIdNumber(){
    $.ajax({
        url:"${basePath}pb_getFormIdData.action",
        data:{"year":"year"},
        type:"post",
        dataType:"json",
        success: function(data){
        //alert(JSON.stringify(data));
        var revenueChart = new FusionCharts({
        "type": "column3d",
        "renderAt": "chartContainer1",
        "width": "400",
        "height": "300",
        "dataFormat": "json",
        "dataSource":  {
          "chart": {
            "caption": "信访件分类统计",
            "xAxisName": "信访形式",
            "yAxisName": "信访件数量",
            "theme": "fint"
         },
         "data": data.data
      }
  });
  revenueChart.render();    
        }
    });
}
function getWuquData(){
    $.ajax({
        url:"${basePath}pb_getWuquData.action",
        data:{"year":"year"},
        type:"post",
        dataType:"json",
        success: function(data){
        //alert(JSON.stringify(data));
        var revenueChart = new FusionCharts({
        "type": "pie3D",
        "renderAt": "chartContainer2",
        "width": "350",
        "height": "350",
        "dataFormat": "json",
        "dataSource":  {
          "chart": {
            "caption": "五区信访件统计",
            "xAxisName": "佛山市五个区",
            "yAxisName": "信访件数量",
            "theme": "fint"
         },
         "data": data.data
      }
  });
  revenueChart.render();    
        }
    });
}
</script>

 

2、控制层对应方法代码

    public String getFormIdData(){
        List list= petitionBusinessService.getFormIdData();
        dataMap= new HashMap<String,Object>();
        dataMap.put("msg", "success");
        dataMap.put("data",list);
        return "getFormIdData";       
    }
    public String getWuquData(){
        List list = petitionBusinessService.getWuquData();
        dataMap = new HashMap<String,Object>();
        dataMap.put("msg", "success");
        dataMap.put("data", list);
        return "getWuquData";        
    }

3、service层对应的方法，在这里拼接fushionCharts所需要的json格式

    @Override
    public List getFormIdData() {
        ArrayList<Map<String, Object>> arrayList = new ArrayList<>();
        List<Object[]> list = petitionBusinessDao.getFormData();
        for (Object[] objs : list) {
            HashedMap map = new HashedMap();
            map.put("value", objs[1]);
            map.put("label",objs[0]);            
            arrayList.add(map);
        }
        return arrayList;
    }

    @Override
    public List getWuquData() {
        ArrayList<Map<String, Object>> arrayList = new ArrayList<>();
        List<Object[]> list = petitionBusinessDao.getWuquData();
        for (Object[] objs : list) {
            HashedMap map = new HashedMap();
            map.put("value", objs[1]);
            map.put("label",objs[0]);            
            arrayList.add(map);
        }
        return arrayList;
    }

4、最后的效果