Круговая диаграмма.

Ранее мы видели пример программы для рисования круговой диаграммы. Поменяйте её, чтобы имя каждой категории было показано рядом с куском, который её представляет. Попробуйте отыскать симпатичный вариант автоматического позиционирования текста, который бы работал и на других наборах данных. Можно предположить, что нет категории меньше 5% (чтобы текст не громоздился друг на друга).

Вам снова могут понадобиться Math.sin и Math.cos.

<canvas width="600" height="300"></canvas>

<script>

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

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

Return sum + choice.count;

}, 0);

Var currentAngle = -0.5 * Math.PI;

Var centerX = 300, centerY = 150;

// Добавьте код для вывода меток.

Results.forEach(function(result) {

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

Cx.beginPath();

Cx.arc(centerX, centerY, 100,

CurrentAngle, currentAngle + sliceAngle);

CurrentAngle += sliceAngle;

Cx.lineTo(centerX, centerY);

Cx.fillStyle = result.color;

Cx.fill();

});

</script>