zoukankan      html  css  js  c++  java
  • FusionCharts 3D双柱状图

    1、3D双柱状图页面源码如下

    doubleColumn3D.html:

    <!DOCTYPE html>
    <!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
    and open the template in the editor.
    -->
    <html>
        <head>
            <title>FusionCharts 3D双柱状图</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width">
            <script type="text/javascript" src="../script/jquery-1.10.2.js"></script>
            <script type="text/javascript" src="../script/Charts/FusionCharts.js"></script>
            <style type="text/css">
                body{
                    99%;
                    height:100%;
                    font-size:12px;
                }
                #doubleColumn3DChart{
                    100%;
                }
            </style>
            <script type="text/javascript">
                $(function(){
                    var column3D = new FusionCharts( "../script/Charts/MSColumn3D.swf", "myChartId", "100%", "520", "0" );
                    column3D.setXMLUrl("data/doubleColumn3D.xml");
                    column3D.render("doubleColumn3DChart");   
                });
            </script>
        </head>
        <body>
            <div id="doubleColumn3DChart"></div>
        </body>
    </html>
    
    2、3D双柱状图数据源

    doubleColumn3D.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <chart caption='2012年和2013年统计收入' xAxisName='月份' yAxisName='收入' showValues='0' baseFont='微软雅黑' baseFontSize='14'
           baseFontColor='#00FF00' outCnvBaseFont='宋体' outCnvBaseFontSize='16' outCnvBaseFontColor='#798777' showAboutMenuItem='1'
           showLabels='1' labelDisplay='ROTATE ' useEllipsesWhenOverflow='1' rotateLabels='1' slantLabels='1' staggerLines='2'
           labelStep='3' placeValuesInside='1' showYAxisValues='1' showLimits='1' showDivLineValues='1' showShadow='1' adjustDiv='1'
           setAdaptiveYMin='1' centerYaxisName='1' useRoundEdges='1' numDivLines='8' divLineColor='#987989' divLineIsDashed='1'>
    
       <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='2012'>
          <set value='45155' />
          <set value='12452'/>
          <set value='63455' />
          <set value='45233' />
          <set value='95656' />
          <set value='87545' />
          <set value='12425' />
          <set value='94633' />
          <set value='85452' />
          <set value='75455' />
          <set value='32312' />
          <set value='65625' />
       </dataset>
    
       <dataset seriesName='2013'>
          <set value='65655'/>
          <set value='74555'/>
          <set value='61245'/>
          <set value='12451'/>
          <set value='95656' />
          <set value='24655' />
          <set value='45122' />
          <set value='32656' />
          <set value='65656' />
          <set value='95666' />
          <set value='65323' />
          <set value='54656' />
       </dataset>
    
    </chart>
    
    3、运行结果如下图

    (1)初始化时



    (2)点击图例2012时


    (3)点击图例2013时


    (4)点击图例2012和图例2013时


  • 相关阅读:
    《Java架构师的第一性原理》12计算机基础之计算机网络
    《Java架构师的第一性原理》11计算机基础之操作系统
    《Java架构师的第一性原理》34分布式计算之分布式消息队列(AcitveMQ、RabbitMQ、RocketMQ、Kafka、ZeroMQ)
    《Java架构师的第一性原理》32分布式计算之分布式缓存第1篇Redis
    《Java架构师的第一性原理》41存储之MySQL深入浅出全网最全,没有之一
    《Java架构师的第一性原理》41存储之MySQL第11篇数据库调优
    C++拷贝赋值operator=
    C++浅拷贝与深拷贝
    C++左值和右值
    C++函数的哑元参数
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315466.html
Copyright © 2011-2022 走看看