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. [js] 如何 在 jQuery 中的 $.each 循环中使用 break 和 continue

    jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用ret ...

  2. js实现文本框输入文字个数限制代码

    html: <div class="curr_eval_box">                <input type="hidden" n ...

  3. 安装Mercurial进行版本管理

    mercurial是又一个去中心化的版本管理软件,类似git 先介绍如何安装mercurial yum -y install mercurial mercurial需要一个用户名来记录commit动作 ...

  4. mybatis No enum const class org.apache.ibatis.type.JdbcType.Integer

    mybatis报错:没有Integer这个类型的jdbcType值 原因:mybatis配置重的jdbaType类型要是大写的 如图所示:

  5. log4j源码解析-文件解析

    承接前文log4j源码解析,前文主要介绍了log4j的文件加载方式以及Logger对象创建.本文将在此基础上具体看下log4j是如何解析文件并输出我们所常见的日志格式 附例 文件的加载方式,我们就选举 ...

  6. strcpy和strcat易忽略点

    首先来看一段C程序: #include <stdio.h> #include <string.h> #include <stdlib.h> void GetMem( ...

  7. Angular4---部署---Angular 与 Nginx的邂逅

    Nginx + Angular结合操作 1.下载Nginx , 根据自己的版本下载Nginx,关于Nginx配置,请看https://www.cnblogs.com/MBirds/p/6605366. ...

  8. WPF DataTriger 用法示例代码

    用法1: <DataGridTemplateColumn Header="{lex:LocText ExamineRoom}"> <DataGridTemplat ...

  9. WPF项目学习.三

    工具代码记录 版权声明:本文为博主初学经验,未经博主允许不得转载. 一.前言 记录在学习与制作WPF过程中遇到的解决方案. 分页控件的制作,邮件发送,日志代码,excel导入导出等代码的实现过程: 二 ...

  10. MySQL事务处理案例演示

    <?php $mysqli=new mysqli("localhost", "root", "123456", "xsphp ...