1、问题背景

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

2、设计源码

  1. /**
  2. *
  3. * @title:DoubleYaxis.java
  4. * @Package:com.you.utils
  5. * @Description:<h3>一句话描述功能</h3>
  6. * @author:游海东
  7. * @date:2015-3-25下午8:06:57
  8. * @version V1.0
  9. *
  10. */
  11. package com.you.utils;
  12.  
  13. import net.sf.json.JSONObject;
  14.  
  15. /**
  16. *
  17. * 项目名称:SSH
  18. * 类名称:DoubleYaxis
  19. * 类描述:
  20. * 创建人:游海东
  21. * 创建时间:2015-3-25下午8:06:57
  22. * 修改人:游海东
  23. * 修改时间:2015-3-25下午8:06:57
  24. * 修改备注:
  25. * @version V1.0
  26. *
  27. */
  28. public class DoubleYaxis
  29. {
  30. /**
  31. *
  32. * 方法名:transform
  33. * 方法类型:ChartUtils
  34. * 参数:@param str
  35. * 参数:@return
  36. * @return:StringBuilder
  37. * @throws
  38. */
  39. public static StringBuilder transform(String str)
  40. {
  41. return new StringBuilder(str);
  42. }
  43.  
  44. /**
  45. *
  46. * 方法名:buildJson
  47. * 方法类型:DoubleYaxis
  48. * 参数:@return
  49. * @return :JSONObject
  50. * @throws
  51. */
  52. public static JSONObject buildJson()
  53. {
  54. StringBuilder chartHead = new StringBuilder();
  55. StringBuilder xAxis = new StringBuilder();
  56. StringBuilder yAxisOne = new StringBuilder();
  57. StringBuilder yAxisTwo = new StringBuilder();
  58. //FusionChart中的chart
  59. chartHead.append("{'chart':{'caption':'2014年销售水平分布','xaxisname':'月份','yaxisname':'销量','showvalues':'0'},'categories':[{'category':[");
  60.  
  61. for(int i=1;i<=12;i++)
  62. {
  63. xAxis.append("{'label':'").append(i).append("月'},");
  64. }
  65.  
  66. yAxisOne.append("'dataset':[{'seriesname':'苹果','data':[");
  67. yAxisTwo.append("{'seriesname':'橘子','parentyaxis':'S','data':[");
  68. for(int j=1;j<=12;j++)
  69. {
  70. yAxisOne.append("{'value':'").append(j*100).append("'},");
  71. yAxisTwo.append("{'value':'").append(j*200).append("'},");
  72. }
  73.  
  74. chartHead.append(xAxis.toString().substring(0, xAxis.toString().length()-1))
  75. .append("]}],")
  76. .append(yAxisOne.toString().substring(0, yAxisOne.length()-1))
  77. .append("]},")
  78. .append(yAxisTwo.toString().substring(0, yAxisTwo.length()-1))
  79. .append("]}]}");
  80.  
  81. JSONObject jsonobject = JSONObject.fromObject(chartHead.toString());
  82.  
  83. return jsonobject;
  84. }
  85.  
  86. /**
  87. *
  88. * 方法名:main
  89. * 方法类型:DoubleYaxis
  90. * 参数:@param args
  91. * @return :void
  92. * @throws
  93. */
  94. public static void main(String[] args)
  95. {
  96. System.out.println("FusionChart多系列图之双轴图:"+buildJson());
  97. }
  98.  
  99. }

运行结果:

  1. 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、格式化后

  1. {
  2. "chart": {
  3. "caption": "2014年销售分布",
  4. "xaxisname": "销量",
  5. "yaxisname": "人数",
  6. "showvalues": "0"
  7. },
  8. "categories": [
  9. {
  10. "category": [
  11. {
  12. "label": "1月"
  13. },
  14. {
  15. "label": "2月"
  16. },
  17. {
  18. "label": "3月"
  19. },
  20. {
  21. "label": "4月"
  22. },
  23. {
  24. "label": "5月"
  25. },
  26. {
  27. "label": "6月"
  28. },
  29. {
  30. "label": "7月"
  31. },
  32. {
  33. "label": "8月"
  34. },
  35. {
  36. "label": "9月"
  37. },
  38. {
  39. "label": "10月"
  40. },
  41. {
  42. "label": "11月"
  43. },
  44. {
  45. "label": "12月"
  46. }
  47. ]
  48. }
  49. ],
  50. "dataset": [
  51. {
  52. "seriesname": "苹果",
  53. "data": [
  54. {
  55. "value": "100"
  56. },
  57. {
  58. "value": "200"
  59. },
  60. {
  61. "value": "300"
  62. },
  63. {
  64. "value": "400"
  65. },
  66. {
  67. "value": "500"
  68. },
  69. {
  70. "value": "600"
  71. },
  72. {
  73. "value": "700"
  74. },
  75. {
  76. "value": "800"
  77. },
  78. {
  79. "value": "900"
  80. },
  81. {
  82. "value": "1000"
  83. },
  84. {
  85. "value": "1100"
  86. },
  87. {
  88. "value": "1200"
  89. }
  90. ]
  91. },
  92. {
  93. "seriesname": "橘子",
  94. "parentyaxis": "S",
  95. "data": [
  96. {
  97. "value": "200"
  98. },
  99. {
  100. "value": "400"
  101. },
  102. {
  103. "value": "600"
  104. },
  105. {
  106. "value": "800"
  107. },
  108. {
  109. "value": "1000"
  110. },
  111. {
  112. "value": "1200"
  113. },
  114. {
  115. "value": "1400"
  116. },
  117. {
  118. "value": "1600"
  119. },
  120. {
  121. "value": "1800"
  122. },
  123. {
  124. "value": "2000"
  125. },
  126. {
  127. "value": "2200"
  128. },
  129. {
  130. "value": "2400"
  131. }
  132. ]
  133. }
  134. ]
  135. }

如何拼接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. javascript中的Date对象和Math对象

    1.Date对象 1.创建Date对象 var time1=new Date() 方法1:不指定参数 var time1=new Date(); alert(time1.toLocaleString( ...

  2. python中的函数对象与闭包函数

    函数对象 在python中,一切皆对象,函数也是对象 在python语言中,声明或定义一个函数时,使用语句: def func_name(arg1,arg2,...): func_suite 当执行流 ...

  3. transform复习之图片的旋转木马效果

    效果示意图 <!DOCTYPE><html><head><meta http-equiv="Content-Type" content=& ...

  4. testlink用例的导出到Excel

    一直在网上寻找怎么把testlink的用例导出到Excel中,以及把Excel中已经写好的用例导入到Testlink中的方法.根据现网的经验,然后修改了一下.贴出来,以飨有这方面需求的测试同仁. Te ...

  5. 2018/1/9 redis学习笔记(一)

    本文不涉及redis基本命令以及javaapi的解释操作; 首先介绍下redis,一个nosql非关系型数据库,运行在缓存中,特点就是可存储的数据结构类型很多,做为KEY-VALUE数据库,它的键只能 ...

  6. Selenium_WebDriver_控制浏览器

    版权声明:本文为博主原创文章,转载请注明出处.  浏览器环境: ①GoogleChrome:60 ②chromedriver:2.30: 访问 操作 方法 示例 访问页面 void get(java. ...

  7. Maven中避开测试环节

    两种方法 修改pom文件 添加<skipTests>true</skipTests>标签 <plugin> <groupId>org.apache.ma ...

  8. 如何在Centos 7上用Logrotate管理日志文件

    何为Logrotate? Logrotate是一个实用的日志管理工具,旨在简化对系统上生成大量的日志文件进行管理. Logrotate允许自动旋转压缩,删除和邮寄日志文件,从而节省宝贵的磁盘空间. L ...

  9. nodejs和npm的安装

    下载nodejs的压缩包 网址:https://nodejs.org/en/ 下载以tar.xz结尾的包例如:node-v8.9.4-linux-x64.tar.xz 上传包到制定的目录 可以用lrz ...

  10. Django——ContentType及ContentType-signals的使用

    一.ContentType 在django中,有一个记录了项目中所有model元数据的表,就是ContentType,表中一条记录对应着一个存在的model,所以可以通过一个ContentType表的 ...