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. ubuntu+mono+PetaPoco+Oracle+.net 程序部署

    前言:将windows 下开发的 .net 控制台程序(连接Oracle数据库)部署到 ubuntu 下步骤记录  2017-09-19 实验所用机器为虚拟机Ubuntu16.04  amd64 安装 ...

  2. 分布式唯一id：snowflake算法思考

    匠心零度 转载请注明原创出处,谢谢! 缘起 为什么会突然谈到分布式唯一id呢?原因是最近在准备使用RocketMQ,看看官网介绍: 一句话,消息可能会重复,所以消费端需要做幂等.为什么消息会重复后续R ...

  3. 用Elasticsearch构建电商搜索平台，一个极有代表性的基础技术架构和算法实践案例[转]

    原文链接:http://mp.weixin.qq.com/s?__biz=MzA5NzkxMzg1Nw==&mid=2653160642&idx=1&sn=608f4e6883 ...

  4. 爬虫(Spider)，反爬虫(Anti-Spider)，反反爬虫(Anti-Anti-Spider)

    爬虫(Spider),反爬虫(Anti-Spider),反反爬虫(Anti-Anti-Spider),这之间的斗争恢宏壮阔... Day 1小莫想要某站上所有的电影,写了标准的爬虫(基于HttpCli ...

  5. 腾讯IVWEB前端工程化工具feflow思考与实践

    本篇文章主要介绍腾讯IVWEB团队从0到1在工程化的思考和实践.feflow的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案.愿景是通过feflow,可以使 ...

  6. 2个域名重定向到https域名

    配置实例: [root@iZbp17q09o7e8pgg9dybd7Z conf.d]# cat company.confserver { listen 80; server_name www.yu* ...

  7. docker 实践(一)

    docker 简介 容器虚拟化,比传统的虚拟化轻量 2013年出现,发展非常迅猛 Redhat在6.5版本开始支持docker 使用go语言开发,基于apache2.0协议 开源软件,项目代码在git ...

  8. 平面上给定n条线段，找出一个点，使这个点到这n条线段的距离和最小。

    题目:平面上给定n条线段,找出一个点,使这个点到这n条线段的距离和最小. 源码如下: #include <iostream> #include <string.h> #incl ...

  9. Mysql(二)：库操作

    一 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_schema: MyS ...

  10. python多版本以及各种包管理

    python多版本以及各种包管理 python 包管理 各个版本 python版本管理 由于Python有2.x和3.x两个大的版本,而且每一个工程建立所用的各种包的版本也不尽相同(如flask1.x ...