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

Рис. 21.3. Круговая диаграмма в формате SVG, построенная JavaScript-сценарием

Пример 21.2. Рисование круговой диаграммы средствами JavaScript и SVG

  /* *
  * Создает элемент <svg> и рисует в нем круговую диаграмму.
  * Аргументы:
* data: массив чисел для диаграммы, по одному для каждого сектора.
  * width,height: размеры SVG-изображения в пикселах
  * сх, су, г: координаты центра и радиус круга
  * colors: массив цветов в формате HTML, по одному для каждого сектора
  * labels: массив меток для легенды, по одной для каждого сектора
  * 1х, 1у: координаты левого верхнего угла легенды диаграммы
  * Возвращает:
  * Элемент <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;

   // Нарисовать маленький квадрат для идентификации сектора в легенде