Создание гистограмм средствами CSS

Гистограмма, представленная на рис. 22.1, была создана с помощью следующего HTML_файла:

<!DOCTYPE HTML PUBLIC "_//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!__ Без объявления DOCTYPE в IE рисунок будет выглядеть неправильно __> <html>

<head>

function drawChart() {

var chart = makeBarChart([1,2,4,8,16,32,64,128,256], 600, 300); var container = document.getElementById("chartContainer"); container.appendChild(chart);

}

</script>

</head>

<i>Обратите внимание: каждый столбец в два раза выше предыдущего __ это характеристика экспоненциальной функции</i>

</body>

</html>

Совершенно очевидно, что все самое интересное сосредоточено в функции make_ BarChar() из файла BarChart.js, содержимое которого приводится в примере 22.5.

Пример 22.5. Рисование гистограмм средствами CSS

/**

* 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 определяют общий размер гистограммы.

// Чтобы получить размер создаваемого элемента, необходимо вычесть

// из этих значений толщину рамок и величину отступов.

22.2. Графика и CSS

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 2px"; //	Определить рамку
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);

// Отыскать наибольшее число в массиве 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 _ рамка сверху
bar.style.border = "solid black 1px";	//	Стиль рамки столбика
bar.style.backgroundColor = barcolor;	//	Цвет столбика
bar.style.fontSize = "0px";	//	Учесть особенность IE
chart.appendChild(bar);	//	Добавить столбик
	//	в гистограмму

}

// В заключение вернуть элемент с гистограммой return chart;

}

Программный код примера 22.5 достаточно прямолинеен и в нем не сложно ра_ зобраться. Здесь демонстрируются приемы создания новых элементов <div> и до_ бавления их в документ – об этих приемах рассказывалось в главе 15. Кроме то_ го, здесь использованы приемы установки свойств CSS_стилей в создаваемых элементах, о которых рассказывалось в главе 16. В документе нет текстового со_ держимого, гистограмма представляет собой просто набор прямоугольников,

558 Глава 22. Работа с графикой на стороне клиента

для каждого из которых аккуратно вычисляются размеры и координаты внутри другого прямоугольника. Видимыми прямоугольники делают CSS_атрибуты border и background_color. Один из важнейших фразментов программного кода – код задания стиля position:relative без установки стилей top и left для самой гистограммы. Это позволяет гистограмме оставаться в нормальном потоке выво_ да документа, но иметь дочерние элементы с абсолютным позиционированием относительно левого верхнего угла гистограммы. Если бы для гистограммы не был задан стиль относительного (или абсолютного) позиционирования, ни один из столбиков не удалось бы корректно вывести.

В примере 22.5 можно найти несложные арифметические вычисления высоты столбиков гистограммы в пикселах на основе значений отображаемых данных. Программный код, который вычисляет координаты и размеры столбиков, так_ же учитывает размеры рамок и отступов.