如何拼接FusionCharts的JSON格式的双轴图
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" } ] } ] }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。