jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】


Posted in jQuery onApril 11, 2017

本文实例讲述了jQuery插件FusionCharts绘制的2D双面积图效果。分享给大家供大家参考,具体如下:

1、页面 index.html:

<!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 2D双面积图</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
<script type="text/javascript">
$(function(){
 var doubleArea = new FusionCharts( "FusionCharts/MSArea.swf", "doubleAreaId", "100%", "540", "0" );
 doubleArea.setXMLUrl("doubleArea.xml");
 doubleArea.render("doubleAreaChart");
});
</script>
</head>
<body>
  <div id="doubleAreaChart"></div>
</body>
</html>

2、双面积图数据源 doubleArea.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)2015和2016年某桥一周通过的人数' xAxisName='星期' yAxisName='人数' showValues='0'
    baseFont='微软雅黑' baseFontSize='14' baseFontColor='#00FF00' outCnvBaseFont='宋体'
    outCnvBaseFontSize='20' outCnvBaseFontColor='#00FF00' legendShadow='1'
    legendAllowDrag='1' reverseLegend='1' interactiveLegend='1' legendNumColumns='2'
    minimiseWrappingInLegend='1' showLegend='1' legendPosition='BOTTOM' showZeroPlane='1'>
  <categories>
   <category label='星期一' />
   <category label='星期二' />
   <category label='星期三' />
   <category label='星期四' />
   <category label='星期五' />
   <category label='星期六' />
   <category label='星期日' />
  </categories>
  <dataset seriesName='2015'>
   <set value='656445' />
   <set value='412555'/>
   <set value='956566' />
   <set value='125645' />
   <set value='561124' />
   <set value='265655' />
   <set value='451212' />
  </dataset>
  <dataset seriesName='2016'>
   <set value='154512'/>
   <set value='598655'/>
   <set value='654544'/>
   <set value='956565'/>
   <set value='245454' />
   <set value='965565' />
   <set value='454545' />
  </dataset>
</chart>

3、结果如图所示

jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery Plupload上传插件的使用
Apr 19 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
jQuery结合jQuery.cookie.js插件实现换肤功能示例
Oct 14 jQuery
关于jquery中attr()和prop()方法的区别
May 28 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 #jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 #jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 #jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 #jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
利用jQuery解析获取JSON数据
Apr 08 #jQuery
You might like
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
使用php 获取时间今天明天昨天时间戳的详解
2013/06/20 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jquery实现点击消失的代码
2014/03/03 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
微信小程序开发教程之增加mixin扩展
2017/08/09 Javascript
JSON 数据格式详解
2017/09/13 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
Vue.js轮播图走马灯代码实例(全)
2019/05/08 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
python中Flask框架简单入门实例
2015/03/21 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python用match()函数爬数据方法详解
2019/07/23 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
.net开发工程师面试题
2014/02/25 面试题
四年的个人工作自我评价
2013/12/10 职场文书
便利店的创业计划书
2014/01/15 职场文书
体育馆的标语
2014/06/24 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记