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

    1、FusionCharts中的2D双柱状图页面

    doubleColumn2D.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 2D双柱状图</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;
                }
                #doubleColumn2DChart{
                    100%;
                }
            </style>
            <script type="text/javascript">
                $(function(){
                    var column2D = new FusionCharts( "../script/Charts/MSColumn2D.swf", "myChartId", "100%", "520", "0" );
                    column2D.setXMLUrl("data/doubleColumn2D.xml");
                    column2D.render("doubleColumn2DChart");   
                });
            </script>
        </head>
        <body>
            <div id="doubleColumn2DChart"></div>
        </body>
    </html>
    
    2、数据源

    doubleColumn2D.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时


  • 相关阅读:
    iphoneX适配
    是时候啃一啃http跟https了
    使用阿里巴巴矢量图标库的图标
    react使用高阶组件进行界面跳转
    js性能提升之函数的防抖和节流
    vuex的一些需要知道的点
    react项目之使用猪齿鱼框架---dataSet的基础使用
    从js下手提升代码性能
    vue+ts搭建工程
    学习笔记之TypeScript语法一
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315467.html
Copyright © 2011-2022 走看看