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 禁止鼠标右键并监听右键事件
Apr 27 jQuery
jQuery实现的简单在线计算器功能
May 11 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery HTML css()方法与css类实例详解
May 20 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
基于文本的留言簿
2006/10/09 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
javascript模拟php函数in_array
2015/04/27 Javascript
学习JavaScript设计模式之单例模式
2016/01/19 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
vuejs选中当前样式active的实例
2018/08/22 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
OpenCV python sklearn随机超参数搜索的实现
2020/01/17 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
新东网科技Java笔试题
2012/07/13 面试题
历史专业个人求职信分享
2013/12/20 职场文书
社区反邪教工作方案
2014/06/16 职场文书
六一儿童节活动总结
2014/08/27 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
服务行业标语口号
2015/12/26 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
你真的会用Mysql的explain吗
2022/03/31 MySQL