jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】


Posted in jQuery onMarch 28, 2017

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

1、了解帕累托图的特性以及和其他图的共性

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

3、设计帕累托图的数据源

pareto2D.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>

4、运行结果

jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】

jQuery 相关文章推荐
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 #jQuery
jQuery中的deferred使用方法
Mar 27 #jQuery
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 #jQuery
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 #jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 #jQuery
HTML5+jQuery实现搜索智能匹配功能
Mar 24 #jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 #jQuery
You might like
PHP学习 变量使用总结
2011/03/24 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
2016/05/05 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
vue.js的提示组件
2017/03/02 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
JS实现图片切换效果
2018/11/17 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
Python使用gensim计算文档相似性
2016/04/10 Python
python读取oracle函数返回值
2016/07/18 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
Unix如何添加新的用户
2014/08/20 面试题
人力资源经理自我评价
2014/01/04 职场文书
关于赌博的检讨书
2014/01/08 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
工作作风建设心得体会
2014/10/22 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
旅游项目合作意向书
2015/05/08 职场文书
诚实守信主题班会
2015/08/13 职场文书
党风廉洁教育心得体会
2016/01/20 职场文书