HTML5, CSS, JavaScript Ile Yapılmış PASTA Grafikler

Có thể bạn quan tâm

HTML5, CSS, JavaScript ile yapılmış PASTA grafikler Uzun zamandır bu işi nasıl yapacağımı düşündüm ve güzel bir kütüphane arayışı içindeydim. Farklı bir konuda tarama yaparken bu güzel grafiklere rastladım. Özellikle CSS tabanlı olması çok ilgimi çekti, size de yararlı olacağına eminim.

HTML ve JavaScript Kodları <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 Pasta Grafik</title> </head> <body> <section> <div> <canvas id="canvas" width="400" height="300"> Eğer tarayıcınızı HTML5'i desteklemiyorsa bu kısım görünecek. </canvas> </div> <script type="text/javascript"> //renkler, grafiğimiz 5 parçadan oluşacakı için 5 rengi myColor dizisinde saklıyoruz. var myColor = ["#ECD078","#D95B43","#C02942","#542437","#53777A"]; //pasta grafiği oluşturacak veri dizisi var myData = [10,30,20,60,40]; function getTotal(){ var myTotal = 0; for (var j = 0; j < myData.length; j++) { myTotal += (typeof myData[j] == 'number') ? myData[j] : 0; } return myTotal; } //ÇİZME FONKSİYONU function plotData() { var canvas; //tuval nesnesi tanımlanıyor var ctx; var lastend = 0; var myTotal = getTotal(); canvas = document.getElementById("canvas"); //2 boyutlu grafik ctx = canvas.getContext("2d"); //çizim bölgesi temizleniyor. ctx.clearRect(0, 0, canvas.width, canvas.height); //Döngü ile grafik verilerinin olduğu myData dizisi elemanlarına teker teker ulaşılıyor. for (var i = 0; i < myData.length; i++) { //myColor dizisinden her veri elemanına karşı gelen renk seçiliyor. ctx.fillStyle = myColor[i]; ctx.beginPath(); //moveTo ile istenilen konuma odaklanılıyor. ctx.moveTo(200,150); //Matematikteki PI sayısı kullanılarak açılar çiziliyor. //arc fonksiyonu açı, line ise çizgi çizmek için kullanılıyor. ctx.arc(200,150,150,lastend,lastend+ (Math.PI*2*(myData[i]/myTotal)),false); ctx.lineTo(200,150); ctx.fill(); lastend += Math.PI*2*(myData[i]/myTotal); //her bir açının çiziminden sonra son kalınan nokta lastend oluyor //döngünün sonraki çevriminde kalınan yerden devam ediliyor. } } plotData(); </script> </section> </body> </html> DEMO

HTML, CSS, JAVASCRIPT Kodları <!doctype html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 Pasta Grafik2</title> </head> <body> <section> <div> <canvas id="canvas" width="600" height="500"> Eğer tarayıcınızı HTML5'i desteklemiyorsa bu kısım görünecek. </canvas> </div> <script type="text/javascript"> var myColor = ["#39ca74","#e54d42","#f0c330","#3999d8","#35485d"]; var myData = [80,23,15,7,1]; var myLabel = ["A Partisi","B Partisi","C Partisi","D Partisi","E Partisi"]; function getTotal(){ var myTotal = 0; for (var j = 0; j < myData.length; j++) { myTotal += (typeof myData[j] == 'number') ? myData[j] : 0; } return myTotal; } function plotData() { var canvas; var ctx; var lastend = 0; var myTotal = getTotal(); var doc; canvas = document.getElementById("canvas"); var x = (canvas.width)/2; var y = (canvas.height)/2; var r = 150; ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < myData.length; i++) { ctx.fillStyle = myColor[i]; ctx.beginPath(); ctx.moveTo(x,y); ctx.arc(x,y,r,lastend,lastend+(Math.PI*2*(myData[i]/myTotal)),false); ctx.lineTo(x,y); ctx.fill(); // Grafik üzerindeki ifadeler bu kısımdan sonra yaptırılacak. ctx.beginPath(); var start = []; var end = []; var last = 0; var flip = 0; var textOffset = 0; var precentage = (myData[i]/myTotal)*100; start = getPoint(x,y,r-20,(lastend+(Math.PI*2*(myData[i]/myTotal))/2)); end = getPoint(x,y,r+20,(lastend+(Math.PI*2*(myData[i]/myTotal))/2)); if(start[0] <= x) { flip = -1; textOffset = -110; } else { flip = 1; textOffset = 10; } ctx.moveTo(start[0],start[1]); ctx.lineTo(end[0],end[1]); ctx.lineTo(end[0]+120*flip,end[1]); ctx.strokeStyle = "#bdc3c7"; ctx.lineWidth = 2; ctx.stroke(); // Etiketler ayarlanıyor ctx.font="17px Arial"; ctx.fillText(myLabel[i]+" "+precentage.toFixed(2)+"%",end[0]+textOffset,end[1]-4); // Döngü artırılıyor lastend += Math.PI*2*(myData[i]/myTotal); } } // Sihirli nokta bulunuyor. function getPoint(c1,c2,radius,angle) { return [c1+Math.cos(angle)*radius,c2+Math.sin(angle)*radius]; } // Çizim fonksiyonu çalıştırılıyor. plotData(); </script> </section> </body> </html> DEMO Linkler: http://codepen.io/miyavibest/pen/wdtaC/ http://www.freshdesignweb.com/css-jquery-graph-bar-pie-chart.html