Думаю мало кому нравиться искать, скачивать тяжелые готовые 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/
Привет, очень интересная статья, но мог бы ты помочь модернизировать код под несколько значений, полученных из массива
Искал решение аналогичной задачи. По-моему, гораздо лучше использовать не fill(), а stroke(), просто устанавливая необходимую ширину линии вместо последующего наложения круга, что увеличивает гибкость, так как в последствии может понадобится, как в моём случае, бросить тень от кольца.
Спасибо за примерчик, нужна была диаграмма, по вашему шаблону сделала свою с несколькими значениями!
Приве! Спасибо огромное! Очень помог. Действительно – потратил уйму времени в поисках решения аналогичной задачи!
зачем так сложно?
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();