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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery dataTable 后台加载数据并分页实例代码
Jun 07 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
jQuery冲突问题解决方法
Jan 19 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数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP递归复制、移动目录的自定义函数分享
2014/11/18 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
jquery 常用操作方法
2010/01/28 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
JS实现的打字机效果完整实例
2016/06/20 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
JS正则获取HTML元素的方法
2017/03/31 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python实现读取json文件到excel表
2017/11/18 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
Python-for循环的内部机制
2020/06/12 Python
Python3获取cookie常用三种方案
2020/10/05 Python
CSS3实现跳动的动画效果
2016/09/12 HTML / CSS
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
社团成立邀请函
2014/01/08 职场文书
教育学习自我评价
2014/02/03 职场文书
安全月活动总结
2014/05/05 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
灵山大佛导游词
2015/02/04 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
mysql数据库入门第一步之创建表
2021/05/14 MySQL
GO中sync包自由控制并发示例详解
2022/08/05 Golang