Круговая диаграмма с различными размерами секторов
Всем привет,
Я с нетерпением жду, чтобы создать диаграмму, как показано ниже. Я гуглю, чтобы выяснить, на какой диаграмме есть возможность создать подобную диаграмму такого типа, точно не похожую на текстовый текст внутри каждой дуги, но с пустым.
В первую очередь я искал в chartjs, так как я новичок в использовании любой библиотеки графиков, мне еще предстоит разобраться в ее возможностях, а значит, если у кого-то есть предложения, это поможет мне.
Спасибо всем
2 ответа
Если вы хотите использовать другую библиотеку 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');
Вы можете использовать ECharts. Существует также версия Vue для этого. У них есть именно этот тип диаграммы.
Другой возможностью было бы создать плагин chartjs для такого рода диаграмм.