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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jquery仿微信聊天界面
May 06 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 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
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php时间函数用法分析
2016/05/28 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
2019/01/18 jQuery
jQuery zTree插件使用简单教程
2019/08/16 jQuery
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
python将unicode转为str的方法
2017/06/21 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python中实现字符串翻转的方法
2018/07/11 Python
python对html过滤处理的方法
2018/10/21 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
详解python statistics模块及函数用法
2019/10/27 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
python中的yield from语法快速学习
2020/11/06 Python
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
优秀生推荐信范文
2013/11/28 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
奥利奥广告词
2014/03/20 职场文书
《将心比心》教学反思
2014/04/08 职场文书
上班离岗检讨书
2014/09/10 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
MySQL时间设置注意事项的深入总结
2021/05/06 MySQL