1、FusionCharts中的2D双柱状图页面
doubleColumn2D.html：
2、数据源
- <!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{
- width:99%;
- height:100%;
- font-size:12px;
- }
- #doubleColumn2DChart{
- width: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>
doubleColumn2D.xml：
3、运行结果
- <?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>
（1）初始化时
（2）点击下面图例2012时
（3）点击下面图例2013时
