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. linux配置上网

    重装系统之后,配置虚拟机的网络问题花了我三个小时,忘记了网关是vmnet8的IP还是DNS了,搞了很久,后来碰运气碰对了. 寄宿机共享的网络是vmnet8,设置IP,DNS,是vmnet8 的IPv4 ...

  2. typedef和#define的简单比较

    1.通常说typedef比#define要好,尤其在有指针的情况下 typedef char* pStr1; #define pStr2 char* pStr1 s1,s2; pStr2 s3,s4; ...

  3. 浅谈WPF依赖项属性

    浅谈WPF依赖项属性 0. 引言 依赖项属性虽然在使用上和CLR属性一样,但是它是WPF特有的,不同于CLR属性.只是封装为我们常用CLR的属性,在语法使用上和CLR属性一样.WPF中一些功能:动画, ...

  4. Django的思维导图

    本人在学习Django的过程中整理的一些知识点 现在整理成思维导图,在以后查阅的时候可以方便自己.

  5. mybatis-generator 根据表生成对应文件

    1 创建maven工程 2.编辑.pom文件 <?xml version="1.0" encoding="UTF-8"?> <project ...

  6. POJ 1681 Painter's Problem [高斯消元XOR]

    同上题 需要判断无解 需要求最小按几次,正确做法是枚举自由元的所有取值来遍历变量的所有取值取合法的最小值,然而听说数据太弱自由元全0就可以就水过去吧.... #include <iostream ...

  7. B 洛谷 P3604 美好的每一天 [莫队算法]

    题目背景 时间限制3s,空间限制162MB 素晴らしき日々 我们的情人,不过是随便借个名字,用幻想吹出来的肥皂泡,把信拿去吧,你可以使假戏成真.我本来是无病呻吟,漫无目的的吐露爱情---现在这些漂泊不 ...

  8. 2019/1/10 redis学习笔记(二)

    本文不涉及集群搭建操作 关于在lua脚本中操作redis的应用场景 大家都知道redis对于单个集合的操作是原子性的;但是有可能有一种场景是这样.比如说抢红包,现在有十个人抢五份红包,抽象到我们jav ...

  9. 撸一撸Spring Cloud Ribbon的原理

    说起负载均衡一般都会想到服务端的负载均衡,常用产品包括LBS硬件或云服务.Nginx等,都是耳熟能详的产品. 而Spring Cloud提供了让服务调用端具备负载均衡能力的Ribbon,通过和Eure ...

  10. java中的foreach用法及总结

    增强for(part1:part2){part3}; part2中是一个数组对象,或者是带有泛性的集合. part1定义了一个局部变量,这个局部变量的类型与part2中的对象元素的类型是一致的. pa ...