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实现文字打印动态效果
Apr 21 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
使用jquery实现轮播图效果
Jan 02 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
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
php英文单词统计器
2016/06/23 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
卫校中专生的自我评价
2014/01/15 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
教师节班会主持词
2015/07/06 职场文书
python实现Thrift服务端的方法
2021/04/20 Python
Python基础之hashlib模块详解
2021/05/06 Python
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技