jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】


Posted in jQuery onMay 13, 2017

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

1、设计思路

(1)了解条状图的一些特性和共性,掌握其特性;

(2)根据FusionCharts设计条理,设置静态页面和数据源;

(3)引入条状图,设置其属性。

2、设计步骤

(1)设计生成条状图的脚本

$(function(){
 var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId", "100%", "540", "0" );
 bar2D.setXMLUrl("bar2D.xml");
 bar2D.render("bar2DChart");
});

(2)设计数据源

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='(3water.com统计)2016年动物饲养量' xAxisName='动物名称' yAxisName='饲养量' showValues='1' baseFontSize='12' baseFontColor='#A45454'
    dashed='1' numDivLines='40' divLineColor='#0000FF' divLineThickness='1' divLineAlpha='50' divLineIsDashed='1' divLineDashLen='2'
    formatNumber='1' scaleRecursively='1' outCnvBaseFont='#456454' outCnvBaseFontSize='16' outCnvBaseFontColor='#00FF00' showToolTip='1'
    toolTipBgColor='#565677' toolTipBorderColor='#CCCCCC' showToolTipShadow='1' chartLeftMargin='5' showLabel='1'>
  <set label='猪' value='9856456454' />
  <set label='牛' value='8754545554' />
  <set label='羊' value='5784554458' />
  <set label='兔' value='451545554' />
  <set label='鸡' value='7989565666' />
  <vLine color='FF5904' thickness='2' dashed='1' showLabelBorder='1' labelVAlign='middle' labelHAlign='center'/>
  <set label='鸭' value='5613265666' />
  <set label='鹅' value='784545555' />
  <set label='蛇' value='45412121' />
  <set label='蛙' value='656521' />
  <set label='鱼' value='7854656666' />
</chart>

(3)引入FusionCharts条状图

<div id="bar2DChart"></div>

3、完整实例代码:

<!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>
<style type="text/css">
  body{
    width:98%;
    height:100%;
    font-size:12px;
  }
  #bar2DChart{
    width:100%;
  }
</style>
<script type="text/javascript">
$(function(){
 var bar2D = new FusionCharts( "FusionCharts/Bar2D.swf", "myChartId", "100%", "540", "0" );
 bar2D.setXMLUrl("bar2D.xml");
 bar2D.render("bar2DChart");
});
</script>
</head>
<body>
  <div id="bar2DChart"></div>
</body>
</html>

4、运行效果图:

jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】

jQuery 相关文章推荐
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 #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
You might like
短波收音机简介
2021/03/01 无线电
php错误提示failed to open stream: HTTP request failed!的完美解决方法
2011/06/06 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
实例解析php的数据类型
2018/10/24 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
PHP自动加载autoload和命名空间的应用小结
2017/12/01 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python中通过预先编译正则表达式提高效率
2017/09/25 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Python数据库小程序源代码
2019/09/15 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
建筑施工实习自我鉴定
2013/09/19 职场文书
社区志愿者心得体会
2014/01/03 职场文书
学校运动会开幕演讲稿
2014/01/04 职场文书
《美丽的彩虹》教学反思
2014/02/25 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js