首页 > Web开发 > 详细

如何拼接FusionCharts的JSON格式的双轴图

时间:2015-03-25 23:45:59      阅读:524      评论:0      收藏:0      [点我收藏+]

1、问题背景

     假如,项目中遇到这样一个问题:利用FusionCharts中的JSON格式拼接双轴图,并将JSON字符串转换成JSON对象传输到前台,在页面上展示出来。


2、设计源码

/**
 *
 * @title:DoubleYaxis.java
 * @Package:com.you.utils
 * @Description:<h3>一句话描述功能</h3>
 * @author:游海东
 * @date:2015-3-25下午8:06:57
 * @version V1.0
 *
 */
package com.you.utils;

import net.sf.json.JSONObject;

/**
 *
 * 项目名称:SSH
 * 类名称:DoubleYaxis
 * 类描述:
 * 创建人:游海东
 * 创建时间:2015-3-25下午8:06:57
 * 修改人:游海东
 * 修改时间:2015-3-25下午8:06:57
 * 修改备注:
 * @version V1.0
 *
 */
public class DoubleYaxis 
{
	/**
	 * 
	 * 方法名:transform
	 * 方法类型:ChartUtils
	 * 参数:@param str
	 * 参数:@return
	 * @return:StringBuilder
	 * @throws
	 */
	public static StringBuilder transform(String str)
	{
		return new StringBuilder(str);
	}
	
	/**
	 * 
	 * 方法名:buildJson
	 * 方法类型:DoubleYaxis
	 * 参数:@return
	 * @return :JSONObject
	 * @throws
	 */
	public static JSONObject buildJson()
	{
		StringBuilder chartHead = new StringBuilder();
		StringBuilder xAxis = new StringBuilder();
		StringBuilder yAxisOne = new StringBuilder();
		StringBuilder yAxisTwo = new StringBuilder();
		//FusionChart中的chart
		chartHead.append("{'chart':{'caption':'2014年销售水平分布','xaxisname':'月份','yaxisname':'销量','showvalues':'0'},'categories':[{'category':[");
		
		for(int i=1;i<=12;i++)
		{
			xAxis.append("{'label':'").append(i).append("月'},");
		}
		
		yAxisOne.append("'dataset':[{'seriesname':'苹果','data':[");
		yAxisTwo.append("{'seriesname':'橘子','parentyaxis':'S','data':[");
		for(int j=1;j<=12;j++)
		{
			yAxisOne.append("{'value':'").append(j*100).append("'},");
			yAxisTwo.append("{'value':'").append(j*200).append("'},");
		}
		
		chartHead.append(xAxis.toString().substring(0, xAxis.toString().length()-1))
		         .append("]}],")
		         .append(yAxisOne.toString().substring(0, yAxisOne.length()-1))
		         .append("]},")
		         .append(yAxisTwo.toString().substring(0, yAxisTwo.length()-1))
		         .append("]}]}");
		
		JSONObject jsonobject = JSONObject.fromObject(chartHead.toString());
		
		return jsonobject;
	}
	
	/**
	 * 
	 * 方法名:main
	 * 方法类型:DoubleYaxis
	 * 参数:@param args
	 * @return :void
	 * @throws
	 */
	public static void main(String[] args) 
	{
		System.out.println("FusionChart多系列图之双轴图:"+buildJson());
	}

}

运行结果:

FusionChart多系列图之双轴图:{"chart":{"caption":"2014年销售分布","xaxisname":"月份","yaxisname":"销量","showvalues":"0"},"categories":[{"category":[{"label":"1月"},{"label":"2月"},{"label":"3月"},{"label":"4月"},{"label":"5月"},{"label":"6月"},{"label":"7月"},{"label":"8月"},{"label":"9月"},{"label":"10月"},{"label":"11月"},{"label":"12月"}]}],"dataset":[{"seriesname":"苹果","data":[{"value":"100"},{"value":"200"},{"value":"300"},{"value":"400"},{"value":"500"},{"value":"600"},{"value":"700"},{"value":"800"},{"value":"900"},{"value":"1000"},{"value":"1100"},{"value":"1200"}]},{"seriesname":"橘子","parentyaxis":"S","data":[{"value":"200"},{"value":"400"},{"value":"600"},{"value":"800"},{"value":"1000"},{"value":"1200"},{"value":"1400"},{"value":"1600"},{"value":"1800"},{"value":"2000"},{"value":"2200"},{"value":"2400"}]}]}

3、格式化后

{
    "chart": {
        "caption": "2014年销售分布", 
        "xaxisname": "销量", 
        "yaxisname": "人数", 
        "showvalues": "0"
    }, 
    "categories": [
        {
            "category": [
                {
                    "label": "1月"
                }, 
                {
                    "label": "2月"
                }, 
                {
                    "label": "3月"
                }, 
                {
                    "label": "4月"
                }, 
                {
                    "label": "5月"
                }, 
                {
                    "label": "6月"
                }, 
                {
                    "label": "7月"
                }, 
                {
                    "label": "8月"
                }, 
                {
                    "label": "9月"
                }, 
                {
                    "label": "10月"
                }, 
                {
                    "label": "11月"
                }, 
                {
                    "label": "12月"
                }
            ]
        }
    ], 
    "dataset": [
        {
            "seriesname": "苹果", 
            "data": [
                {
                    "value": "100"
                }, 
                {
                    "value": "200"
                }, 
                {
                    "value": "300"
                }, 
                {
                    "value": "400"
                }, 
                {
                    "value": "500"
                }, 
                {
                    "value": "600"
                }, 
                {
                    "value": "700"
                }, 
                {
                    "value": "800"
                }, 
                {
                    "value": "900"
                }, 
                {
                    "value": "1000"
                }, 
                {
                    "value": "1100"
                }, 
                {
                    "value": "1200"
                }
            ]
        }, 
        {
            "seriesname": "橘子", 
            "parentyaxis": "S", 
            "data": [
                {
                    "value": "200"
                }, 
                {
                    "value": "400"
                }, 
                {
                    "value": "600"
                }, 
                {
                    "value": "800"
                }, 
                {
                    "value": "1000"
                }, 
                {
                    "value": "1200"
                }, 
                {
                    "value": "1400"
                }, 
                {
                    "value": "1600"
                }, 
                {
                    "value": "1800"
                }, 
                {
                    "value": "2000"
                }, 
                {
                    "value": "2200"
                }, 
                {
                    "value": "2400"
                }
            ]
        }
    ]
}


如何拼接FusionCharts的JSON格式的双轴图

原文:http://blog.csdn.net/you23hai45/article/details/44627961

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!