• FusionCharts Marimekko图


    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、运行结果


  • 相关阅读:
    [webpack]解决报错 CleanWebpackPlugin is not a constructor
    awk匹配案例
    ftp的主动模式和被动模式区别:
    为正在运行的容器添加端口映射
    第三章 pod:运行于kubernetes中的容器
    kubernetes介绍
    k8s基础整理-标签/注解/命名空间
    MySQL5.7修改用户密码
    基于kubernetes v1.17部署dashboard:v2.0-beta8
    使用OpenSSL生成自签名SSL证书
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315422.html
Copyright © 2020-2023  润新知