Модернизировать doughnut chart

#javascript #svg #angular #chartjs

Появилась такая необходимость модернизировать стандартный doughnut chart, которые
предоставляют библиотеки, но не знаю с чего начать. То есть необходимо изменить высоту
и размер разных элементов в dought chart. Подскажите, как возможно изменить библиотеки(3d.js,
chart.js, echart) или проще попробовать самому нарисовать svg чарт,

    

Ответы

Ответ 1

Вот вариант на js+svg, тут надо посчитать углы и точки арок:



let data = Array(5).fill(0).map((e,i)=> ({
    r1: 10+i*2, 
    r2: -i*0.5, 
    value: Math.random()+0.1, 
    color: `hsl(${i*45},65%,65%)`
}));

let total = data.reduce((a, d) => a + d.value, 0);
let r = 40;
let a = 0;

chart.innerHTML = data.map(d => {
    
  let cs1 = Math.cos(a);
  let sn1 = Math.sin(a);
  let angle = d.value/total*2*Math.PI;
  a += angle;
  let cs2 = Math.cos(a);
  let sn2 = Math.sin(a);
  let ir = r + d.r1;
  let or = r + d.r2;
  let la = angle > Math.PI ? 1 : 0;
  return ``;

}).join("");
body {
  margin: 0;
  overflow: hidden;
}

path {
  opacity: 0.7;
  transition: 1;
  transition: 500ms;
  cursor: pointer;
}

path:hover {
  opacity: 1;
}



Ответ 2

Для разбиения окружности на сектора вы можете использовать stroke-dasharray

Для смещения начала сектора используется stroke-dashoffset  

Здесь нижний круг имеет серый цвет над ним расположен  цветной сектор второго круга. 
При r="40" Полная длина окружности равна  perimetr = 2 * 3.14 * 40 = 251,2 

В этом примере строка заполнена на 80% amount = 80 , значит её нужно сдвинуть  

stroke-dashoffset = perimeter - perimeter * amount / 100 = 50.3






  

Ниже пример с 50% заполнением 








Несколько цветных секторов 








Пример анимации



$(".progress").each(function() {
  var dataProgress = $(this).attr("stroke-dashoffset");
  $(this).attr("stroke-dashoffset", "251.2");
  $(this).animate({
    "stroke-dashoffset": dataProgress
  },1500)
})




Ответ 3

Вот решение на d3, все что тут нужно сделать - менять внутренний и внешний радиус
у arc-генератора:

.attr('d', d => {
    var ir = radius/3 + Math.random()*radius/5;
    var or = ir + Math.random()*radius/5;
    return arc.innerRadius(ir).outerRadius(or)(d)
  })




var data = [ Math.random(), Math.random(), Math.random(), Math.random()]
var width = 260;
var height = 260;
var radius = Math.min(width, height) / 2;
var color = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("body")
  .append('svg')
  .attr('viewBox', `${-width/2} ${-height/2} ${width} ${height}`)

var arc = d3.arc();

var pie = d3.pie()
  .value(d => d )
  .sort(null);

var path = svg.selectAll('path')
.data(pie(data))
.enter()
.append("g")
  .append('path')
  .attr('d', d => {
    var ir = radius/3 + Math.random()*radius/5;
    var or = ir + Math.random()*radius/5;
    return arc.innerRadius(ir).outerRadius(or)(d)
  })
  .attr('fill', (d,i) => color(i))