Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.12.2017, 14:52
Новичок на форуме
Отправить личное сообщение для smakat4ik Посмотреть профиль Найти все сообщения от smakat4ik
 
Регистрация: 22.12.2017
Сообщений: 3

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

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

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

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

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 22.12.2017, 14:59
Новичок на форуме
Отправить личное сообщение для smakat4ik Посмотреть профиль Найти все сообщения от smakat4ik
 
Регистрация: 22.12.2017
Сообщений: 3

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);
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Раскрывающийся список с объемными текстами morzer Общие вопросы Javascript 4 11.07.2016 14:54
проблема со scroll Chrome Элементы интерфейса 2 21.10.2013 14:46
прогкрутка к якорям cOAPerator Общие вопросы Javascript 20 27.08.2013 03:30
Выравнять три дива в одной строке debugx (X)HTML/CSS 9 06.10.2011 12:03