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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
原生JS实现天气预报
2020/06/16 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
pytorch学习教程之自定义数据集
2020/11/10 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
会计应聘求职信范文
2013/12/17 职场文书
小学生秋游活动方案
2014/02/23 职场文书
军训教官感言
2014/03/02 职场文书
司法助理专业自荐书
2014/06/13 职场文书
党支部活动策划方案
2014/08/18 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
岳庙导游词
2015/02/04 职场文书
2015年师德表现自我评价
2015/03/05 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
vue3不同环境下实现配置代理
2022/05/25 Vue.js