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. C#使用Redis

    一,引入dll 1.ServiceStack.Common.dll 2.ServiceStack.Interfaces.dll 3.ServiceStack.Redis.dll 4.ServiceSt ...

  2. HashMap----工作原理

    先来些简单的问题 "你用过HashMap吗?" "什么是HashMap?你为什么用到它?" 几乎每个人都会回答"是的",然后回答HashMa ...

  3. 简单认识一下什么是vue-router

    什么是vue-router? 用通俗一点的话来讲,其实就是一个url和组件之间的映射关系,当我们访问不同的url的时候在页面渲染不同的组件 vue-router怎么用? vue-router作为一个v ...

  4. ionic2 +Angular 使用自定义图标

    结合阿里巴巴矢量图标库实现在ionic2开发中使用自定义图标. step1:在阿里巴巴图标管理中新建项目,并添加自己选中的图标到购物车: step2:将购物车中的图标"添加至项目" ...

  5. CentOS7 修改网卡名称为eth0

    前言 无论是RHEL 7.还是CentOS 7都使用了NetworkManager.service来进行网络管理,当然network服务还是可以继续使用的,但也将会是过渡期的残留品了. 除此之外7版本 ...

  6. python并发编程之线程(一)：线程&守护线程&全局解释器锁

      一 threading模块介绍 multiprocess模块的完全模仿了threading模块的接口,二者在使用层面,有很大的相似性,因而不再详细介绍 官网链接:https://docs.pyth ...

  7. 让互联网更快：新一代QUIC协议在腾讯的技术实践分享

    本文来自腾讯资深研发工程师罗成在InfoQ的技术分享. 1.前言 如果:你的 App,在不需要任何修改的情况下就能提升 15% 以上的访问速度,特别是弱网络的时候能够提升 20% 以上的访问速度. 如 ...

  8. 初识vue——语法初解

    这次我们按照官网上的教程对vue的语法进行一个初步的了解: 一.声明式渲染 Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染仅DOM的系统: 1.我们在HelloWorld里面输入下 ...

  9. 【转载】什么是Windows USB设备路径，它是如何格式化的？

    http://blog.csdn.net/kingmax54212008/article/details/77837210 用于接口的复合USB设备路径格式 \?usb#vid_ vvvv&p ...

  10. ContentProvider工作过程

    ContentProvider启动过程(通过query方法触发) ContentProvider.acquireProvider--> ApplicationContentResolver.ac ...