zoukankan      html  css  js  c++  java
  • FusionCharts 2D面积图

    1、设计思路

    (1)了解FusionCharts中面积图所特有的属性以及共性;

    (2)设计出一个面积图,数据源是由XML提供;

    (3)在XML中设置面积图的一些属性,美化图形。

    2、设计步骤

    (1)设计面积图的数据源

    area2D.xml:

    <?xml version="1.0" encoding="UTF-8"?>
    <chart caption='2013年水果年产量' xAxisName='水果名称' yAxisName='水果产量' baseFont='微软雅黑' baseFontSize='12' showValues='0'
           baseFontColor='#00FF33' outCnvBaseFont='宋体' outCnvBaseFontSize='14' outCnvBaseFontColor='#0000FF'showLabels='1' 
           useEllipsesWhenOverflow='1' rotateLabels='1' showYAxisValues='1' showLimits='1' showDivLineValues='1' adjustDiv='1'
           rotateYAxisName='1' defaultAnimation='1' yAxisMinValue='0' yAxisMaxValue='10000000' setAdaptiveYMin='1' centerYaxisName='1'
           bgColor='#0000FF' bgAlpha='50' bgRatio='50' bgAngle='90' canvasBgColor='#EE7700' showVLineLabelBorder='1' drawAnchors='1'
           anchorSides='8' anchorRadius='10' anchorBorderColor='#EEEE00' numDivLines='8' divLineIsDashed='1' numVDivLines='8' 
           showAlternateVGridColor='1' vDivLineIsDashed='1' vDivLineAlpha='50' vDivLineThickness='1' showToolTip='1'>
    
       <set label='苹果' value='8945459' />
       <set label='橘子' value='3652120' />
       <set label='桃子' value='4578540' />
       <set label='荔枝' value='1245120' />
       <set label='梨子' value='8451222' />
       <set label='李子' value='4125120' />
       <set label='芒果' value='2356412' />
       <set label='香蕉' value='7541201' />
       <set label='菠萝' value='6541222' />
       <set label='菩提' value='1201421' />
       <set label='樱桃' value='6541112' />
       <set label='葡萄' value='2356666' />
    
       <trendLines>
         <line startValue='7000000' color='009933' displayvalue='Target' />
       </trendLines>
    
       <styles>
    
          <definition>
             <style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' />
          </definition>
    
          <application>
             <apply toObject='Canvas' styles='CanvasAnim' />
          </application>
    
       </styles>
    
    </chart>
    
    (2)设置面积图的图的类型以及引入数据源的路径

    var area2D = new FusionCharts( "../script/Charts/Area2D.swf", "myChartId", "100%", "540", "0" );
    area2D.setXMLUrl("data/area2D.xml");
    area2D.render("area2DChart"); 
    (3)如何在页面引入图形

    <div id="area2DChart"></div>
    3、运行结果,如图所示


    4、源码

    <!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{
                    98%;
                    height:100%;
                    font-size:12px;
                }
                #area2DChart{
                    100%;
                }
            </style>
            <script type="text/javascript">
                $(function(){
                    var area2D = new FusionCharts( "../script/Charts/Area2D.swf", "myChartId", "100%", "540", "0" );
                    area2D.setXMLUrl("data/area2D.xml");
                    area2D.render("area2DChart");   
                });
            </script>
        </head>
        <body>
            <div id="area2DChart"></div>
        </body>
    </html>
    


  • 相关阅读:
    LeetCode 258 Add Digits
    LeetCode 231 Power of Two
    LeetCode 28 Implement strStr()
    LeetCode 26 Remove Duplicates from Sorted Array
    LeetCode 21 Merge Two Sorted Lists
    LeetCode 20 Valid Parentheses
    图形处理函数库 ImageTTFBBox
    php一些函数
    func_get_arg(),func_get_args()和func_num_args()的用法
    人生不是故事,人生是世故,摸爬滚打才不会辜负功名尘土
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315469.html
Copyright © 2011-2022 走看看