Шрифт:
* Элемент <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]); // Установить цвет сектора