Шрифт:
path.setAttribute("stroke", "black"); // Рамка сектора - черная
path.setAttribute("stroke-width”, "2"); // 2 единицы толщиной
chart.appendChild(path); // Вставить сектор в диаграмму
// Следующий сектор начинается в точке, где закончился предыдущий
startangle = endangle;
// Нарисовать маленький квадрат для идентификации сектора в легенде
var icon = document.createElementNS(svgns, "rect");
icon.setAttribute("x”, lx); // Координаты квадрата
icon.setAttribute("y", ly + ЗО*і);
icon.setAttribute("width", 20); // Размер квадрата
icon.setAttribute("height", 20);
icon.setAttribute("fill", colors[i]); // Тем же цветом, что и сектор
icon.setAttribute("stroke", "black"); // Такая же рамка,
icon.setAttribute("stroke-width", "2");
chart.appendChild(icon); // Добавить в диаграмму
// Добавить метку правее квадрата
var label = document.createElementNS(svgns, "text");
label.setAttribute("x", lx + 30); // Координаты текста
label.setAttribute("y", ly + ЗО*і + 18);
// Стиль текста можно также определить посредством таблицы CSS-стилей
label.setAttribute("font-family", "sans-serif");
label.setAttribute("font-size", "16");
// Добавить текстовый DOM-узел в элемент <svg:text>
label.appendChild(document.createTextNode(labels[і]));
chart.appendChild(label); // Добавить текст в диаграмму
}
return chart;
}
Программный код в примере 21.2 относительно прост. Здесь выполняются некоторые математические расчеты для преобразования исходных данных в углы секторов круговой диаграммы. Однако основную часть примера составляет программный код, создающий SVG-элементы и выполняющий настройку их атрибутов. Чтобы этот пример мог работать в броузерах, не полностью поддерживающих стандарт HTML5, здесь формат SVG интерпретируется как грамматика XML и вместо метода
createElement
используются пространство имен SVG и метод createElementNS
. Самая малопонятная часть этого примера - программный код, выполняющий рисование сектора диаграммы. Для отображения каждого сектора используется тег
<svg:path>
. Этот SVG-элемент описывает рисование произвольных фигур, состоящих из линий и кривых. Описание фигуры определяется атрибутом d
элемента <svg:path>.
Основу описания составляет компактная грамматика символьных кодов и чисел, определяющих координаты, углы и прочие значения. Например, символ М
означает «move to» (переместиться в точку), и вслед за ним должны следовать координаты X и У точки. Символ L
означает «line to» (рисовать линию до точки); он рисует линию от текущей точки до точки с координатами, которые следуют далее. Кроме того, в этом примере используется символьный код А
, который рисует дугу (arc). Вслед за этим символом следуют семь чисел, описывающих дугу. Точное описание нас здесь не интересует, но вы можете найти его в спецификации по адресу http://www.w3.org/TR/SVG/. Обратите внимание, что функция
pieChart
возвращает элемент <svg>,
содержащий описание круговой диаграммы, но она не вставляет этот элемент в документ. Предполагается, что это будет делать вызывающая программа. Диаграмма, изображенная на рис. 21.3, была создана с помощью следующего файла:
<html>
<head>
<script src="PieChart.js"x/scr.ipt>
</head>
<body onload="document.body.appendChild(
pieChart([12, 23, 34, 45], 640, 400, 200, 200, 150,
['красный','синий’,'желтый','зеленый'],
['Север','Юг', 'Восток', 'Запад'], 400, 100));
">
</body>