jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】


Posted in jQuery onMarch 25, 2017

本文实例讲述了jQuery插件FusionCharts实现的3D帕累托图效果。分享给大家供大家参考,具体如下:

1、设计3D帕累托图的页面

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>FusionCharts Pareto3D图</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 pareto3D = new FusionCharts( "FusionCharts/Pareto3D.swf", "pareto3DId", "100%", "540", "0" );
 pareto3D.setXMLUrl("pareto3D.xml");
 pareto3D.render("pareto3DChart");
});
</script>
</head>
<body>
  <div id="pareto3DChart"></div>
</body>
</html>

2、设计3D帕累托图的数据源 pareto3D.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart caption="(3water.com)一周统计人数" xAxisName="星期" PYAxisName ="人数" plotGradientColor="" showValues='0'
    baseFont='微软雅黑' baseFontSize='20' baseFontColor='#654545' outCnvBaseFont='宋体'
    outCnvBaseFontSize='24' outCnvBaseFontColor='#989899' drawAnchors='1' anchorSides='4'
    anchorRadius='10' anchorBorderColor='#FF0000' anchorBorderThickness='1' anchorBgColor='#00FF00'
    anchorAlpha='50' anchorBgAlpha='50' numDivLines='8' divLineIsDashed='1'>
  <set label="星期一" value="205"/>
  <set label="星期二" value="165"/>
  <set label="星期三" value="85"/>
  <set label="星期四" value="62"/>
  <set label="星期五" value="73"/>
  <set label="星期六" value="109"/>
  <set label="星期日" value="121"/>
</chart>

3、设计结果

jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】

jQuery 相关文章推荐
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery插件实现图片轮播效果
Oct 19 jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 #jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 #jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 #jQuery
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 #jQuery
jQuery实现的背景颜色渐变动画效果示例
Mar 24 #jQuery
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 #jQuery
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
brook javascript框架介绍
2011/10/10 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
Python-基础-入门 简介
2014/08/09 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Python 创建守护进程的示例
2020/09/29 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
客服端调用EJB对象的几个基本步骤
2012/01/15 面试题
优秀的毕业生的自我评价
2013/12/12 职场文书
2014年自我评价
2014/01/04 职场文书
材料员岗位职责
2014/03/13 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
售后服务承诺书怎么写
2014/05/21 职场文书
买房子个人收入证明
2014/10/12 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers