HTML 5 Canvas – круговая диаграмма

12/17/2011, автор admin, категории Web-разработка


Думаю мало кому нравиться искать, скачивать тяжелые готовые js библиотеки для того чтобы нарисовать небольшую диаграмму… Вот и мне этот вариант не особо понравился. Так и родилась тема этого поста.

Итак чтоб нарисовать вот такую диаграмму нам потребуется совсем немного знаний и пол часа свободного времени. Использовать будем элемент html 5 canvas и библиотеку которая поможет нашему скрипту работать в недобраузерах IE – http://explorercanvas.googlecode.com/svn/trunk/excanvas.js

Разместим на странице элемент canvas.

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

Cкрипт который нарисует в данном элементе диаграмму тоже очень простой

var drawingCanvas = document.getElementById('chart');
if(drawingCanvas && drawingCanvas.getContext) {
	var context = drawingCanvas.getContext('2d');
	// рисуем окружность
	context.fillStyle = "#ddd";
	context.strokeStyle = "#ddd";
	context.beginPath();
	context.arc(100,100,86,0,Math.PI*2,true);
	context.closePath();
	context.fill();

	// рисуем сектор окружности num%
	context.fillStyle = "#ffb549";
	context.beginPath();
	context.moveTo(100, 100);
	//координаты старта определяем так чтоб закрашенная область всегда была снизу
	var start=(Math.PI/180)*90-((Math.PI/180)*num*360/100)/2
	context.arc(100,100,86,start,start+(Math.PI/180)*num*360/100,false);
	context.closePath();
	context.fill();

	// закрашиваем внутреннюю окружность меньшего радиуса
	context.fillStyle = "#F8F8F8";
	context.beginPath();
	context.arc(100,100,54,0,Math.PI*2,true);
	context.closePath();
	context.fill();

	// пишем текст
	context.fillStyle = "#000000";
	context.font = "20pt Tahoma";
	context.textAlign = "center";
	context.textBaseline = 'middle';
	var x=drawingCanvas.width/2;
	var y=drawingCanvas.height/2;
	context.fillText(num+"%", x,y);
}

Посмотреть рабочий пример можно тут.

Узнать больше о работе с HTML 5 canvas можно узнать нажав на ссылку http://www.html5canvastutorials.com/

Можно прочесть также:

5 комментариев “HTML 5 Canvas – круговая диаграмма”

  1. gJamDev:

    Привет, очень интересная статья, но мог бы ты помочь модернизировать код под несколько значений, полученных из массива

  2. Искал решение аналогичной задачи. По-моему, гораздо лучше использовать не fill(), а stroke(), просто устанавливая необходимую ширину линии вместо последующего наложения круга, что увеличивает гибкость, так как в последствии может понадобится, как в моём случае, бросить тень от кольца.

  3. Apelsinka:

    Спасибо за примерчик, нужна была диаграмма, по вашему шаблону сделала свою с несколькими значениями!

  4. Alex:

    Приве! Спасибо огромное! Очень помог. Действительно – потратил уйму времени в поисках решения аналогичной задачи!

  5. Max:

    зачем так сложно?

    canvas = document.getElementById(‘canvas’);
    ctx = canvas.getContext(«2d»);

    var num1 = 40;
    var cx = 200;
    var cy = 200;
    var radius = 100;
    var startangle = 0;
    var endangle = startangle+(Math.PI*2*num1)/100;

    ctx.beginPath();
    ctx.strokeStyle = «red»;
    ctx.lineWidth = 30;
    ctx.arc(cx,cy,radius,startangle,endangle);
    ctx.stroke();

    var num2 = 100-num1;
    startangle = endangle;
    endangle = startangle+(Math.PI*2*num2)/100;

    ctx.beginPath();
    ctx.strokeStyle = «green»;
    ctx.lineWidth = 30;
    ctx.arc(cx,cy,radius,startangle,endangle);
    ctx.stroke();