Для анимации чисел и графика используйте HTML, CSS и javascript

Question

Изображение, показывающее график и число Мне нужно создать код HTML с / или кодом jquery / javascript / CSS для анимации чисел и графика.

Как, например, на картинке, если посетитель веб-сайта приходит на сайт и прокручивает вниз до этой области, то числа должны начинать отсчитываться от 0 до максимального записанного числа, а также график должен go снизу.

Как, например, в прикрепленном pi c в первом столбце, счет за 2015–2016 финансовый год должен начать автоматически увеличиваться с 0 до 64,34, как только посетитель перейдет к этому разделу веб-сайта, а также к графику. должен увеличиться соответственно снизу, чтобы достичь точки, которую он там показывает (как на рисунке выше, чем в 2014-2015 ФГ и должно быть меньше, чем в 2016-2017 ФГ).

Кроме того, как только пользователь прокручивает дальше внизу, число должно остаться там, и оно не должно снова go до 0.

* Я не могу создать бар график и счетчик чисел в коде.

$('.counter-count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 5000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });

.counter
{
    background-color: #eaecf0;
    text-align: center;
}
.FY201415,.FY201516,.FY201617,.FY201718,.FY201819
{
    margin-top: 70px;
    margin-bottom: 70px;
}
.counter-count
{
    font-size: 18px;
    background-color: #00b3e7;
    border-radius: 50%;
    position: relative;
    color: #ffffff;
    text-align: center;
    line-height: 92px;
    width: 92px;
    height: 92px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: inline-block;
}

.FY201415-p,.FY201516-p,.FY201617-p,.FY201718-p,.FY201819-p
{
    font-size: 24px;
    color: #000000;
    line-height: 34px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<div class="counter">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201415">
                    <p class="counter-count">58.67</p>
                    <p class="FY201415-p">FY 2014-15</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201516">
                    <p class="counter-count">64.34</p>
                    <p class="FY201516-p">FY 2015-16</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201617">
                    <p class="counter-count">67.74</p>
                    <p class="FY201617-p">FY 2016-17</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201718">
                    <p class="counter-count">71.96</p>
                    <p class="FY201718-p">FY 2017-18</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201819">
                    <p class="counter-count">80.30</p>
                    <p class="FY201819-p">FY 2018-19</p>
                </div>
            </div>
            
        </div>
    </div>
</div>

<div class="counter">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201415">
                    <p class="counter-count">2187</p>
                    <p class="FY201415-p">FY 2014-15</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201516">
                    <p class="counter-count">2143</p>
                    <p class="FY201516-p">FY 2015-16</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201617">
                    <p class="counter-count">2550</p>
                    <p class="FY201617-p">FY 2016-17</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201718">
                    <p class="counter-count">2711</p>
                    <p class="FY201718-p">FY 2017-18</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201819">
                    <p class="counter-count">2956</p>
                    <p class="FY201819-p">FY 2018-19</p>
                </div>
            </div>
            
        </div>
    </div>
</div>

<div class="counter">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201415">
                    <p class="counter-count">354</p>
                    <p class="FY201415-p">FY 2014-15</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201516">
                    <p class="counter-count">457</p>
                    <p class="FY201516-p">FY 2015-16</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201617">
                    <p class="counter-count">496</p>
                    <p class="FY201617-p">FY 2016-17</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201718">
                    <p class="counter-count">456</p>
                    <p class="FY201718-p">FY 2017-18</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201819">
                    <p class="counter-count">449</p>
                    <p class="FY201819-p">FY 2018-19</p>
                </div>
            </div>
            
        </div>
    </div>
</div>

<div class="counter">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201415">
                    <p class="counter-count">176</p>
                    <p class="FY201415-p">FY 2014-15</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201516">
                    <p class="counter-count">231</p>
                    <p class="FY201516-p">FY 2015-16</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201617">
                    <p class="counter-count">253</p>
                    <p class="FY201617-p">FY 2016-17</p>
                </div>
            </div>

            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201718">
                    <p class="counter-count">235</p>
                    <p class="FY201718-p">FY 2017-18</p>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
                <div class="FY201819">
                    <p class="counter-count">227</p>
                    <p class="FY201819-p">FY 2018-19</p>
                </div>
            </div>
            
        </div>
    </div>
</div>

* График