Построение круговой диаграммы

248

30 марта 2017, 18:31

Здравствуйте. Подскажите, пожалуйста, как такое реализовать.

Как бы саму диаграмму реализовать не проблема, благо библиотек много. Но затык в том, что эта диаграмма сама делится ровно на 4 части. Как такое вообще делать?

Answer 1

Логически рассуждая, на диаграмме 4 выборки и 4 сегмента.

Следовательно, надо заполнять сегменты.

Вот пример с библиотекой chartist - делаем "пончик" (donut):

new Chartist.Pie('.ct-chart', {
  series: [20, 10, 30, 40]
}, {
  donut: true,
  donutWidth: 130,
  startAngle: 270,
  total: 400,
  showLabel: true
});

И так для каждого сегмента, настраивая переменные под ваши размеры и другие параметры. https://gionkunz.github.io/chartist-js/examples.html#simple-gauge-chart

Можно воспользоваться и другими библиотеками