jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】


Posted in jQuery onMay 13, 2017

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

1、FusionCharts中的2D双柱状图页面

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 column2D = new FusionCharts( "FusionCharts/MSColumn2D.swf", "myChartId", "100%", "520", "0" ); 
 column2D.setXMLUrl("doubleColumn2D.xml"); 
 column2D.render("doubleColumn2DChart");
});
</script>
</head>
<body>
  <div id="doubleColumn2DChart"></div>
</body>
</html>

2、数据源

doubleColumn2D.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='16' outCnvBaseFontColor='#798777' showAboutMenuItem='1'
    showLabels='1' labelDisplay='ROTATE ' useEllipsesWhenOverflow='1' rotateLabels='1' slantLabels='1' staggerLines='2'
    labelStep='3' placeValuesInside='1' showYAxisValues='1' showLimits='1' showDivLineValues='1' showShadow='1' adjustDiv='1'
    setAdaptiveYMin='1' centerYaxisName='1' useRoundEdges='1' numDivLines='8' divLineColor='#987989' divLineIsDashed='1'>
  <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='2015'>
   <set value='45155' />
   <set value='12452'/>
   <set value='63455' />
   <set value='45233' />
   <set value='95656' />
   <set value='87545' />
   <set value='12425' />
   <set value='94633' />
   <set value='85452' />
   <set value='75455' />
   <set value='32312' />
   <set value='65625' />
  </dataset>
  <dataset seriesName='2016'>
   <set value='65655'/>
   <set value='74555'/>
   <set value='61245'/>
   <set value='12451'/>
   <set value='95656' />
   <set value='24655' />
   <set value='45122' />
   <set value='32656' />
   <set value='65656' />
   <set value='95666' />
   <set value='65323' />
   <set value='54656' />
  </dataset>
</chart>

3、运行结果图:

jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery实现简单轮播图效果
Dec 27 jQuery
jQuery中clone()函数实现表单中增加和减少输入项
May 13 #jQuery
jQuery遍历节点方法汇总(推荐)
May 13 #jQuery
jQuery手风琴的简单制作
May 12 #jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 #jQuery
jQuery遮罩层实例讲解
May 11 #jQuery
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
jQuery实现的简单在线计算器功能
May 11 #jQuery
You might like
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
JS 修改URL参数(实现代码)
2013/07/08 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
详解js界面跳转与值传递
2016/11/22 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
JavaScript数组特性与实践应用深入详解
2018/12/30 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
vue如何限制只能输入正负数及小数
2019/07/04 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
Python2随机数列生成器简单实例
2017/09/04 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
python地震数据可视化详解
2019/06/18 Python
python解析xml简单示例
2019/06/21 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
《黄山奇石》教学反思
2014/04/19 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
文员转正自我鉴定怎么写
2014/09/29 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
Pandas自定义选项option设置
2021/07/25 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android