/* Линейная диаграмма */
.elastic-container
{
width: 100%;
border-collapse: collapse;
}
.elastic-container tr td
{
background: #fafafa;
padding: 3px;
border: solid 1px #ddd;
height: 40px;
}
.elastic-container tr td.up
{
border: none;
background: none;
font-size: 10px;
color: #777;
height: 21px;
vertical-align: top;
white-space: no-wrap;
}
.elastic-container tr td.up.active
{
border-left: solid 1px #ddd;
}
.elastic-container tr td.up .marker
{
position: absolute;
}
/*
Функции для отображения горизонтальной диаграммы
Вводные данные:
elementid - идентификатор элемента-контейнера
basicwidth - базовая длина контейнера
values - значения для диаграмы в особом формате:
var data = [
{
"title" : "ЗАГОЛОВОК",
"value" : ЗНАЧЕНИЕ
},
{
"title" : "ЗАГОЛОВОК",
"value" : ЗНАЧЕНИЕ
}
];
*/
function BuildDiagramElastic(elementid, basicwidth, values)
{
//Получаем элементы и создаём переменные
var element = document.getElementById(elementid);
var i = 0, state = {sum: 0, max: 0, current: 0};
//Создаём таблицу и строки
var table =
{
root: document.createElement("table"),
rows:
{
up: document.createElement("tr"),
center: document.createElement("tr"),
down: document.createElement("tr")
}
};
//Определяем зависимости элементов
table.root.appendChild(table.rows.up);
table.root.appendChild(table.rows.center);
table.root.appendChild(table.rows.down);
//Включаем нашу таблицу в элемент контейнер
element.appendChild(table.root);
//Устанавливаем базовую длину элемента
//Устанавливаем стили элементов и добавляем элементы
element.style.width = basicwidth + "px";
table.root.className = "elastic-container";
//Получаем максимальное значение и сумму всех значений
for (i = 0; i < values.length; i++)
{
state.sum += values[i].value;
if (values[i].value > state.max)
state.max = values[i].value;
}
//Проходимся по значениям и отображаем элементы
for (i = 0; i < values.length; i++)
{
//Создаём элементы
var cells =
{
up: document.createElement("td"),
center: document.createElement("td"),
down: document.createElement("td")
};
var text_element = document.createElement("div");
//Определяем зависимости элементов
table.rows.center.appendChild(cells.center);
table.rows.up.appendChild(cells.up);
table.rows.down.appendChild(cells.down);
//Устанавливаем стили элемента
cells.up.className = "up";
cells.down.className = "up";
text_element.className = "marker";
//Устанавливаем текст
text_element.innerHTML = "<nobr>" + values[i].title + "</nobr>";
if (i % 2 == 0)
{
cells.up.appendChild(text_element);
cells.up.className += " active";
}
else
{
cells.down.appendChild(text_element);
cells.down.className += " active";
}
//Вычисляем текущее значение текущего элемента
state.current = (values[i].value / state.sum);
//Устанавливаем это значение
cells.center.style.width = (state.current * basicwidth) + "px";
}
//IE Fix
element.innerHTML = element.innerHTML;
}
//Пример использования
var data = [
{
"title" : "Элемент 1",
"value" : 5
},
{
"title" : "Элемент 2",
"value" : 50
},
{
"title" : "Элемент 3",
"value" : 20
},
{
"title" : "Элемент 4",
"value" : 15
},
{
"title" : "Элемент 5",
"value" : 40
}
];
BuildDiagramElastic("container", 600 , data);