It is necessary to make up a histogram as in the picture. Each element must be animated, for example, the first from 0 to 5%, the last from 0 to 100%. Layout must be adaptive.

So far, I am thinking of making progress with bars, but can someone tell me another way, or can someone have an example of a histogram?

enter image description here

  • one
    It is not very clear what the adaptability of the layout means in this case and what kind of animation should be on the elements. - Aleksandr Balyunou
  • To the phone looked the same as on the PC. The animation of the green bars should be from zero to their stopping point. Here are 40 lanes, each has its own point. - Abmin
  • one
    This is done on canvas. But it's better to look at ready-made solutions, for example, on Highcharts (for commercial projects you need a license). This library is the most powerful and flexible of all that I have seen, but if you look for alternatives, you may find something suitable with an open license. - neluzhin

1 answer 1

It is no longer necessary, he himself has laid down

$( document ).ready(function() { $('.p5 span').css('height','5%'); $('.p6 span').css('height','6%'); $('.p7 span').css('height','7%'); $('.p8 span').css('height','8%'); $('.p9 span').css('height','9%'); $('.p11 span').css('height','11%'); $('.p12 span').css('height','12%'); $('.p13 span').css('height','13%'); $('.p15 span').css('height','15%'); $('.p17 span').css('height','17%'); $('.p19 span').css('height','19%'); $('.p21 span').css('height','21%'); $('.p23 span').css('height','23%'); $('.p25 span').css('height','25%'); $('.p28 span').css('height','28%'); $('.p32 span').css('height','32%'); $('.p35 span').css('height','35%'); $('.p39 span').css('height','39%'); $('.p42 span').css('height','42%'); $('.p47 span').css('height','47%'); $('.p51 span').css('height','51%'); $('.p55 span').css('height','55%'); $('.p61 span').css('height','61%'); $('.p65 span').css('height','65%'); $('.p69 span').css('height','69%'); $('.p73 span').css('height','73%'); $('.p76 span').css('height','76%'); $('.p79 span').css('height','79%'); $('.p81 span').css('height','81%'); $('.p84 span').css('height','84%'); $('.p87 span').css('height','87%'); $('.p89 span').css('height','89%'); $('.p91 span').css('height','91%'); $('.p93 span').css('height','93%'); $('.p95 span').css('height','95%'); $('.p96 span').css('height','96%'); $('.p97 span').css('height','97%'); $('.p98 span').css('height','98%'); $('.p99 span').css('height','99%'); $('.gr-line').css('width','602px'); $('.violet-line').css('width','598px'); }, 500); 
 ul.xAxis{margin:0;padding:0;float:left;clear:left;display:inline;} ul.yAxis { margin: 0; padding: 0; position: absolute; margin-left: -66px; } ul.xAxis li{float:left;list-style:none;width:99.5px;} ul.xAxis li:last-child{width:30px;margin-top:5px} ul.yAxis li{ list-style:none; height:26px; text-align:right; float:left; clear:left; } dl#csschart, dl#csschart dt, dl#csschart dd{ margin:0; padding: 0 3px; } .progress-bar { background: url(http://iscr.ru/photo/1478751331_bg_chart.png) no-repeat; width: 651px; background-size: contain; height: 251px; margin: 0 auto; } .point { background: url(http://iscr.ru/photo/1478751584_bg_point.png) repeat-x; width: 602px; background-position: left bottom; margin-top: 242px; height: 5px; margin-left: -3px; position: absolute; z-index: 100; } .gr-line { background: url(http://iscr.ru/photo/1478751479_bg_line.png) no-repeat; width: 0; transition: width 1.5s ease-out 0.5s; margin-top: 188px; height: 5px; margin-left: -1px; position: absolute; z-index: 101; } .violet-line { background: url(http://iscr.ru/photo/1478751427_violet_line.png) no-repeat; width: 0; transition: width 1.5s ease-out 0.5s; height: 163px; margin-top: 56px; margin-left: -1px; position: absolute; z-index: 101; } dl#csschart dt{ display:none; } dl#csschart dd { position: relative; float: left; display: inline; width: 13px; padding: 0 1px; height: 247px; bottom: 0; } dl#csschart span{ position:absolute; display:block; width:10px; bottom:0; left:0; z-index:1; color:#555; text-decoration:none; } dl#csschart span{ height: 0; transition: height 1s ease-out 0.5s; background:url(http://iscr.ru/photo/1478751392_bar.png) repeat-y; } dl#csschart .sub{ margin-left:-33px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="progress-bar"> <ul class="yAxis"> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li> </li> <li>Затраты*</li> <li>Клиенты</li> <li>Прибыль</li> </ul> <dl id="csschart"> <div class="point"></div> <div class="gr-line"></div> <div class="violet-line"></div> <dd class="p5"><span></span></dd> <dd class="p5"><span></span></dd> <dd class="p6"><span></span></dd> <dd class="p7"><span></span></dd> <dd class="p8"><span></span></dd> <dd class="p9"><span></span></dd> <dd class="p11"><span></span></dd> <dd class="p12"><span></span></dd> <dd class="p13"><span></span></dd> <dd class="p15"><span></span></dd> <dd class="p17"><span></span></dd> <dd class="p19"><span></span></dd> <dd class="p21"><span></span></dd> <dd class="p23"><span></span></dd> <dd class="p25"><span></span></dd> <dd class="p28"><span></span></dd> <dd class="p32"><span></span></dd> <dd class="p35"><span></span></dd> <dd class="p39"><span></span></dd> <dd class="p42"><span></span></dd> <dd class="p47"><span></span></dd> <dd class="p51"><span></span></dd> <dd class="p55"><span></span></dd> <dd class="p61"><span></span></dd> <dd class="p65"><span></span></dd> <dd class="p69"><span></span></dd> <dd class="p73"><span></span></dd> <dd class="p76"><span></span></dd> <dd class="p79"><span></span></dd> <dd class="p81"><span></span></dd> <dd class="p84"><span></span></dd> <dd class="p87"><span></span></dd> <dd class="p89"><span></span></dd> <dd class="p91"><span></span></dd> <dd class="p93"><span></span></dd> <dd class="p95"><span></span></dd> <dd class="p96"><span></span></dd> <dd class="p97"><span></span></dd> <dd class="p98"><span></span></dd> <dd class="p99"><span></span></dd> </dl> <ul class="xAxis"> <li>Старт</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div>