如何拼接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"
- }
- ]
- }
- ]
- }
如何拼接FusionCharts的JSON格式的双轴图的更多相关文章
- pyhton中matplotlib箱线图的绘制(matplotlib双轴图、箱线图、散点图以及相关系数矩阵图))
//2019.07.23 1.箱形图,又称为盒式图,一般可以很好地反映出数据分布的特征,也可以进行多项数据之间分布特征的比较,它主要包含五个基础数据:中位数,两个上下分位数以及上下边缘线数据 其中的一 ...
- HighCharts之2D柱状图、折线图的组合双轴图
HighCharts之2D柱状图.折线图的组合双轴图 1.实例源码 DoubleAxis.html: <!DOCTYPE html> <html> <head> & ...
- http接口调用,传递json格式带双引号问题
springmvc 配置好会自动转换json格式,只要配置他转格式之前,在转次String类型就好
- Echarts双轴图的配置.
在series中的数据组加个属性,yAxisIndex: 1,表示第二个数据用的是第二个y轴,不加这个属性的话都是默认0,即第一个属性,再配置yAxis的值第一个为左侧坐标轴,右册坐标轴为第二个配置参 ...
- python字典转化成json格式。JSONEncoder和JSONDecoder两个类来实现Json字符串和dict类型数据的互相转换
遇到问题:进行Webservice接口测试时,对接口入参数据进行了处理,变成了dict格式,去进行接口请求报错. 需要转成成json格式,双引号去扩. 如下: 更改代码: # 在Python标准库的j ...
- Flex实现双轴条状图
1.问题背景 一般的,柱状图可以实现双轴图,但是如何实现双轴条状图? 2.实现实例 <?xml version="1.0" encoding="utf-8" ...
- Ajax请求ashx 返回 json 格式数据常见问题
问题:ashx 返回的字符串json格式,在前台ajax自动解析失败. 问题分析:经过排查,发现是拼接json时出现” ’ “单引号,jquery无法解析,用” “ “双引号才可以.例如: stri ...
- servlet与ajax数据交换(json格式)
JSON数据格式: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于的一个子集. JSON采用完全独 ...
- servlet中将值以json格式传入
详细连接https://blog.csdn.net/e_wsq/article/details/71038270$('#but_json_json').click(function(){ }; $.a ...
随机推荐
- javascript中的Date对象和Math对象
1.Date对象 1.创建Date对象 var time1=new Date() 方法1:不指定参数 var time1=new Date(); alert(time1.toLocaleString( ...
- python中的函数对象与闭包函数
函数对象 在python中,一切皆对象,函数也是对象 在python语言中,声明或定义一个函数时,使用语句: def func_name(arg1,arg2,...): func_suite 当执行流 ...
- transform复习之图片的旋转木马效果
效果示意图 <!DOCTYPE><html><head><meta http-equiv="Content-Type" content=& ...
- testlink用例的导出到Excel
一直在网上寻找怎么把testlink的用例导出到Excel中,以及把Excel中已经写好的用例导入到Testlink中的方法.根据现网的经验,然后修改了一下.贴出来,以飨有这方面需求的测试同仁. Te ...
- 2018/1/9 redis学习笔记(一)
本文不涉及redis基本命令以及javaapi的解释操作; 首先介绍下redis,一个nosql非关系型数据库,运行在缓存中,特点就是可存储的数据结构类型很多,做为KEY-VALUE数据库,它的键只能 ...
- Selenium_WebDriver_控制浏览器
版权声明:本文为博主原创文章,转载请注明出处. 浏览器环境: ①GoogleChrome:60 ②chromedriver:2.30: 访问 操作 方法 示例 访问页面 void get(java. ...
- Maven中避开测试环节
两种方法 修改pom文件 添加<skipTests>true</skipTests>标签 <plugin> <groupId>org.apache.ma ...
- 如何在Centos 7上用Logrotate管理日志文件
何为Logrotate? Logrotate是一个实用的日志管理工具,旨在简化对系统上生成大量的日志文件进行管理. Logrotate允许自动旋转压缩,删除和邮寄日志文件,从而节省宝贵的磁盘空间. L ...
- nodejs和npm的安装
下载nodejs的压缩包 网址:https://nodejs.org/en/ 下载以tar.xz结尾的包例如:node-v8.9.4-linux-x64.tar.xz 上传包到制定的目录 可以用lrz ...
- Django——ContentType及ContentType-signals的使用
一.ContentType 在django中,有一个记录了项目中所有model元数据的表,就是ContentType,表中一条记录对应着一个存在的model,所以可以通过一个ContentType表的 ...