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实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery+ajax实现用户登录验证
Sep 13 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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 采集程序 常用函数
2008/12/18 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
js调用css属性写法
2013/09/21 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
django中使用POST方法获取POST数据
2019/08/20 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
python数据类型强制转换实例详解
2020/06/22 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
CSS3 简写animation
2012/05/10 HTML / CSS
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
项目建议书格式
2014/03/12 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
社团活动总结报告
2014/06/27 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
Python图像处理之图像拼接
2021/04/28 Python
python前后端自定义分页器
2022/04/13 Python