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实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP文件类型检查及fileinfo模块安装使用详解
2019/05/09 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
JavaScript中动态向表格添加数据
2017/01/24 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
MVVM 双向绑定的实现代码
2018/06/21 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python从入门到精通(DAY 1)
2015/12/20 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
linux下进程间通信的方式
2014/12/23 面试题
网络工程专业毕业生推荐信
2013/10/28 职场文书
运动会广播稿30字
2014/01/21 职场文书
小学班干部竞选演讲稿
2014/04/24 职场文书
工作证明格式范文
2015/06/15 职场文书
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers