Вход

Просмотр полной версии : Вставить текст в дианрамму


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);