Диаграмма — графическое представление данных геометрическими фигурами (отрезками, столбцами, секторами и т.д.), позволяющее быстро сравнить соотношение величин. На HTML создается столбчатая диаграмма горизонтальная или вертикальная. Если использовать SVG-графику, то можно добиться невероятных представления графиков и диаграмм, как в d3.js.
На курсах часто возникает вопрос о создании простой столбчатой диаграммы средствами HTML и CSS. Для подобного графика нужен контейнер, снабдим его классом .graph и отдельные элементы столбцы, пусть это будут элементы div с классом .item.
Как сделать диаграмму горизонтальную
Для горизонтального графика нужно минимум усилий: .item — занимают 100% ширины от .graph, значит достаточно задать каждому столбцу ширину, фоновый цвет и текст внутри, как задача будет решена. Фоновый цвет можно вынести в стили вне HTML-элемента, там же указать высоту (т.е. толщину столбца, она у всех колонок одинаковая) а вот ширину всегда прописывать внутри.
<div id="graph" class="graph horizontal">
<div class="item" style="width:10%">10</div>
<div class="item" style="width:25%">25</div>
<div class="item" style="width:30%">30</div>
<div class="item" style="width:50%">50</div>
</div>Как сделать диаграмму вертикальную
Для вертикальной столбчатой диаграммы понадобиться применить дополнительные CSS-свойства. Тут возможны разные варианты вёрстки, но наиболее приемлемым по скорости видится добавление .item свойства display: inline-block. В этом случае придётся ширину делать одинаковой и выносить в стилевой файл или в head, а высоту каждый раз указывать для отдельного столбца.
<div id="graph" class="graph vertical">
<div class="item" style="height:20px;margin-top:90px">10</div>
<div class="item" style="height:45px;margin-top:65px">25</div>
<div class="item" style="height:60px;margin-top:50px">30</div>
<div class="item" style="height:100px;margin-top:10px">50</div>
</div>Один раз сверстав подобную диаграмму, в дальнейшем можно написать скрипт на JavaScript, чтобы им выполнялась рутинная работа по созданию из набора чисел — симпатичного графика, а самим создавать дополнительные стили или оформления текущего графика или изучать плагины, стоящие более сложные и красивые решения.
#graph.graph{
border: 1px dashed #77FF5C;
padding: 5px;
}
#graph .item{
margin: 2px;
color: #fff;
text-shadow: 1px 1px 1px #000;
padding: 3px;
border-radius: 3px;
background-color: #00508C;
box-shadow: 0 0 1px #2280AC;
}
#graph .item:hover{
background-color: #2280AC;
box-shadow: 0 0 2px #2280AC;
}
#graph.horizontal{
width: 200px;
}
#graph.horizontal .item{
height: 20px;
text-align: right;
}
#graph.vertical{
height: 120px;
width: 200px;
padding-bottom: 10px;
}
#graph.vertical .item{
width: 20px;
float: left;
display: inline-block;
}Фидл с примером.