Я пытаюсь создать простую круговую диаграмму, как показано на рисунке ниже:
На диаграмме будут показаны результаты для викторины, где пользователь может выбрать a, b или c. Это 10 вопросов, и пользователь может выбрать только один вариант для каждого вопроса.
Я хочу показать круговую диаграмму, в которой каждый сегмент будет составлять процент от 100%, передавая значения для a, b или c.
У меня есть следующее:
var greenOne = "#95B524";
var greenTwo = "#AFCC4C";
var greenThree = "#C1DD54";
function CreatePieChart() {
var chart = document.getElementById('piechart');
var canvas = chart.getContext('2d');
canvas.clearRect(0, 0, chart.width, chart.height);
var total = 100;
var a = 3;
var b = 4;
var c = 3;
for (var i = 0; i < 3; i++) {
canvas.fillStyle = "#95B524";
canvas.beginPath();
canvas.strokeStyle = "#fff";
canvas.lineWidth = 3;
canvas.arc(100, 100, 100, 0, Math.PI * 2, true);
canvas.closePath();
canvas.stroke();
canvas.fill();
}
}
CreatePieChart();
<canvas id="piechart" width="200" height="200"></canvas>