Учитывая, что сейчас многие пользуются блого-сервисами (blogger, tumblr, livejournal, etc.), могут возникнуть потребности в создании гистограмм. Мы же любим, когда данные можно "потрогать". Использование PHP в этом случае затруднено. Поэтому самый простой способ - создание гистограмм на JavaScripte с помощью CSS-стилей. Сразу отмечу, что сие способ описан в руководстве Флэнагана по JavaScript (со своими изменениями).
Основную работу будет выполнять js-файл - BarChart.js (см. листинг ниже). На входе он ожидает данные в виде массива, значения которого он аккуратно заклыдывает в гистограмму, которую выдает на выходе. Все очень просто. Ниже представлен один из примеров гистаграммы (Test chart).
Получаемые гистограммы легко инсталлируются в веб-странички. При этом можно входные данные сделать динамичными, так сказать - поставить на поток, что должно сделать динамичным и саму гистограмму. Ниже представлены листинги индексной html-странички и BarChart.js.
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"
http://www.w3.org/TR/html4/loose.dtd">
<!-- Без объявления DOCTYPE в IE рисунок будет выглядеть неправильно -->
<html>
<head>
<script src="BarChart.js"></script> <!-- Подключить библиотеку -->
<script>
function drawChart() {
var data = [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,50,50,50,5,5,5,5,5,5,5,5,50,6,6,7,7,7,60,8];
var chart = makeBarChart(data, 300, 300);
var container = document.getElementById("chartContainer");
container.appendChild(chart);
}
</script>
</head>
<body onload="drawChart( )">
<h2>Test chart</h2><!-- Заголовок гистограммы -->
<div id="chartContainer"><!-- Здесь рисуется гистограмма --></div>
<!-- Подпись под гистограммой -->
<i>Test chart</i>
</body>
</html>
BarChart.js
/**
* BarChart.js:
* В этом файле содержится определение функции makeBarChart(), которая
* создает гистограмму для вывода содержимого массива data[].
* Общий размер гистограммы определяется необязательными аргументами
* width и height, которые учитывают пространство, необходимое для рамок
* гистограммы и внутренних отступов. Необязательный аргумент barcolor
* определяет цвет столбиков. Функция возвращает созданный ею элемент
* <div>, таким образом, вызывающий сценарий может манипулировать
* этим элементом, например, изменять величину отступов. Вызывающий
* сценарий должен вставить в документ полученный от функции элемент,
* чтобы сделать его видимым.
**/
function makeBarChart(data, width, height, barcolor) {
// Предусмотреть значения по умолчанию для необязательных аргументов
if (!width) width = 500;
if (!height) height = 350;
if (!barcolor) barcolor = "blue";
// Аргументы width и height определяют общий размер гистограммы.
// Чтобы получить размер создаваемого элемента, необходимо вычесть
// из этих значений толщину рамок и величину отступов.
width -= 24; // Вычесть 10px отступа и 2px толщины рамки слева и справа
height -= 14; // Вычесть 10px отступа сверху и 2px толщины рамки сверху и снизу
// Создать элемент для размещения гистограммы. Обратите внимание:
// гистограмма позиционируется в относительных координатах, т. е.
// в ней могут располагаться дочерние элементы с абсолютным
// позиционированием, и отображаться при этом в нормальном потоке
// вывода элементов документа.
var chart = document.createElement("div");
chart.style.position = "relative"; // Относительное позиционирование
chart.style.width = width + "px"; // Ширина гистограммы
chart.style.height = height + "px"; // Высота гистограммы
chart.style.border = "solid black 1px"; // Определить рамку
chart.style.paddingLeft = "10px"; // Добавить отступ слева
chart.style.paddingRight = "10px"; // Справа
chart.style.paddingTop = "10px"; // Сверху
chart.style.paddingBottom = "0px"; // Но не снизу
chart.style.backgroundColor = "white"; // Фон гистограммы - белый
// Рассчитать ширину каждого столбика
//var barwidth = Math.floor(width/data.length);
var barwidth = 1;
// Отыскать наибольшее число в массиве data[]. Обратите внимание
// на грамотное использование функции Function.apply().
var maxdata = Math.max.apply(this, data);
// Масштабирующий множитель: scale*data[i] дает высоту столбика
var scale = height/maxdata;
// Обойти в цикле массив с данными и создать столбики для всех элементов
for(var i = 0; i < data.length; i++) {
var bar = document.createElement("div"); // Создать столбик
var barheight = data[i] * scale; // Рассчитать высоту
bar.style.position = "absolute"; // Уст. размер и положение
bar.style.left = (barwidth*i+1+10)+"px"; // Добавить рамку столбика
// и отступ
bar.style.top = height-barheight+10+"px";// Добавить отступ
// гистограммы
bar.style.width = (barwidth-2) + "px"; // -2 - рамка столбика
bar.style.height = (barheight-1) + "px"; // -1 - рамка сверху
if (data[i] >= 50) bar.style.border = "solid red 1px"; // Стиль рамки столбика при значениях более 50
if (data[i] < 50) bar.style.border = "solid blue 1px"; // Стиль рамки столбика при значениях менее 50
bar.style.backgroundColor = barcolor; // Цвет столбика
bar.style.fontSize = "0px"; // Учесть особенность IE
chart.appendChild(bar); // Добавить столбик
// в гистограмму
}
// В заключение вернуть элемент с гистограммой
return chart;
}
Все представленные листинги можно скачать
здесь. Всем удачи.
