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 append与appendTo方法比较
May 24 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
jQuery实现手风琴特效
Jan 11 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 基于文件头的文件类型验证类函数
2012/05/01 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
php中执行系统命令的方法
2015/03/21 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python django集成cas验证系统
2014/07/14 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
详解python中的Turtle函数库
2018/11/19 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
python扫描线填充算法详解
2020/02/19 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
Python3读写ini配置文件的示例
2020/11/06 Python
自我评价的正确写法
2013/09/19 职场文书
顶岗实习计划书
2014/01/10 职场文书
出国留学经济担保书
2014/04/01 职场文书
垃圾桶标语
2014/06/24 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python