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

    1、设计思路

    (1)根据FusionCharts的API,设计出3D柱状图;

    (2)3D柱状图的数据源是由XML提供。

    2、设计步骤

    (1)新建静态页面,column3D.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{
                    98%;
                    height:100%;
                    font-size:12px;
                }
                #column3DChart{
                    100%;
                }
            </style>
            <script type="text/javascript">
                $(function(){
                    var column3D = new FusionCharts( "../script/Charts/Column3D.swf", "myChartId", "100%", "520", "0" );
                    column3D.setXMLUrl("data/column3D.xml");
                    column3D.render("column3DChart");   
                });
            </script>
        </head>
        <body>
            <div id="column2DChart"></div>
        </body>
    </html>
    
    (2)设计3D柱状图的数据源,column3D.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <chart caption='月收入' xAxisName='月份' yAxisName='收入' numberPrefix='¥' showValues='0' baseFont='微软雅黑' baseFontSize='12' 
           baseFontColor='#00FF00' outCnvBaseFont='宋体' outCnvBaseFontSize='14' outCnvBaseFontColor='#FF0000' showToolTip='1' 
           toolTipBgColor='#0000FF' toolTipBorderColor='#CCCCCC' showToolTipShadow='1' showBorder='0' numDivLines='8' divLineColor='#999999'
           divLineThickness='1' divLineAlpha='50' divLineIsDashed='1' divLineDashLen='1' divLineDashGap='1' showZeroPlaneValue='1' 
           showAlternateHGridColor='1' palette='5' showAboutMenuItem='1' useEllipsesWhenOverflow='1' bgColor='#FF5904' bgAngle='90'
           canvasBorderColor='#777777' useRoundEdges='1'>
    
       <set label='一月' value='520000' />
       <set label='二月' value='120000' />
       <set label='三月' value='690000' />
       <set label='四月' value='865000' />
       <set label='五月' value='321400' />
       <set label='六月' value='984500' />
       <set label='七月' value='314500' />
       <set label='八月' value='945100' />
       <set label='九月' value='750000' />
       <set label='十月' value='128900' />
       <set label='十一月' value='620000' />
       <set label='十二月' value='880000' />
    
    </chart>
    
    3、设计结果(如图所示)




  • 相关阅读:
    【LeetCode】17. Letter Combinations of a Phone Number
    【LeetCode】16. 3Sum Closest
    【LeetCode】15. 3Sum 三个数和为0
    【LeetCode】14. Longest Common Prefix 最长前缀子串
    【LeetCode】13. Roman to Integer 罗马数字转整数
    【LeetCode】12. Integer to Roman 整型数转罗马数
    【LeetCode】11. Container With Most Water
    【LeetCode】10. Regular Expression Matching
    Models of good programmer
    RSA Algorithm
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315473.html
Copyright © 2011-2022 走看看