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. useradd和adduser

    1.Ubuntu中,adduser是一个脚本,而useradd是一个二进制程序,前者对后者进行了封装,更加智能. 2.Centos中,adduser和useradd完全相同,adduser是一个符号链 ...

  2. 《.NET 设计规范》第 7 章：异常

    第 7 章:异常 异常与各种面向对象语言集成得非常好. 异常增强了 API 的一致性. 在用返回值来报告错误时,错误处理的代码与可能会发生错误的代码距离总是很近. 更容易使错误处理的带码全局化. 错误 ...

  3. libGDX-wiki发布

    为方便大家学习和访问,我将libgdx的wiki爬取到doku-wiki下,专门建立了以下地址.欢迎大家来共同完善. http://wiki.v5ent.com

  4. 不使用Math.random实现随机数

    不使用Math.random实现随机数 var rand = (function(){ var today = new Date(); var seed = today.getTime(); func ...

  5. CF341C. Iahub and Permutations [DP 排列]

    http://codeforces.com/contest/341/problem/C 题意: 有一个长度为n的排列a,其中有一些位置被替换成了-1.你需要尝试恢复这个排列,将-1替换回数字.求有多少 ...

  6. Codeforces Round #398 (Div. 2)

    Codeforces Round #398 (Div. 2) A.Snacktower 模拟 我和官方题解的命名神相似...$has$ #include <iostream> #inclu ...

  7. Oracle的order by的中文排序问题

    Oracle 中查询结果按照某个中文字段或者英文字母(包括 符号)排序,并不会得到我们预期的结果,因为对于中文与英文字母及符号,Oracle实际是按照其对应的ASCII码值排序的! 可以看到按照中文村 ...

  8. 使用xUnit为.net core程序进行单元测试(4)

    第1部分: http://www.cnblogs.com/cgzl/p/8283610.html 第2部分: http://www.cnblogs.com/cgzl/p/8287588.html 第3 ...

  9. lxml etree的一个问题

    <div> <a href="xxxx">123</a> <a href="xxxx">45</a> ...

  10. xml对象序列化

    public static class XSerializer { /// <summary> /// 将对象序列化为xml字符串 /// </summary> /// < ...