• FusionCharts 2D双面积图


    1、页面doubleArea.html

    doubleArea.html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>FusionCharts 2D双面积图</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 doubleArea = new FusionCharts( "../scripts/Charts/MSArea.swf", "doubleAreaId", "100%", "540", "0" );
          		  doubleArea.setXMLUrl("data/doubleArea.xml");
                  doubleArea.render("doubleAreaChart");
            });
        </script>
    
      </head>
      
      <body>
        <div id="doubleAreaChart"></div>
      </body>
    </html>
    
    2、双面积图数据源

    doubleArea.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <chart caption='2012和2013年某桥一周通过的人数' xAxisName='星期' yAxisName='人数' showValues='0' 
           baseFont='微软雅黑' baseFontSize='14' baseFontColor='#00FF00' outCnvBaseFont='宋体'
           outCnvBaseFontSize='20' outCnvBaseFontColor='#00FF00' legendShadow='1' 
           legendAllowDrag='1' reverseLegend='1' interactiveLegend='1' legendNumColumns='2'
           minimiseWrappingInLegend='1' showLegend='1' legendPosition='BOTTOM' showZeroPlane='1'>
    
       <categories>
          <category label='星期一' />
          <category label='星期二' />
          <category label='星期三' />
          <category label='星期四' />
          <category label='星期五' />
          <category label='星期六' />
          <category label='星期日' />
       </categories>
    
       <dataset seriesName='2012'>
          <set value='656445' />
          <set value='412555'/>
          <set value='956566' />
          <set value='125645' />
          <set value='561124' />
          <set value='265655' />
          <set value='451212' />
       </dataset>
    
       <dataset seriesName='2013'>
          <set value='154512'/>
          <set value='598655'/>
          <set value='654544'/>
          <set value='956565'/>
          <set value='245454' />
          <set value='965565' />
          <set value='454545' />
       </dataset>
    
    </chart>
    

    3、结果如图所示



  • 相关阅读:
    单向链表的创建、输出、插入、删除
    linux文件管理指令
    二叉树的创建与遍历(递归)
    小工具
    排序
    Project Euler Problem (1~10)
    福大软工 · 最终作业
    福大软工 · 第十二次作业
    Beta冲刺 7
    Beta冲刺 6
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315462.html
Copyright © 2020-2023  润新知