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插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 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
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
Laravel6.18.19如何优雅的切换发件账户
2020/06/14 PHP
javascript this用法小结
2008/12/19 Javascript
js精度溢出解决方案
2012/12/02 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
js实现图片切换(动画版)
2016/12/25 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
python二叉树遍历的实现方法
2013/11/21 Python
Python求导数的方法
2015/05/09 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
基于python操作ES实例详解
2019/11/16 Python
python实现简单坦克大战
2020/03/27 Python
python关于倒排列的知识点总结
2020/10/13 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
运行时异常与一般异常有何异同?
2014/01/05 面试题
普通简短的个人自我评价
2014/02/15 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
经典洗发水广告词
2014/03/13 职场文书
护士个人自我鉴定
2014/03/24 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
通知格式
2015/04/27 职场文书
外出听课学习心得体会
2016/01/15 职场文书
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技