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编写textarea输入字数限制代码
Mar 23 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现模糊查询的方法分析
May 10 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 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
星际中一些鲜为人知的详细资料
2020/03/04 星际争霸
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php sybase_fetch_array使用方法
2014/04/15 PHP
php实现singleton()单例模式实例
2014/11/06 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
pycharm 解除默认unittest模式的方法
2018/11/30 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
传播学毕业生求职信
2013/10/11 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
2015年调度员工作总结
2015/04/30 职场文书
一百条裙子读书笔记
2015/07/01 职场文书
用python删除文件夹中的重复图片(图片去重)
2021/05/12 Python