jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】


Posted in jQuery onMarch 24, 2017

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

1、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 Marimekko图</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 marimekko = new FusionCharts( "FusionCharts/Marimekko.swf", "marimekkoId", "100%", "540", "0" );
 marimekko.setXMLUrl("marimekko.xml");
 marimekko.render("marimekkoChart");
});
</script>
</head>
<body>
  <div id="marimekkoChart"></div>
</body>
</html>

2、Marimekko数据源 marimekko.xml:

<?xml version="1.0" encoding="UTF-8"?>
<chart showValues="0" caption="(3water.com统计)年销量" subCaption="2013" xAxisName="月份" yAxisName="销量"
    legendCaption="" baseFont='微软雅黑' baseFontSize='24' baseFontColor='#00FF00'
    outCnvBaseFont='微软雅黑' outCnvBaseFontSize='20' outCnvBaseFontColor='#0000FF'>
  <categories>
   <category label="一月"/>
   <category label="二月"/>
   <category label="三月"/>
   <category label="四月"/>
   <category label="五月"/>
   <category label="六月"/>
   <category label="七月"/>
   <category label="八月"/>
   <category label="九月"/>
   <category label="十月"/>
   <category label="十一月"/>
   <category label="十二月"/>
  </categories>
  <dataset seriesName="苹果">
   <set value="335000"/>
   <set value="225100"/>
   <set value="164200"/>
   <set value="335000"/>
   <set value="225100"/>
   <set value="164200"/>
   <set value="335000"/>
   <set value="225100"/>
   <set value="164200"/>
   <set value="335000"/>
   <set value="225100"/>
   <set value="164200"/>
  </dataset>
  <dataset seriesName="梨子">
   <set value="215000"/>
   <set value="198000"/>
   <set value="120000"/>
   <set value="215000"/>
   <set value="198000"/>
   <set value="120000"/>
   <set value="215000"/>
   <set value="198000"/>
   <set value="120000"/>
   <set value="215000"/>
   <set value="198000"/>
   <set value="120000"/>
  </dataset>
  <dataset seriesName="橘子">
   <set value="298000"/>
   <set value="109300"/>
   <set value="153600"/>
   <set value="298000"/>
   <set value="109300"/>
   <set value="153600"/>
   <set value="298000"/>
   <set value="109300"/>
   <set value="153600"/>
   <set value="298000"/>
   <set value="109300"/>
   <set value="153600"/>
  </dataset>
</chart>

3、运行结果:

jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jquery轮播图插件使用方法详解
Jul 31 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
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
You might like
php 定界符格式引起的错误
2011/05/24 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
javascript标签在页面中的位置探讨
2013/04/11 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
Javascript事件实例详解
2013/11/06 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
2016/01/01 Javascript
巧用canvas
2017/01/21 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python从网络读取图片并直接进行处理的方法
2015/05/22 Python
深入理解python中的select模块
2017/04/23 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
python 调用Google翻译接口的方法
2020/12/09 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
广告学专业应届生求职信
2013/10/01 职场文书
留学自荐信的技巧
2013/10/17 职场文书
学生会干部自荐信
2014/02/04 职场文书
分公司经理任命书
2014/06/05 职场文书
党风廉正建设责任书
2015/01/29 职场文书
安全生产先进个人总结
2015/02/15 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
Python3.10的一些新特性原理分析
2021/09/15 Python
排查并解决Oracle sysaux表空间异常增长
2022/04/20 Oracle
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技