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]); // Тем же цветом, что и сектор
Поделиться:
Популярные книги
Страх
2. Дети Арбата
Проза:
историческая проза
9.49
рейтинг книги
Дважды одаренный. Том VIII
8. Дважды одаренный
Фантастика:
боевая фантастика
альтернативная история
аниме
попаданцы
5.00
рейтинг книги
Мастер Трав III
3. Мастер Трав
Фантастика:
фэнтези
рпг
фантастика: прочее
попаданцы
5.75
рейтинг книги
Старый, но крепкий 2
2. Культивация без насилия
Фантастика:
рпг
уся
эпическая фантастика
5.00
рейтинг книги
Двойник Короля
1. Двойник Короля
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Тринадцатый XIII
13. Видящий смерть
Фантастика:
городское фэнтези
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Лекарь Империи 2
2. Лекарь Империи
Фантастика:
городское фэнтези
аниме
дорама
фэнтези
попаданцы
5.00
рейтинг книги
Хозяин Стужи 7
7. Злой Лед
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Потомок бога
1. Локки
Фантастика:
попаданцы
альтернативная история
аниме
сказочная фантастика
5.00
рейтинг книги
Твое сердце будет разбито. Книга 1
Любовные романы:
современные любовные романы
5.50
рейтинг книги
Мой муж – чудовище! Изгнанная жена дракона
Любовные романы:
любовно-фантастические романы
5.00
рейтинг книги
Эволюционер из трущоб. Том 5
5. Эволюционер из трущоб
Фантастика:
попаданцы
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Изгой Проклятого Клана. Том 3
3. Изгой
Фантастика:
аниме
фэнтези
фантастика: прочее
попаданцы
5.00
рейтинг книги
На границе империй. Том 9. Часть 4
17. Фортуна дама переменчивая
Фантастика:
космическая фантастика
попаданцы
5.00