FusionCharts ScrollColumn2D图

1、JSP页面

ScrollColumn2D.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FusionCharts ScrollColumn2D图</title>
<script type="text/javascript" src="../scripts/FusionCharts/js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../scripts/FusionCharts/js/FusionCharts.js"></script>
<script type="text/javascript">
    $(function(){
    	var scrollColumn2D = new FusionCharts( "../scripts/FusionCharts/swf/ScrollColumn2D.swf", "scrollColumn2D_Id", "500", "600", "0" );
    	scrollColumn2D.setXMLUrl("data/scrollColumn2D.xml");
    	scrollColumn2D.render("scrollColumn2D_div");
    });
</script>
</head>
<body>
  <div id="scrollColumn2D_div"></div>
</body>
</html>

2、数据源

scrollColumn2D.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='2014年和2013年年收入' xAxisName='月份' yAxisName='收入' showValues='0' useRoundEdges='1' baseFontSize='14'
       baseFontColor='FF0000'>

   <categories>
      <category label='一月' />
      <category label='二月' />
      <category label='三月' />
      <category label='四月' />
      <category label='五月' />
      <category label='六月' />
      <category label='七月' />
      <category label='八月' />
      <category label='九月' />
      <category label='十月' />
      <category label='十一月' />
      <category label='十二月 ' />
   </categories>

   <dataset seriesName='2014'>
      <set value='27456' />
      <set value='28950'/>
      <set value='51100' />
      <set value='29560' />
      <set value='45120' />
      <set value='95320' />
      <set value='65231' />
      <set value='36530' />
      <set value='23321' />
      <set value='32312' />
      <set value='98856' />
      <set value='21212' />
   </dataset>

   <dataset seriesName='2013'>
      <set value='23322'/>
      <set value='23298'/>
      <set value='78454'/>
      <set value='23233'/>
      <set value='45122' />
      <set value='12212' />
      <set value='23212' />
      <set value='85455' />
      <set value='55323' />
      <set value='23233' />
      <set value='62622' />
      <set value='32333' />
   </dataset>

</chart>

3、运行结果

（1）一月到六月数据

（2）七月到十二月数据

FusionCharts ScrollColumn2D图的更多相关文章

  1. FusionCharts中图的属性的总结归纳

    FusionCharts中图的属性的总结归纳 1.横坐标label间隔显示 labelStep="4" 2.柱状图有椭圆角 useRoundEdges="1"

  2. FusionCharts MSBar3D图

    1.静态页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  3. FusionCharts MSBar2D图

    1.页面展示 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  4. FusionCharts Marimekko图

    1.Marimekko静态页面 Marimekko.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

  5. FusionCharts Free 甘特图

    用FusionCharts做甘特图 1.同步方式(用xml格式字符) 前台aspx代码 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  6. 使用Fusioncharts实现后台处理进度的前台展示

    本文要解决两个问题: 1.在ajax的数据交互中,如何获得后台的处理进度? 2.在前台界面中,如何使用图形化的方式展示后台处理进度?   关于第一个问题,不是本文的重点,简单说一下思路.因为HTTP协 ...

  7. FusionCharts使用问题及解决方法(四)-FusionCharts常见问题大全

    在前3篇文章中,我们总结了FusionCharts图表的一些常见问题(FAQ)及解决方法,本文继续讨论FusionCharts使用者常见的一些复杂的报错及解决方法. 问题描述:使用FusionChar ...

  8. 使用FusionCharts出柱状图和饼状图

    在最近的项目中,需要使用出图,能够查看柱状图,饼状图等效果,刚开始我们用JS写的效果,发现效果不理想,找了一个JS插件发现效果还是不理想,客户也不满意,客户希望要很炫的效果,最后我们使用了Fusion ...

  9. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

随机推荐

  1. redis 简易监控的几种方法

    简介 针对Redis 实现性能监控的几种方法 一.使用info命令 命令说明 127.0.0.1:6380> info # Server redis_version:3.2.11 redis_g ...

  2. 一个简单的node.js服务

    var http = require('http'); var qs = require('querystring'); var server = http.createServer(function ...

  3. OS模块的常用内置方法

    chdir 修改当前工作目录到指定目录 Change the current working directory to the specified path. chmod 修改一个文件的访问权限 Ch ...

  4. springboot(二十)：使用spring-boot-admin对spring-boot服务进行监控

    上一篇文章<springboot(十九):使用Spring Boot Actuator监控应用>介绍了Spring Boot Actuator的使用,Spring Boot Actuato ...

  5. BZOJ 3879: SvT [虚树 后缀树]

    传送门 题意: 多次询问,给出一些后缀,求两两之间$LCP$之和 哈哈哈哈哈哈哈竟然$1A$了,刚才还在想如果写不好这道题下节数学就不上了,看来是上天让我上数学课啊 $Suffix\ Virtual\ ...

  6. 51NOD 1821 最优集合 [并查集]

    传送门 题意: 一个集合S的优美值定义为:最大的x,满足对于任意i∈[1,x],都存在一个S的子集S',使得S'中元素之和为i. 给定n个集合,对于每一次询问,指定一个集合S1和一个集合S2,以及一个 ...

  7. BZOJ 1018: [SHOI2008]堵塞的交通traffic [线段树 区间信息]

    1018: [SHOI2008]堵塞的交通traffic Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 3064  Solved: 1027[Submi ...

  8. Java流机制学习

    基本概念 BaseStream 基础流是一个可行并行或者串行的汇聚操作的元素序列.可以进行顺序遍历,也可以进行并发遍历.通过它也可以得到一个并行流或者串行流. Stream 是Java中流的表现接口, ...

  9. python重新利用shodan API

    前言: 之前写过一个shodan的API调用 感觉写的不这么好.然后现在重新写一个 shodan介绍: shodan是互联网上最可怕的搜索引擎. CNNMoney的一篇文章写道,虽然目前人们都认为谷歌 ...

  10. 在阿里云上搭建 Spark 实验平台

    在阿里云上搭建 Spark 实验平台 Hadoop2.7.3+Spark2.1.0 完全分布式环境 搭建全过程 [传统文化热爱者] 阿里云服务器搭建spark特别坑的地方 阿里云实现Hadoop+Sp ...