如何从下到上动画条形图？答案

【问题标题】：how to animate bar chart from bottom to top?如何从下到上动画条形图？
【发布时间】：2012-11-17 08:21:41
【问题描述】：

我正在尝试制作条形图，并且条形图现在从上到下进行动画处理，但我希望它从下到上进行动画处理。我如何让它从下到上？

CSS

.bar {
width:50px;
height:250px;
list-style-type:none;
}
.bar p {
background-color:#63F;
}
.bar span { 
padding-left:15px;
left:100%;  
}
#content ul {
list-style-type:none;
}
#content ul li {
float:left;
margin:50px;
}

HTML

<div id="content">
<ul>
  <li>
    <div class="bar">
      <p><span>50%</span></p>
    </div><br>
    Freshmen                    
  </li>
</ul>
</content>

Javascript

<script src="../../jquery-1.6.4.min.js"></script>    
$(document).ready(function(){
    $(".bar").each(function(){
        var length = $(this).find("span").html();
        $(this).find("p").delay(500).animate({'height':length},3500,function(){$(this).find("span").fadeIn(1000);
        });
    });
});

"click here to see it in jsfiddle"

【问题讨论】：

标签： javascript jquery css charts

【解决方案1】：

您可以为您的bar定义position:absolute。像这样写：

.bar {
width:50px;
height:250px;
list-style-type:none;
    position:relative;
}
.bar p {
background-color:#63F;
    position:absolute;
    bottom:0;
    left:0;
}

查看http://jsfiddle.net/6zqSS/1/

【讨论】：

感谢您的帮助。你能解释一下为什么需要定位它们吗？
在 HTML 默认情况下，高度从上到下增加。所以，这就是为什么我们使用 position:absolute 和 bottom:0 来使 P 从 .bar DIV 的底部开始。现在当P高度增加时，底部没有办法扩大。

【解决方案2】：

http://jsfiddle.net/t4THf/5/

CSS

.perfect
{
    padding-top:30px;
    width:500px;
    height:300px;
    position:relative;
    background-color:#efefef;
}
.perfect .bar
{
    float:left;
    position:relative;
    width:40px;
    height:100%;
    margin-left:5px;
}
.perfect .bar .slideup
{
    position:absolute;
    bottom:0px;
    width:40px;
    background-color:#fff000;
    border:1px solid #000;
}
.perfect .bar .slideup span
{
    display:block;
    position:absolute;
    margin:5px;
    top:-30px;
}

HTML

<div class="perfect">
    <div class="bar">
        <div class="slideup">
            <span>20%</span>
        </div>
    </div>
    <div class="bar">
        <div class="slideup">
            <span>30%</span>
        </div>
    </div>
    <div class="bar">
        <div class="slideup">
            <span>10%</span>
        </div>
    </div>
    <div class="bar">
        <div class="slideup">
            <span>70%</span>
        </div>
    </div>
    <div class="bar">
        <div class="slideup">
            <span>100%</span>
        </div>
    </div>
    <div class="bar">
        <div class="slideup">
            <span>50%</span>
        </div>
    </div>
    <div class="bar">
        <div class="slideup">
            <span>60%</span>
        </div>
    </div>
    <div class="bar">
        <div class="slideup">
            <span>55%</span>
        </div>
    </div>
    <div class="bar">
        <div class="slideup">
            <span>70%</span>
        </div>
    </div>
    <div class="bar">
        <div class="slideup">
            <span>70%</span>
        </div>
    </div>
</div>

JS

$(function(){
     $(".bar").each(function(){
        var length = $(this).find("span").html();
        $(this).find(".slideup").delay(500).animate({'height':length},
"slow",function(){$(this).find("span").fadeIn(1000);
        });
    });
});

点击这里查看demo

【讨论】：

【解决方案3】：

您也可以使用 css 关键帧来实现这一点，例如 webkit http://jsfiddle.net/kudoslabs/YddaY/

css

dl{ position: relative ; height: 200px ; }
dt,dd{ position: absolute ; }
dd{ height: 70% ; width: 30px ; background: grey ; bottom: 20px ; -webkit-animation: animate-bar 1.25s 1 linear; }
dt{ bottom: 0 ; }
@-webkit-keyframes animate-bar{
    0% {height: 0% ; }
}

html

<dl>
    <dt>Freshman</dt>    
    <dd>70%</dd>
</dl>

【讨论】：

荣誉 - 你能演示如何做到这一点，使其水平而不是垂直增长。
@Kudos - 我查看了您的示例，它运行良好，但是如果我想要多个条，代码如何更改？而不是硬编码动态添加它们？在我的 main.js 中，我使用把手来生成条，并且使用您的代码，由于 css，它们都具有相同的高度。我正在尝试传递一个高度数组和一个标签数组。这是我的仓库：github.com/sbaden/bar-graph.git

【解决方案4】：

http://jsfiddle.net/chovy/6zqSS/2/

.bar {
    position: relative;
}


.bar p {
    position: absolute;
    bottom: 0;
}

【讨论】：

【解决方案5】：

使用关键帧为 css 属性设置动画，例如宽度一旦你设置了元素的宽度（例如 div），动画就会启动

.animated-bar {
  animation: animateBar 0.25s ease-in;
  @keyframes animateBar {
    0% {
      width: 0;
    }
  }
}

<div class="animated-bar" style="width: 200px"><div>

【讨论】：