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实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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+JS三级菜单联动菜单实现方法
2016/02/24 PHP
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
JS判断当前页面是否在微信浏览器打开的方法
2015/12/08 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
JavaScript引用类型Object常见用法实例分析
2018/08/08 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python多线程编程方式分析示例详解
2013/12/06 Python
python使用marshal模块序列化实例
2014/09/25 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
python中星号变量的几种特殊用法
2016/09/07 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
《我为你骄傲》教学反思
2014/02/20 职场文书
社区先进事迹材料
2014/05/19 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
模范教师事迹材料
2014/12/16 职场文书
任命书格式范文
2015/09/22 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP