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实现鼠标经过显示动画边框特效
Mar 24 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery中event.target和this的区别详解
Aug 13 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
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
python学习基础之循环import及import过程
2018/04/22 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
python初步实现word2vec操作
2020/06/09 Python
Python如何测试stdout输出
2020/08/10 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
联想德国官网:Lenovo Germany
2018/07/04 全球购物
企业治理工作自我评价
2013/09/26 职场文书
新学期开学演讲稿
2014/05/24 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
毕业生见习报告总结
2014/11/08 职场文书
关于感谢信的范文
2015/01/23 职场文书
幼儿园家长心得体会
2016/01/21 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers