Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Вставить текст в дианрамму (https://javascript.ru/forum/dom-window/71935-vstavit-tekst-v-dianrammu.html)

smakat4ik 22.12.2017 14:52

Вставить текст в дианрамму
 
Добрый день только начинаю знакомство с JS :write:

Пытаюсь сделать круговую диаграмму перечитал кучу статей с примерами, но нигде нет примера с подписями.

Диаграмму я нашел как сделать, взял отсюда
http://ts-soft.ru/blog/front-end-web-chart

Мне только нужно добавить в массив название элемента и добавить на каждом цвете(элементе)
Подскажите как это сделать? :help:

Спасибо!:thanks:

smakat4ik 22.12.2017 14:59

var dataset = [
  {
    value: 50,
    color: '#dc3912'
  }, {
    value: 5,
    color: '#ff9900'
  }, {
    value: 20,
    color: '#109618'
  }, {
    value: 15,
    color: '#990099'
  }
];

var maxValue = 25;
var container = $('.container');

var addSector = function(data, startAngle, collapse) {
  var sectorDeg = 3.6 * data.value;
  var skewDeg = 90 + sectorDeg;
  var rotateDeg = startAngle;
  if (collapse) {
    skewDeg++;
  }

  var sector = $('<div>', {
    'class': 'sector'
  }).css({
    'background': data.color,
    'transform': 'rotate(' + rotateDeg + 'deg) skewY(' + skewDeg + 'deg)'
  });
  container.append(sector);

  return startAngle + sectorDeg;
};

dataset.reduce(function (prev, curr) {
  return (function addPart(data, angle) {
    if (data.value <= maxValue) {
      return addSector(data, angle, false);
    }

    return addPart({
      value: data.value - maxValue,
      color: data.color
    }, addSector({
      value: maxValue,
      color: data.color,
    }, angle, true));
  })(curr, prev);
}, 0);


Часовой пояс GMT +3, время: 09:23.