jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】


Posted in jQuery onMarch 23, 2017

本文实例讲述了jQuery插件FusionWidgets实现的Cylinder图效果。分享给大家供大家参考,具体如下:

1、数据源

Cylinder.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart palette="4" lowerLimit="0" upperLimit="10000" numberSuffix=" ltrs." bgColor="FF0000"
    paletteThemeColor="669933" showTickMarks="1" ticksOnRight="0" majorTMNumber="10"
    minorTMNumber="1" adjustTM="0" tickValueStep="8" cylRadius="500">
 <value>8954</value>
 <value>4512</value>
</chart>

2、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>FusionWidgets Cylinder图</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 cylinder = new FusionCharts( "FusionCharts/Cylinder.swf", "cylinderId", "100%", "550", "0" );
    cylinder.setXMLUrl("Cylinder.xml");
    cylinder.render("cylinderDiv");
  });
</script>
</head>
<body>
  <div id="cylinderDiv"></div>
</body>
</html>

运行效果图如下:

jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】

附:完整实例代码点击此处本站下载

注:该源码需要放到服务器环境下运行!否则无法加载xml文件数据。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jQuery插件Echarts实现的渐变色柱状图
Mar 23 #jQuery
jquery实现图片平滑滚动详解
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 #jQuery
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 #jQuery
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
Angular排序实例详解
2017/06/28 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
vue组件之间的数据传递方法详解
2019/04/19 Javascript
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
Python语言快速上手学习方法
2018/12/14 Python
浅析python的Lambda表达式
2019/02/27 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Python grpc超时机制代码示例
2020/09/14 Python
浅谈anaconda python 版本对应关系
2020/10/07 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
节能环保标语
2014/06/12 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
考研英语复习计划
2015/01/19 职场文书
2015年社区工作总结
2015/04/08 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电