ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ЯНВАРЬ >>>

HTML ↴

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>График в виде круговой диаграммы (HTML 5 canvas)</title>
<meta name="“robots”" content="“noindex,nofollow”">
<title>Example - canvas diagramm</title>

<script>
function add_chart(num) {
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 = "#078C2A";
 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);
}}
</script>
<script>
function add_chart2(num) {
var drawingCanvas = document.getElementById('chart2');
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 = "#078C2A";
 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 = "#FF0000";
 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);
}}
</script>
<style>
	#chart {
	position: absolute;
	}
#chart2 {
	position: absolute;
left:200px
	}
</style>
	</head>
	<body onload="add_chart(40); add_chart2(80)">
<canvas id="chart" width="200" height="200">
	<p>Ваш браузер не поддерживает рисование</p>
</canvas>
<canvas id="chart2" width="200" height="200">
	<p>Ваш браузер не поддерживает рисование</p>
</canvas>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

размер Kb

ПРИМЕР ↴

✔ пример в полном окне

на главную страницу раздела - клавиша ESC