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. java 数组与集合（list）相互转化

    上代码 package com.core.array2collection; import java.util.ArrayList; import java.util.Arrays; import j ...

  2. 《NET 设计规范》第 2 章 框架设计基础

    <NET 设计规范>第 2 章 框架设计基础 要设计功能强大又易于使用的框架. 要理解广大开发人员并有针对性地为他们设计框架. 要理解各种编程语言,并为他们设计框架. 2.1 渐进框架 2 ...

  3. 3.移植驱动到3.4内核-移植DM9000C驱动

    在上章-使内核支持烧写yaffs2,裁剪内核并制作补丁了 本章,便开始移植以前2.6内核的驱动到3.4新内核 1.介绍 首先内核更新,有可能会重新定义新的宏,去除以前的宏,以前更改函数名等 所以移植驱 ...

  4. zookeeper 实现分布式锁

    主要是依赖临时节点的特性.数据存储到内存中效率高:例如有web1 web2 两台应用服务器 db1 db2两台db服务器  db互为主备,web1 web2 分别去修改db1 .有限db2库里张三的年 ...

  5. poj2479 最大子段和

    题意:给定一个数列.求出数列中不相交的两个子段和,要求和最大 解题思路:对每一个i来说,求出[0-i-1]的最大子段和以及[i-n-1]的最大子段和,再加起来,求出最大的一个.[0-i-1]的最大子段 ...

  6. Jmeter性能测试，新手上路篇

    1. JMeter简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静 ...

  7. 基于SpringMVC+Mybatis搭建简单的前后台交互系统

    前面博文有一篇 名为基于tomcat+springMVC搭建基本的前后台交互系统(http://www.cnblogs.com/hunterCecil/p/6924935.html),例文中使用了Io ...

  8. Kakfa消息投递语义

    Message Delivery Semantics At most once -- Messages may be lost but are never redelivered(消息可能丢失但不会重 ...

  9. BZOJ 1502: [NOI2005]月下柠檬树 [辛普森积分 解析几何 圆]

    1502: [NOI2005]月下柠檬树 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1070  Solved: 596[Submit][Status] ...

  10. Jquery里面种的 JSON.parse() 与JSON.stringify() 的区别

    JSON.parse()与JSON.stringify()的区别   JSON.parse()[从一个字符串中解析出json对象] Demo: //定义一个字符串 var data='{"N ...