• 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、设计结果(如图所示)




  • 相关阅读:
    oracle 强杀进程
    oracle查询使用频率和磁盘消耗需要缓存大小
    Oracle定时器执行多线程
    Python
    Python- XML模块
    Python-标准库之OS模块
    Python
    Python-时间复杂度
    Python-冒泡排序
    Python-正则表达式
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315473.html
Copyright © 2020-2023  润新知