/* Стили столбчатой диаграммы */
.element
{
padding: 1px;
margin: 5px 0px 0px 0px;
border: solid 1px #ddd;
font-size:0px;
/* display: none; */
}
.element-inline
{
padding: 2px;
padding-right: 0px;
padding-left: 0px;
background-color: #090;
width:0%;
}
.element-active
{
background-color: #b00;
}
.element-text
{
/* display: none; */
padding-left: 1px;
padding-top: 3px;
padding-bottom: 1px;
font-size: 10px;
color: #888;
}
function BuildDiagram(elementid, basicwidth, values)
{
//Получаем элементы и создаём переменные
var element = document.getElementById(elementid);
var i = 0, state = {sum: 0, current: 0, max: 0, widths: 0, increments: 0, indicators: Array(), summarize: Array()};
//Устанавливаем базовую длину элемента
element.style.width = basicwidth + "px";
//Получаем максимальное значение и сумму всех значений
for (i = 0; i < values.length; i++)
{
state.sum += values[i].value;
if (values[i].value > state.max)
state.max = values[i].value;
}
//Сбрасываем переменную-счётчик
i = 0;
//Проходимся по значениям и отображаем элементы
for (i = 0; i < values.length; i++)
{
//Создаём элементы
var indicator = document.createElement("div");
var indicator_i = document.createElement("div");
var indicator_text = document.createElement("div");
//Вычисляем текущее значение текущего элемента
state.current = (values[i].value / state.sum);
//Устанавливаем стили и настройки элементов
indicator.className = "element";
indicator_i.className = "element-inline";
indicator_text.className = "element-text";
indicator.style.width = (state.current * basicwidth) + "px";
//Устанавливаем идентификаторы элементов
indicator_i.id = "ind_val_" + elementid + "_" + i;
//indicator.id = "nat_" + indicator_i.id;
//indicator_text.id = "text_" + indicator_i.id;
//Если это максимальное значение, создаём
if (state.max == values[i].value)
indicator_i.className = "element-inline element-active";
//Текст элемента
indicator_text.innerHTML = values[i].title + " (" + (state.current*100).toString().substr(0,4) + "%)";
//Добавляем элементы в контейнер
indicator.appendChild(indicator_i);
element.appendChild(indicator_text);
element.appendChild(indicator);
//Сохраняем каждый идентификатор и суммаризационные значения
state.indicators[i] = indicator_i.id;
state.summarize[i] = parseInt((state.current*100).toString().substr(0,4));
}
//Устанавливаем новые переменные
var i = 0;
//Функция для повторных действий
var increment_fnc = function()
{
//Если это не последний элемент
if (i != state.indicators.length)
{
//Если длина не равна 100 процентам
if (state.widths <= 100)
{
//document.getElementById("nat_" + indicators[i]).style.display = "block";
//document.getElementById("text_" + indicators[i]).style.display = "block";
//Увеличиваем длину элемента
document.getElementById(state.indicators[i]).style.width = state.widths + "%";
state.widths += 2;
}
else
{
//В противном случае, переходим к следующему элементу и обнуляем счётчик длины
i++;
state.widths = 0;
}
}
else
clearInterval(state.increments); //В противном случае, очищаем счётчик
}
//Запускаем нашу функцию
state.increments = setInterval(increment_fnc, 10);
}
//Пример использования
var data = [
{
"title" : "Элемент 1",
"value" : 5
},
{
"title" : "Элемент 2",
"value" : 50
},
{
"title" : "Элемент 3",
"value" : 20
},
{
"title" : "Элемент 4",
"value" : 15
},
{
"title" : "Элемент 5",
"value" : 40
}
];
BuildDiagram("container", 700 , data);