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开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现聊天对话框
Feb 08 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jQuery treeview树形结构应用
Mar 24 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
coreseek 搜索英文的问题详解
2013/06/08 PHP
php实现加减法验证码代码
2014/02/14 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
判断、添加和删除WordPress置顶文章的相关PHP函数小结
2015/12/10 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
javascript作用域和闭包使用详解
2014/04/25 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
2019/06/13 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
创建nuxt.js项目流程图解
2020/03/13 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python中文乱码的解决方法
2013/11/04 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
Django跨域请求原理及实现代码
2020/11/14 Python
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
致400米运动员广播稿
2014/02/07 职场文书
高中生的自我评价
2014/03/04 职场文书
户外活动策划方案
2014/03/12 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
休假证明书
2015/06/24 职场文书
世界文化遗产导游词
2019/08/07 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
postgresql中如何执行sql文件
2023/05/08 PostgreSQL