Круговая диаграмма с различными размерами секторов

Question

Всем привет,

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

В первую очередь я искал в chartjs, так как я новичок в использовании любой библиотеки графиков, мне еще предстоит разобраться в ее возможностях, а значит, если у кого-то есть предложения, это поможет мне.

Спасибо всем

Answer 1

Если вы хотите использовать другую библиотеку d3.js. Вы должны посмотреть на это:

https://github.com/amanjain325/angular-d3-charts/tree/master/src/app/doughnut-chart

Отредактируйте значение радиуса согласно вашему требованию.

let pie = d3.layout.pie()
  .startAngle(Math.PI / 2)
  .endAngle(Math.PI * 2 + Math.PI / 2)
  .value((d) => {
    return d.value;
  }).sort(null);

let arc = d3.svg.arc()
  .outerRadius(150)
  .innerRadius(70);

let g = svg.selectAll('.arc')
  .data(pie(piedata))
  .enter().append('g')
  .attr('class', 'arc');

Answer 2

Вы можете использовать ECharts. Существует также версия Vue для этого. У них есть именно этот тип диаграммы.

Другой возможностью было бы создать плагин chartjs для такого рода диаграмм.