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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
IE8中jQuery.load()加载页面不显示的原因
Nov 15 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
原生jQuery实现只显示年份下拉框
Dec 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
jQuery编写textarea输入字数限制代码
Mar 23 #jQuery
You might like
PHP中MD5函数使用实例代码
2008/06/07 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP获取网页所有连接的方法(附demo源码下载)
2016/03/30 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
PHP获取类私有属性的3种方法
2020/09/10 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
vue.js配合$.post从后台获取数据简单demo分享
2018/08/11 Javascript
angular6的响应式表单的实现
2018/10/10 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
优秀班集体申报材料
2014/12/25 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers