1、Marimekko静态页面

Marimekko.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>FusionCharts Marimekko</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="../scripts/Charts/FusionCharts.js"></script>
    <script type="text/javascript">
        $(function(){
              var marimekko = new FusionCharts( "../scripts/Charts/Marimekko.swf", "marimekkoId", "100%", "540", "0" );
      		  marimekko.setXMLUrl("data/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="年销量" 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、运行结果

FusionCharts Marimekko图的更多相关文章

  1. FusionCharts中图的属性的总结归纳

    FusionCharts中图的属性的总结归纳 1.横坐标label间隔显示 labelStep="4" 2.柱状图有椭圆角 useRoundEdges="1"

  2. FusionCharts MSBar3D图

    1.静态页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  3. FusionCharts MSBar2D图

    1.页面展示 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  4. FusionCharts ScrollColumn2D图

    FusionCharts ScrollColumn2D图 1.JSP页面 ScrollColumn2D.jsp: <%@ page language="java" conte ...

  5. FusionCharts Free 甘特图

    用FusionCharts做甘特图 1.同步方式(用xml格式字符) 前台aspx代码 <!DOCTYPE html> <html xmlns="http://www.w3 ...

  6. 使用Fusioncharts实现后台处理进度的前台展示

    本文要解决两个问题: 1.在ajax的数据交互中,如何获得后台的处理进度? 2.在前台界面中,如何使用图形化的方式展示后台处理进度?   关于第一个问题,不是本文的重点,简单说一下思路.因为HTTP协 ...

  7. FusionCharts使用问题及解决方法(四)-FusionCharts常见问题大全

    在前3篇文章中,我们总结了FusionCharts图表的一些常见问题(FAQ)及解决方法,本文继续讨论FusionCharts使用者常见的一些复杂的报错及解决方法. 问题描述:使用FusionChar ...

  8. 使用FusionCharts出柱状图和饼状图

    在最近的项目中,需要使用出图,能够查看柱状图,饼状图等效果,刚开始我们用JS写的效果,发现效果不理想,找了一个JS插件发现效果还是不理想,客户也不满意,客户希望要很炫的效果,最后我们使用了Fusion ...

  9. FusionCharts 2D柱状图和折线图的组合图调试错误

    在设计FusionCharts 2D柱状图和折线图的组合图的时候,我发现不管怎么重启服务器,组合图就是不出来.后来,我通过调试发现我犯了一个致命的错误,运用平常一贯的思维,认为3D图有这种类型,那么2 ...

随机推荐

  1. NoSQL在大数据中的应用

    一.序言 NoSQL是Not Only SQL的缩写,而不是Not SQL,指的是非关系型的数据库,它不一定遵循传统数据库的一些基本要求,比如说遵循SQL标准.ACID属性.表结构等等.相比传统数据库 ...

  2. CentOS7系统配置国内yum源和epel源

    1.首先进入/etc/yum.repos.d/目录下,新建一个repo_bak目录,用于保存系统中原来的repo文件 [root@bogon ~]# cd /etc/yum.repos.d/ [roo ...

  3. 我是如何让minio client上传速度提高几十倍的

    minio java client 使用okhttp作为底层的http实现,在产品包里面局域网上传文件的速度一直只有400~800KB/s,经过一天排查发现是-Djava.compile=none禁用 ...

  4. ABP官方文档翻译 3.2 值对象

    值对象 介绍 值对象基类 最佳实践 介绍 "展现领域描述性层面且没有概念性身份的对象称之为值对象."(Eric Evans). 和实体相反,实体有身份标示(Id),值对象没有身份标 ...

  5. Go笔记-垃圾回收集和SetFinalizer

    [垃圾回收]     1- Go的开发者也不用写代码来释放程序中不再使用的变量和结构占用内存,Go中有独立的进程,垃圾回收器(GC),处理这些事情.它会搜索不再使用的变量然后释放它们.     2- ...

  6. BZOJ 4539: [Hnoi2016]树 [主席树 lca]

    4539: [Hnoi2016]树 题意:不想写.复制模板树的子树,查询两点间距离. *** 终于有一道会做的题了...... 画一画发现可以把每次复制的子树看成一个大点来建一棵树,两点的lca一定在 ...

  7. php header解决跨域问题

    header('Access-Control-Allow-Credentials:true'); header('Access-Control-Allow-Origin:http://wdjkj.co ...

  8. js压缩上传图片

    初学有不当之处,请多多指点, <body> <div class="cc"> <input type="file" id=&quo ...

  9. 面试陷阱1：Integer类型的比较

    public class Test01 { public static void main(String[] args) { Integer f1 = 100, f2 = 100, f3 = 150, ...

  10. CodeForces 586D

    题意略. 将人的移动分为3步,第一步向右,第二步是行之间的变换,第三步是向右走2步,三步加在一起算作是一次移动,计入判重数组. 在第一步时有一个特殊情况:已经越过最右边的边界线,这时graph[x][ ...