Рисуем круговую диаграмму

Представьте, что вы получили работу в ООО «Экономика для всех», и вашим первым заданием будет нарисовать круговую диаграмму удовлетворённости клиентов согласно результатам опроса.

Переменная result содержит массив объектов, представляющих результаты.

var results = [

  {name: "Удовлетворён", count: 1043, color: "lightblue"},

  {name: "Нейтральное", count: 563, color: "lightgreen"},

  {name: "Не удовлетворён", count: 510, color: "pink"},

  {name: "Без комментариев", count: 175, color: "silver"}

];

Чтобы нарисовать диаграмму, мы рисуем несколько секторов, каждый из которых делается из арки и пары линий от центра. Угол мы вычисляем, деля полный круг (2?) на общее количество отзывов, и умножая на количество людей, выбравших данный вариант ответа.

<canvas width="200" height="200"></canvas>

<script>

  var cx = document.querySelector("canvas").getContext("2d");

  var total = results.reduce(function(sum, choice) {

    return sum + choice.count;

  }, 0);

  // Start at the top

  var currentAngle = -0.5 * Math.PI;

  results.forEach(function(result) {

    var sliceAngle = (result.count / total) * 2 * Math.PI;

    cx.beginPath();

    // center=100,100, radius=100

    // from current angle, clockwise by slice's angle

    cx.arc(100, 100, 100,

           currentAngle, currentAngle + sliceAngle);

    currentAngle += sliceAngle;

    cx.lineTo(100, 100);

    cx.fillStyle = result.color;

    cx.fill();

  });

</script>

Но диаграмма не расшифровывает значения секторов – это неудобно. Нам надо как-то нарисовать на холсте текст.

Более 800 000 книг и аудиокниг! 📚

Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением

ПОЛУЧИТЬ ПОДАРОК