Круговая диаграмма HTML5 Canvas
Я пытаюсь создать простую круговую диаграмму, как показано на рисунке ниже:
На диаграмме будут показаны результаты викторины, где пользователь может выбрать любой из них. а, б или в. Это 10 вопросов, и пользователь может выбрать только один вариант для каждого вопроса.
Я хочу показать круговую диаграмму, где каждый сегмент составляет 100%, передав значения для a, b или c.
Пока у меня есть следующее:
var greenOne = "# 95B524"; var greenTwo = "# AFCC4C"; вар greenThree = "# C1DD54"; функция 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; для (var я = 0; я <3; я ++) {canvas.fillStyle = "# 95B524"; холст.beginPath (); canvas.strokeStyle = "#fff"; canvas.lineWidth = 3; canvas.arc (100, 100, 100, 0, Math.PI * 2, истина); canvas.closePath (); canvas.stroke (); canvas.fill (); }} CreatePieChart (); Цвета зависят от размера сегмента, поэтому используется зеленый цвет за самый большой и зеленый три за самый маленький.
Спасибо
2 ответа
Даже после поиска в Google и тройной проверки значений радиан и т. Д. У меня все еще были проблемы с этим, поэтому я создал jsFiddle для людей, с которыми можно играть как живой пример и опубликует код ниже.
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
var lastend = 0;
var data = [200, 60, 15]; // If you add more data values make sure you add more colors
var myTotal = 0; // Automatically calculated so don't touch
var myColor = ['red', 'green', 'blue']; // Colors of each slice
for (var e = 0; e < data.length; e++) {
myTotal += data[e];
}
for (var i = 0; i < data.length; i++) {
ctx.fillStyle = myColor[i];
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2);
// Arc Parameters: x, y, radius, startingAngle (radians), endingAngle (radians), antiClockwise (boolean)
ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 * (data[i] / myTotal)), false);
ctx.lineTo(canvas.width / 2, canvas.height / 2);
ctx.fill();
lastend += Math.PI * 2 * (data[i] / myTotal);
}<canvas id="can" width="200" height="200" />У меня была такая же проблема раньше, но я смог решить эту проблему позже.
Чего мне не хватало, так это того, что я рисовал арку в контексте и пытался ее заполнить, из-за чего цвет распространялся по всему кругу, потому что теперь контекст был ограничен только между линией радиуса от центра к отправная точка арки и арка, чтобы ограничить контекст.
Но не было никакой другой границы линии от конца арки к центру, как только я рисую эту линию, используя следующее:
ctx.lineTo(center coordinates of circle);
У меня есть полная граница пирог, так что теперь, если я залью цвет в контексте, он не будет распространяться по всему кругу, но будет ограничен этим пирогом.