• FusionCharts 2D条状图


    1、设计思路

    (1)了解条状图的一些特性和共性,掌握其特性;

    (2)根据FusionCharts设计条理,设置静态页面和数据源;

    (3)引入条状图,设置其属性。

    2、设计步骤

    (1)设计生成条状图的脚本

    $(function(){
                    var bar2D = new FusionCharts( "../script/Charts/Bar2D.swf", "myChartId", "100%", "540", "0" );
                    bar2D.setXMLUrl("data/bar2D.xml");
                    bar2D.render("bar2DChart");   
                });
    (2)设计数据源

    <?xml version="1.0" encoding="UTF-8"?>
    <chart caption='2013年动物饲养量' xAxisName='动物名称' yAxisName='饲养量' showValues='1' baseFontSize='12' baseFontColor='#A45454'
           dashed='1' numDivLines='40' divLineColor='#0000FF' divLineThickness='1' divLineAlpha='50' divLineIsDashed='1' divLineDashLen='2'
           formatNumber='1' scaleRecursively='1' outCnvBaseFont='#456454' outCnvBaseFontSize='16' outCnvBaseFontColor='#00FF00' showToolTip='1'
           toolTipBgColor='#565677' toolTipBorderColor='#CCCCCC' showToolTipShadow='1' chartLeftMargin='5' showLabel='1'>
       <set label='猪' value='9856456454' />
       <set label='牛' value='8754545554' />
       <set label='羊' value='5784554458' />
       <set label='兔' value='451545554' />
       <set label='鸡' value='7989565666' />
       <vLine color='FF5904' thickness='2' dashed='1' showLabelBorder='1' labelVAlign='middle' labelHAlign='center'/>
       <set label='鸭' value='5613265666' />
       <set label='鹅' value='784545555' />
       <set label='蛇' value='45412121' />
       <set label='蛙' value='656521' />
       <set label='鱼' value='7854656666' />
    </chart>
    
    (3)引入FusionCharts条状图

    <div id="bar2DChart"></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;
                }
                #bar2DChart{
                    100%;
                }
            </style>
            <script type="text/javascript">
                $(function(){
                    var bar2D = new FusionCharts( "../script/Charts/Bar2D.swf", "myChartId", "100%", "540", "0" );
                    bar2D.setXMLUrl("data/bar2D.xml");
                    bar2D.render("bar2DChart");   
                });
            </script>
        </head>
        <body>
            <div id="bar2DChart"></div>
        </body>
    </html>
    




  • 相关阅读:
    Java面试题:==运算符与equals方法的区别
    STS或eclipse中导入新项目出现红色感叹号红色叉叉的问题
    SpringBoot+SpringDataJpa快速上手(基本CRUD)
    Java-数组拷贝
    Java-数组拷贝
    最小高度树Java版本(力扣)
    macOS安装minikube
    测试面试LeetCode系列:字符串的左旋转
    测试面试LeetCode系列:按既定顺序创建目标数组
    systemd的文件描述符限制引发的问题
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315468.html
Copyright © 2020-2023  润新知