Среда, 16 Мая 2012 11:11

Диаграмма на HTML/CSS/Js

Written by 
Оцени эту запись
(3 Голоса)

По правде говоря, не знаю конкретного применения этой штуке, просто хотелось такое сделать. Если будет желание разобрать возможные модификации, пишите в комментах.

 

Рисуем диаграмму с помощью HTML, CSS и Javascript. На странице есть два блока: список некоторых показателей с их значениями в процентах и блок, в котором будет прорисовываться диаграмма по этим процентам.

 

 

HTML выглядит так:

 

 

<div class="diag_cont">
<ul>
    <li>Показатель 1 - <span>10</span>%</li>
        <li>Показатель 2 - <span>20</span>%</li>
        <li>Показатель 3 - <span>30</span>%</li>
        <li>Показатель 4 - <span>10</span>%</li>
        <li>Показатель 5 - <span>25</span>%</li>
        <li>Показатель 6 - <span>5</span>%</li>
    </ul>
    <div class="diagramm">
    <div class="diag_item" id="d1"></div>
        <div class="diag_item" id="d2"></div>
        <div class="diag_item" id="d3"></div>
        <div class="diag_item" id="d4"></div>
        <div class="diag_item" id="d5"></div>
        <div class="diag_item" id="d6"></div>
        <br style="cleaR:left;">
    </div>
</div>
 
Как видно, в списке выписаны показатели, а в тегах span их значения. 
В блоке diagramm будет рисоваться диаграмма, каждая колонка которой - это блоки с классом diag_item. У каждого из них уникальный id. Колонка с id=d1 будет показывать значение первого показателя и так далее.
 
 

Стили влияют только на внешний вид диаграммы:

 
 
.diagramm {width: 450px; border-bottom: 1px solid #666; border-left: 1px solid #666; position: relative; height: 300px;}
.diag_item {border: 1px solid #ccc; margin-left: 5px; float:left; text-align: center; position: absolute; bottom: 3px; color: #fff; font-weight: bold;}
.diag_item#d1 {background: #f00;}
.diag_item#d2 {background: #f0f;}
.diag_item#d3 {background: #ff0;}
.diag_item#d4 {background: #00f;}
.diag_item#d5 {background: #0ff;}
.diag_item#d6 {background: #555;}
.diag_cont ul li span {color: red;}
 
У каждой колонки будет свой цвет. Диаграмма расчитана на 6 показателей, но это легко изменить. В скрипте это влияет только на цикл, который работает от 1 до 6. В html, при дабавлении показателей, нужно будет добавить блоки diag_item и прописать им идентификаторы. В стилях нужно будет прописать для новых колонок цвет фона.
 

Смотрим скрипт:

 
 
$(document).ready(function(){
var l = $('.diag_cont .diagramm .diag_item').size();
var c = new Array;
var b = $('.diag_cont .diagramm').height();
for(i=1;i<7;i++){
$('.diag_cont .diagramm .diag_item#d'+i).width($('.diag_cont .diagramm').width()/l - 7);
c[i] = $('.diag_cont ul li').eq(i-1).children('span').text();
$('.diag_cont .diagramm .diag_item#d'+i).height(b/100*c[i]);
$('.diag_cont .diagramm .diag_item#d'+i).text(c[i]+'%');
$('.diag_cont .diagramm .diag_item#d'+i).css('left', ($('.diag_cont .diagramm .diag_item').width()+7)*(i-1));
}
 
});
 
Перед тем, как вникать в подробности скрипта, советую посмотреть демо.
 
 
var l = $('.diag_cont .diagramm .diag_item').size();
 
 
Определяем количество показателей
 
 
var c = new Array;
 
 
Создаем новый массив для записи значений показателей
 
 
var b = $('.diag_cont .diagramm').height();
 
 
Узнаем высоту контейнера диаграммы, прописанную в стилях. Это даст возможность рисовать диаграммы любого размера. Ширина этого контейнера также прописана в css, изменив их, вы измените размеры диаграммы.
 
 
for(i=1;i<7;i++){}
 
 
Запускаем цикл по показателям
 
 
$('.diag_cont .diagramm .diag_item#d'+i).width($('.diag_cont .diagramm').width()/l - 7);
 
 
Задаем ширину каждой колонки равной ширина контейнера деленная на количество колонок минус 7px (отступы для колонок заданные в стилях).
 
 
c[i] = $('.diag_cont ul li').eq(i-1).children('span').text();
 
 
Каждому i-тому элементу массива задаем значение, равное значению соответственного показателя. Тут показатель лежит в списке ul, у соответствующего элемента li, внутри тега span.
 
 
$('.diag_cont .diagramm .diag_item#d'+i).height(b/100*c[i]);
 
 
Каждой колонке (по id) задаем высоту, равную нужному показателю, умноженному на 1 процент высоты контейнера.
 
 
$('.diag_cont .diagramm .diag_item#d'+i).text(c[i]+'%');
 
 
Внутрь колонки прописываем значение выведенного показателя.
 
 
$('.diag_cont .diagramm .diag_item#d'+i).css('left', ($('.diag_cont .diagramm .diag_item').width()+7)*(i-1));
 
 
У колонок в стилях задано абсолютное позиционирование, со смещением снизу 3px. В этой строке мы задаем i-той колонке смещение слева, равное ширине колонки + 7px отступа и умноженное на количество предыдущий колонок (i-1).
 
 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов