FusionCharts 3D雙柱狀圖的示例分析

發(fā)布時(shí)間：2021-09-17 15:27:56 來(lái)源：億速云閱讀：143 作者：小新欄目：編程語(yǔ)言

這篇文章主要為大家展示了“FusionCharts 3D雙柱狀圖的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“FusionCharts 3D雙柱狀圖的示例分析”這篇文章吧。

1、3D雙柱狀圖頁(yè)面源碼如下

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{
                width:99%;
                height:100%;
                font-size:12px;
            }
            #doubleColumn3DChart{
                width: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>
        <p id="doubleColumn3DChart"></p>
    </body>
</html>

2、3D雙柱狀圖數(shù)據(jù)源

doubleColumn3D.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart caption='2012年和2013年統(tǒng)計(jì)收入' 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' showpLineValues='1' showShadow='1' adjustp='1'
       setAdaptiveYMin='1' centerYaxisName='1' useRoundEdges='1' numpLines='8' pLineColor='#987989' pLineIsDashed='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、運(yùn)行結(jié)果如下圖

（1）初始化時(shí)

FusionCharts 3D雙柱狀圖的示例分析

（2）點(diǎn)擊圖例2012時(shí)

FusionCharts 3D雙柱狀圖的示例分析

（3）點(diǎn)擊圖例2013時(shí)

FusionCharts 3D雙柱狀圖的示例分析

（4）點(diǎn)擊圖例2012和圖例2013時(shí)

FusionCharts 3D雙柱狀圖的示例分析

以上是“FusionCharts 3D雙柱狀圖的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

FusionCharts 3D雙柱狀圖的示例分析

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽