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初级教程之网站品牌列表效果
Aug 02 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery实现上传图片功能
Jun 29 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
memcache命令启动参数中文解释
2014/01/13 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
Smarty中调用FCKeditor的方法
2014/10/27 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
JQuery实现表格中相同单元格合并示例代码
2013/06/26 Javascript
Jquery实现自定义tooltip示例代码
2014/02/12 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
JS实现鼠标按下拖拽效果
2020/07/23 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
python实现通过pil模块对图片格式进行转换的方法
2015/03/24 Python
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
python 计算积分图和haar特征的实例代码
2019/11/20 Python
python yield和Generator函数用法详解
2020/02/10 Python
Python 串口通信的实现
2020/09/29 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
Zooplus葡萄牙:欧洲领先的网上宠物商店
2018/07/01 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
欢迎领导标语
2014/06/27 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers