• 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、结果如图所示



  • 相关阅读:
    sqlserver,获取调用存储过程返回数据的方法。
    手动为弹窗添加一个阴影背景。
    bootstrap资料链接
    进入Linux救援(rescue)模式的四大法门
    virtual box 5.2.12 扩展包安装
    pypi配置国内开源镜像
    vs2015利用python加载dll调试配置
    ubuntu18安装ubuntu kylin软件中心
    firefox快捷键窗口和标签类
    设置双网卡路由
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315462.html
Copyright © 2020-2023  润新知