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. 将Flask应用程序部署在nginx,tornado的简单方法

    来自:http://www.xuebuyuan.com/618750.html 在网上搜索了一下部署flask应用的方法,大部分是用wsgi部署在nginx上面,部署了很久,都没有成功,可能是我领悟能 ...

  2. JAVA并发编程学习笔记------对象的可见性及发布逸出

    一.非原子的64位操作: 当线程在没有同步的情况下读取变量时,可能会得到一个失效值,但至少这个值是由之前某个线程设置的值,而不是一个随机值,这种安全性保证被称为最低安全性.最低安全性适用于绝大多数变量 ...

  3. c#扩展方法的使用，实现的几个功能

    用扩展类写了一个管理类: using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; using Syste ...

  4. bash启动加载过程

  5. [Cpp] 面向对象程序设计 C++

    初始化列表(包括成员对象初始化) 初始化列表 ( 推荐 ) :  可以初始化任何类型的数据, 不管是不是普通类型还是对象,都建议用.  不再需要在构造器中赋值了, 而且初始化列表比构造函数要早执行.  ...

  6. 用icas下载文件报错

    前段时间服务器升级,过程中测试到报表下载,报表下载要用到icas,用的是sdts-client.jar,但是此jar包有两种连接模式,分别为: public static final SdtsConn ...

  7. 洛谷 [P3973] 线性代数

    最大权闭合子图,神题 这不是线性代数,这是网络流. 我们看见这是一堆矩阵的运算,而且最后变成了一个数,那么我们就想到,把这个矩阵乘法的过程用具体的数字推出来 我们发现,a是一个01矩阵,然后其实就可以 ...

  8. HDU [P2819] swap

    二分图行列匹配+输出路径 经典题,当且仅当一行匹配一列的时候,符合题意. 本题的难点在于如何输出路径,我们发现这个移动的过程就是将所有匹配选择排序,在选择排序时输出路径即可 #include < ...

  9. BZOJ 2286: [Sdoi2011消耗战 [DP 虚树]

    传送门 题意: 删除价值和最小的边使得$1$号点与$k$个关键点不连通 一个树形DP...但是询问多次,保证总的关键点数为$O(n)$ 先说一下这个$DP$ $f[i]$表示子树$i$中的关键点与$1 ...

  10. BZOJ 3963: [WF2011]MachineWorks [CDQ分治 斜率优化DP]

    传送门 当然了WF的题uva hdu上也有 你的公司获得了一个厂房N天的使用权和一笔启动资金,你打算在这N天里租借机器进行生产来获得收益.可以租借的机器有M台.每台机器有四个参数D,P,R,G.你可以 ...