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编写textarea输入字数限制代码
Mar 23 jQuery
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
详解jquery选择器的原理
Aug 01 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jquery分页优化操作实例分析
Aug 23 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 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
YB217、YB235、YB400浅听
2021/03/02 无线电
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
Bootstrap精简教程
2015/11/27 Javascript
WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现
2016/01/12 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
Python文本相似性计算之编辑距离详解
2016/11/28 Python
python3实现windows下同名进程监控
2018/06/21 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
python 日志 logging模块详细解析
2020/03/31 Python
利用python生成照片墙的示例代码
2020/04/09 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
Python的logging模块基本用法
2020/12/24 Python
使用纯 CSS 创作一个脉动 loader效果的源码
2018/09/28 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
绩效专员岗位职责
2013/12/02 职场文书
经典大学生求职信范文
2014/01/06 职场文书
安全环保演讲稿
2014/08/28 职场文书