JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

* Элемент <svg>, хранящий круговую диаграмму.

* Вызывающая программа должна вставить возвращаемый элемент в документ.

*/

function pieChart(data, width, height, cx, су, r, colors, labels, lx, ly) {

// Пространство имен XML для элементов svg

var svgns = " http://www.w3.org/2000/svg ";

//

Создать элемент <svg>, указать размеры в пикселах и координаты

var chart = document.createElementNS(svgns, "svg:svg");

chart.setAttribute("width", width);

chart.setAttribute("height", height);

chart.setAttribute("viewBox", "0 0 ” + width + " " + height);

// Сложить вместе все значения, чтобы получить общую сумму всей диаграммы

var total = 0;

for(var і = 0; і < data.length; і++) total += data[і];

// Определить величину каждого сектора. Углы измеряются в радианах,

var angles = []

for(var і = 0; і < data.length; і++) angles[i] = data[i]/total*Math.PI*2;

// Цикл по всем секторам диаграммы,

startangle = 0;

for(var і = 0; і < data.length; i++) {

// Точка, где заканчивается сектор

var endangle = startangle + angles[i];

// Вычислить координаты точек пересечения радиусов, образующих сектор,

// с окружностью. В соответствии с выбранными формулами углу 0 радиан

// соответствует точка в самой верхней части окружности,

// а положительные значения откладываются от нее по часовой стрелке.

var х1 = сх + r * Math.sin(startangle);

var y1 = су - r * Math.cos(startangle);

var x2 = cx + r * Math.sin(endangle);

var y2 = су - r * Math.cos(endangle);

// Это флаг для углов, больших половины окружности.

//

Он необходим SVG-механизму рисования дуг

var big = 0;

if (endangle - startangle > Math.PI) big = 1;

// Мы описываем сектор с помощью элемента <svg:path>.

// Обратите внимание, что он создается вызовом createElementNS

var path = document.createElementNS(svgns, "path");

// Эта строка хранит информацию о контуре, образующем сектор

var d = "М " + сх + + су + // Начало в центре окружности

" L " + х1 + "," + у1 + // Нарисовать линию к точке (х1,у1)

" А " + r + "," + r + // Нарисовать дугу с радиусом r

" 0 " + big + " 1 " + // Информация о дуге...

х2 + "," + у2 + // Дуга заканчивается в точке (х2,у2)

Z"; // Закончить рисование в точке (сх,су)

// Теперь установить атрибуты элемента <svg:path>

path.setAttribute("d", d); // Установить описание контура

path.setAttribute("fill", colors[i]); // Установить цвет сектора

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]); // Тем же цветом, что и сектор