jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】


Posted in jQuery onApril 10, 2017

本文实例讲述了jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果。分享给大家供大家参考,具体如下:

1、设计思路

(1)了解组合图的特性以及用法,选用图的类型;

(2)设计出两根柱子和两根折线,分开展示。

2、设计步骤

(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>FuionCharts 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 column2DLine = new FusionCharts( "FusionCharts/MSCombi2D.swf", "doubleAreaId", "100%", "540", "0" );
 column2DLine.setXMLUrl("columnLine.xml");
 column2DLine.render("columnLine");
});
</script>
</head>
<body>
  <div id="columnLine"></div>
</body>
</html>

(2)设计出数据源 columnLine.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)2013-2016年某人年收入详细' xAxisName='月份' yAxisName='收入' showValues='0'
    baseFont='微软雅黑' baseFontSize='14' baseFontColor='#00FF00' outCnvBaseFont='宋体'
    outCnvBaseFontSize='20' outCnvBaseFontColor='#0000FF'>
  <categories>
   <category label='一月' />
   <category label='二月' />
   <category label='三月' />
   <category label='四月' />
   <category label='五月' />
   <category label='六月' />
   <category label='七月' />
   <category label='八月' />
   <category label='九月' />
   <category label='十月' />
   <category label='十一月' />
   <category label='十二月' />
  </categories>
  <dataset seriesName='2013'>
   <set value='59845' />
   <set value='36562'/>
   <set value='15421' />
   <set value='56213' />
   <set value='45121' />
   <set value='56232' />
   <set value='56121' />
   <set value='23565' />
   <set value='85656' />
   <set value='45421' />
   <set value='23561' />
   <set value='24801' />
  </dataset>
  <dataset seriesName='2014' renderAs='Line'>
   <set value='56122' />
   <set value='65121'/>
   <set value='45154' />
   <set value='20120' />
   <set value='95656' />
   <set value='46522' />
   <set value='65323' />
   <set value='62311' />
   <set value='95656' />
   <set value='65322' />
   <set value='74545' />
   <set value='56231' />
  </dataset>
  <dataset seriesName='2015'>
   <set value='95656' />
   <set value='54132'/>
   <set value='45511' />
   <set value='23200' />
   <set value='65622' />
   <set value='32600' />
   <set value='54512' />
   <set value='56232' />
   <set value='26562' />
   <set value='45421' />
   <set value='52211' />
   <set value='65623' />
  </dataset>
  <dataset seriesName='2016' renderAs='Line'>
   <set value='56444'/>
   <set value='65232'/>
   <set value='12123'/>
   <set value='21222'/>
   <set value='78454' />
   <set value='56211' />
   <set value='42422' />
   <set value='95655' />
   <set value='45455' />
   <set value='95656' />
   <set value='22900' />
   <set value='41512' />
  </dataset>
</chart>

3、设计结果

jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jquery replace方法去空格
May 08 jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 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
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 #jQuery
You might like
PHP环境搭建最新方法
2006/09/05 PHP
如何对PHP程序中的常见漏洞进行攻击
2006/10/09 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php在项目中寻找代码的坏味道(综艺命名)
2012/07/19 PHP
PHP中的类型约束介绍
2015/05/11 PHP
PHP使用PDO操作数据库的乱码问题解决方法
2016/04/08 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
js计算最大公约数和最小公倍数代码实例
2019/09/11 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
python实现媒体播放器功能
2018/02/11 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
python学生管理系统
2019/01/30 Python
Python使用python-docx读写word文档
2019/08/26 Python
python 三元运算符使用解析
2019/09/16 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
银行优秀员工事迹
2014/02/06 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
升职自荐书
2019/05/09 职场文书