FusionChart 复杂类型图表

最新推荐文章于 2022-06-16 11:59:40 发布

「已注销」

最新推荐文章于 2022-06-16 11:59:40 发布

阅读量846

点赞数

文章标签：图形 FusionCharts

本文链接：https://blog.csdn.net/Murex_Dustyone/article/details/52598002

版权

最近公司项目要求做一个关于后台数据的图表以便于boss们做好control选了很多关于图表制作的工具，最后决定选用FusionChart,应为个人觉得这图表制作工具非常简单而且图形展示非常丰富，能满足一般项目需求。更多学习资料参考：http://www.fusioncharts.com。

话不多说上需求和代码！

项目需求：老大只给了我以下一个样式图，让后根据实际情况把图形作出来。图表与数据库动态交互，其中费用项还有子项比如有其他费用组成，具体效果看后面的成型图。

代码：

项目用的是Strus2,用JSP页面直接装在图表就行了，其中JSP页面中要引入如下两个JS（好像3.5V以后的版本舍弃并集成了很多东西此后的版本对FusionChart的应用只需下载最Latest的包就可以了。）：

<script type="text/javascript" src="../fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="../fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>

后台代码：

这里只展示Action中的方法，然后定义核心数据。

/**
* 用户统计信息
* @return
* @throws Exception 
*/
public String userCountInfodisplay() throws Exception{
//返回参数
String createTimeStart =StringUtils.isNullOrEmpty(paramMap.get("createTimeStart"))   ? "" : paramMap
.get("createTimeStart");
String createTimeEnd = StringUtils.isNullOrEmpty(paramMap.get("createTimeEnd"))   ? "" : paramMap
.get("createTimeEnd");
List<Map<String, Object>> userCountInfo = null;
try {
List<Map<String,String>> countNewList=new ArrayList<Map<String,String>>();
List<Map<String,String>> countUsrCustList=  new ArrayList<Map<String,String>>();
List<Map<String,String>> countUsrBankList=new ArrayList<Map<String,String>>();
List<Map<String,String>> totalAmountList=  new ArrayList<Map<String,String>>();
List<Map<String,String>> countInvestList=new ArrayList<Map<String,String>>();
List<Map<String,String>> countfirstList=new ArrayList<Map<String,String>>();
userCountInfo = statisManageService.userCountInfo(createTimeStart,createTimeEnd);
if(null!=userCountInfo&&userCountInfo.size()>0){
for(Map<String,Object> map:userCountInfo){
//新注册用户
Map<String,String> countNewMap=new HashMap<String,String>();
countNewMap.put("value", String.valueOf( map.get("countNew")));
countNewList.add(countNewMap);
//实名用户
Map<String,String> countUsrCustMap=new HashMap<String,String>();
countUsrCustMap.put("value", String.valueOf( map.get("countUsrCust")));
countUsrCustList.add(countUsrCustMap);
//绑卡用户
Map<String,String> countUsrBankMap=new HashMap<String,String>();
countUsrBankMap.put("value", String.valueOf( map.get("countUsrBank")));
countUsrBankList.add(countUsrBankMap);
//投资总额
Map<String,String> totalAmountMap=new HashMap<String,String>();
totalAmountMap.put("value", String.valueOf( map.get("totalAmount")));
totalAmountList.add(totalAmountMap);
//投资人数
Map<String,String> countInvestMap=new HashMap<String,String>();
countInvestMap.put("value", String.valueOf( map.get("countInvest")));
countInvestList.add(countInvestMap);
//首投人数
Map<String,String> countfirstMap=new HashMap<String,String>();
countfirstMap.put("value", String.valueOf( map.get("countfirst")));
countfirstList.add(countfirstMap);
}}

JSONArray countNew = JSONUtils.toJSONArray(countNewList);
String countNew_json = countNew.toString();

JSONArray countUsrCust = JSONUtils.toJSONArray(countUsrCustList);
String countUsrCust_json = countUsrCust.toString();

JSONArray countUsrBank = JSONUtils.toJSONArray(countUsrBankList);
String countUsrBank_json = countUsrBank.toString();

JSONArray totalAmount = JSONUtils.toJSONArray(totalAmountList);
String totalAmount_json = totalAmount.toString();

JSONArray countInvest = JSONUtils.toJSONArray(countInvestList);
String countInvest_json = countInvest.toString();

JSONArray countfirst = JSONUtils.toJSONArray(countfirstList);
String countfirst_json = countfirst.toString();

//定义 dataInfo,让后传到前台去，生成图表的核心代码
String dataInfo="";
dataInfo="[" +
 "{\"dataset\": [ {\"seriesname\": \"新增注册\",\"data\": "+countNew_json+" },] }," + //注册人数
 "{\"dataset\": [ {\"seriesname\": \"实名人数\",\"data\":  "+countUsrCust_json+"},] }," +  //实名认证
 "{\"dataset\": [ {\"seriesname\": \"绑卡人数\",\"data\":  "+countUsrBank_json+"},] }," +  //绑卡人数已
 "{\"dataset\": [ {\"seriesname\": \"投资总金额(/万)\",\"data\":  "+totalAmount_json+"},] }," +  //投资人数
 "{\"dataset\": [ {\"seriesname\": \"投资人数\",\"data\":  "+countInvest_json+"},] }," +  //投资金额.
 "{\"dataset\": [ {\"seriesname\": \"首投人数\",\"data\":  "+countfirst_json+"},] }," +  //投资金额.

//单列多项组合图
 "{\"dataset\": [ " +
   "{\"seriesname\":\"推广费用\",\"data\":"+totalAmount_json+"}," +
   "{\"seriesname\":\"活动费用\",\"data\":"+totalAmount_json+"}" +
  // "{\"seriesname\":\"经费_III\",\"data\":"+json1+"}" +
  "]}"+
 "]";
System.out.println("dataInfo:"+dataInfo);
request().setAttribute("data", dataInfo);
} catch (Exception e) {
log.error(e);
e.printStackTrace();
throw e;
}
return SUCCESS;
}

JSP页面代码以及接收数据：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/include/taglib.jsp"%>
<script type="text/javascript" src="../fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="../fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">

  FusionCharts.ready(function(){
  			 var dataInfo = ${data};
    var revenueChart = new FusionCharts({
        "type": "msstackedcolumn2dlinedy",
        "renderAt": "chartContainer",
        "width": "100%",
        "height": "600",
        "dataFormat": "json",
        "dataSource":{
    "chart": {
    	//报表名字
        "caption": "综合报表",
        //X坐标名
        "xAxisname": "月份",
        //Y坐标名
        "yAxisName": "数量(元或人次)",
        "syAxisName": "投资总额",
      	//计量单位
        //"numberPrefix": "$",
        //
       // "plotFillAlpha": "80",
       //表柱颜色 
        "paletteColors":  "#9BCD9B,#FFEC8B,#9FB6CD,#006400,	#FF0000,#FFA500,#9400D3,#FF00FF",
        "baseFontColor": "#333333",
        "baseFont": "Helvetica Neue,Arial",
        //主标题字体大小
        "captionFontSize": "14",
        //副标题字体大小
        "subcaptionFontSize": "14",
        //副标题字体
        "subcaptionFontBold": "0",
        //Chart边线，0无1有
        "showBorder": "0",
        //背景颜色
        "bgColor": "#ffffff",
        //是否有阴影
        "showShadow": "0",
        //图标作用区，我们以后叫画布，的背景颜色. 
        "canvasBgColor": "#ffffff",
        //Number	0-100	画布边框透明度 
        "canvasBorderAlpha": "0",
        //透明
        "divlineAlpha": "100",
        "divlineColor": "#999999",
        "divlineThickness": "1",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1",
        "usePlotGradientColor": "0",
        "showplotborder": "0",
        "valueFontColor": "#080808",
        "placeValuesInside": "1",
        "showHoverEffect": "1",
        "rotateValues": "1",
        "showXAxisLine": "1",
        "xAxisLineThickness": "1",
        "xAxisLineColor": "#999999",
        
        "sYAxisNameFont": "Arial",
        "sYAxisNameFontSize": "12",
        "sYAxisNameFontColor": "#003366",
        "sYAxisNameFontBold": "1",
        "sYAxisNameFontItalic": "1",
        "sYAxisNameAlpha": "50",
		"sYAxisMaxValue": "1000",
        
        "showAlternateHGridColor": "0",
        "legendBgAlpha": "0",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendItemFontSize": "10",
        "legendItemFontColor": "#666666",
        "exportEnabled":"1"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "一月"
                },
                {
                    "label": "二月"
                },
                {
                    "label": "三月"
                },
                {
                    "label": "四月"
                },
                {
                    "label": "五月"
                },
                {
                    "label": "六月"
                },
                {
                    "label": "七月"
                },
                {
                    "label": "八月"
                },
                {
                    "label": "九月"
                },
                {
                    "label": "十月"
                },
                {
                    "label": "十一月"
                },
                {
                    "label": "十二月"
                }
                ]}],
  "dataset":dataInfo,
    
}
  });
//修改成中文提示 
 		    revenueChart.configure("ChartNoDataText","没有查询到相关数据");
            revenueChart.configure("LoadDataErrorText","加载数据出错啦!");
            revenueChart.configure("XMLLoadingText","加载数据中...");
            revenueChart.configure("InvalidXMLText","初始化...");
            revenueChart.configure("ReadingDataText","读取数据...");
            revenueChart.configure("ChartNotSupported","图表不支持");
            revenueChart.configure("LoadingText","加载");
revenueChart.render();
});
</script>
   <div id="chartContainer"></div>

最后成型图：