Как сделать диаграмму

Как сделать диаграмму

столбчатая диаграмма

Cтолбчатая диаграмма

Диаграмма — графическое представление данных геометрическими фигурами (отрезками, столбцами, секторами и т.д.), позволяющее быстро сравнить соотношение величин. На 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;
}

Фидл с примером.


Об авторе

@altarasov administrator

Вы должны быть авторизованы, чтобы оставить комментарий.