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格式的双轴图的更多相关文章

  1. pyhton中matplotlib箱线图的绘制(matplotlib双轴图、箱线图、散点图以及相关系数矩阵图))

    //2019.07.23 1.箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,它主要包含五个基础数据:中位数,两个上下分位数以及上下边缘线数据 其中的一 ...

  2. HighCharts之2D柱状图、折线图的组合双轴图

    HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...

  3. http接口调用,传递json格式带双引号问题

    springmvc 配置好会自动转换json格式,只要配置他转格式之前,在转次String类型就好

  4. Echarts双轴图的配置.

    在series中的数据组加个属性,yAxisIndex: 1,表示第二个数据用的是第二个y轴,不加这个属性的话都是默认0,即第一个属性,再配置yAxis的值第一个为左侧坐标轴,右册坐标轴为第二个配置参 ...

  5. python字典转化成json格式。JSONEncoder和JSONDecoder两个类来实现Json字符串和dict类型数据的互相转换

    遇到问题:进行Webservice接口测试时,对接口入参数据进行了处理,变成了dict格式,去进行接口请求报错. 需要转成成json格式,双引号去扩. 如下: 更改代码: # 在Python标准库的j ...

  6. Flex实现双轴条状图

    1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...

  7. Ajax请求ashx 返回 json 格式数据常见问题

    问题:ashx 返回的字符串json格式,在前台ajax自动解析失败. 问题分析:经过排查,发现是拼接json时出现” ’  “单引号,jquery无法解析,用” “ “双引号才可以.例如: stri ...

  8. servlet与ajax数据交换(json格式)

    JSON数据格式: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于的一个子集. JSON采用完全独 ...

  9. servlet中将值以json格式传入

    详细连接https://blog.csdn.net/e_wsq/article/details/71038270$('#but_json_json').click(function(){ }; $.a ...

随机推荐

  1. JMS基础篇

    首先我们需要下载 ActiveMQ:http://activemq.apache.org/. 启动 ActiveMQ 服务:解包下载的 ActiveMQ >进去其bin 目录>双击 act ...

  2. Swing小技巧总结

    1. 使JDialog位于屏幕的中央 public void setToScreenCenter(JDialog jd) {           Dimension screenSize = Tool ...

  3. oneNote总结

    22.添加附加文件删除后,文件大小没有发生改变的(优化文件和清空回收站)

  4. CentOS上安装Git服务器

    1.安装Git 打开控制台,执行以下命令进行安装 $ yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel ...

  5. SQL SERVER FOR LINUX初体验

    今天得空,就在Ubuntu17.04上安装了SQL SERVER 2017体验下,总体来说还是不错的. 在Ubuntu上安装SQL SERVER 2017还是比较方便的,只需几条命令即可: curl ...

  6. Mysql(一):初识数据库

    一 数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件 ...

  7. Shiro笔记--shiroFilter权限过滤

    1.shiro中shiroFilter中的一些配置页面的过滤权限 <!--名字必须和web.xml里面的filter-name一样--> <bean id="shiroFi ...

  8. hibernate的事务管理和session对象的详解

    //开启事务 transaction=session.beginTransaction(); 上面为开启事务 transaction.commit();这个为提交事务 从session对象中获取事务后 ...

  9. 03 JVM的垃圾回收机制

    1.前言 理解JVM的垃圾回收机制(简称GC)有什么好处呢?作为一名软件开发者,满足自己的好奇心将是一个很好的理由,不过更重要的是,理解GC工作机制可以帮助你写出更好的Java程序. 在学习GC前,你 ...

  10. 构造N位格雷码(递归,面向对象)

    问题:递归打印出N位格雷码(相邻两个编码只有一位数字不同): 问题化归为:现有前N位的格雷码,如何构造N+1位的格雷码? 解决方法:采用递归构造格雷码集和. 递归出口:n = 1; 此时格雷码{0,1 ...