บทความนี้จะแนะนำโค้ดตัวอย่างสำหรับการวาดแผนภูมิวงกลมแบบไดนามิกโดยใช้ Canvas html5 และแชร์กับทุกคน โดยมีรายละเอียดดังนี้:
มาดูการเรนเดอร์กันก่อน
สิ่งนี้ไม่ได้อ้างถึงไลบรารีของบุคคลที่สาม เช่น jquery แต่เขียนโดยใช้การดำเนินการ DOM และคุณสมบัติ Canvas
วงกลมที่วาดบนผืนผ้าใบโดยทั่วไปจะแบ่งออกเป็นวงกลมทึบและวงกลมกลวง
จากการวิเคราะห์ความต้องการ เรารู้ว่าวงกลมนั้นเป็นวงกลมทึบ
1. ขั้นแรกใช้ผ้าใบเพื่อวาดวงกลมทึบ
//Pseudocode var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(พิกัดแกน x ศูนย์กลาง, พิกัดแกน y ศูนย์กลาง, รัศมี, เริ่มต้น มุม , มุมสิ้นสุด);ctx.fillStyle = 'สีเขียว';ctx.closePath();ctx.fill();
2. วาดแผนภูมิวงกลมตามสีที่ต่างกัน
//Pseudocode var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d');ctx.beginPath();ctx.arc(พิกัดแกน x ศูนย์กลาง, พิกัดแกน y ศูนย์กลาง, รัศมี, สีเขียว มุมเริ่มต้น, มุมปลายสีเขียว);ctx.fillStyle = 'green';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(พิกัดแกน x ศูนย์กลางของวงกลม, พิกัดแกน y ศูนย์กลางวงกลม, รัศมี, มุมเริ่มต้นสีแดง, มุมสิ้นสุดสีแดง) ;ctx.fillStyle= 'red';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(พิกัดแกน x ศูนย์กลาง, พิกัดแกน y ศูนย์กลาง, รัศมี, มุมเริ่มต้นสีเหลือง, มุมสิ้นสุดสีเหลือง);ctx .fillStyle= 'yellow';ctx.closePath();ctx.fill();ctx.beginPath();ctx.arc(พิกัดแกน x ศูนย์กลางวงกลม, พิกัดแกน y ศูนย์กลางวงกลม, รัศมี, มุมเริ่มต้นสีม่วง, มุมสิ้นสุดสีม่วง) ;ctx.fillStyle = 'สีม่วง';ctx.closePath();ctx.fill();
3. วาดแผนภูมิวงกลมแบบไดนามิก
โดยทั่วไปแนะนำให้ใช้สามวิธีบนเว็บไซต์การวาดวงกลมแบบไดนามิก: requestAnimationFrame, setInterval (timing) และการคำนวณมุมแบบไดนามิก
ที่นี่ฉันใช้เมธอด requestAnimationFrame แรก
ในระหว่างขั้นตอนการเขียน ฉันค้นพบปัญหา นั่นคือ เมื่อวาดวงกลมแบบไดนามิก วงกลมนั้นไม่ได้วาดตามพิกัดของจุดศูนย์กลางของวงกลม ในการแก้ปัญหานี้ คุณต้องกำหนดพิกัดของแปรงผืนผ้าใบใหม่ให้เป็นพิกัดของจุดศูนย์กลางวงกลมเดิมทุกครั้งที่คุณวาดวงกลม
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* เส้นขอบ: 1px สีดำทึบ ความสูง: 100%; ขนาดกล่อง: border-box;*/ } </style></head><body><div id=circle style=width: 500px;float: left;></div></body></html><script type=text/javascript>(function(window,unknown){ var data = [ {ผลิตภัณฑ์: ผลิตภัณฑ์ 1, ยอดขาย: [192.44, 210.54, 220.84, 230.11,220.85,210.59,205.49,200.55,195.71 ,187.46 ,180.66 ,170.90]}, {ผลิตภัณฑ์:product2,การขาย:[122.41 ,133.16 ,145.65 ,158.00 ,164.84 ,178.62 ,185.70 ,190.13 ,195.53 ,198.88 ,204.32 ,210.91]}, {ผลิตภัณฑ์:ผลิตภัณฑ์ 3,ยอดขาย:[170.30 ,175.00 ,170.79 ,165.10 ,165.62 ,160.92 ,155.92 ,145.77 ,145.17 ,140.27 ,135.99 ,130.33]}, {ผลิตภัณฑ์:ผลิตภัณฑ์ 4,ยอดขาย:[165.64,170.15,175.10,185.32,190.90,190.01,187.05,183.74,177.24,181.90,179.54,175.98]}] var dom_circle = document.getElementById('circle'); if(dom_circle != ไม่ได้กำหนด && dom_circle != null) { var canvas = document.createElement(canvas); 2d'); var defaultStyle = function(Dom,canvas){ if(Dom.clientWidth <= 300) { canvas.width = 300; Dom.style.overflowX = auto; } อื่น ๆ { canvas.width = Dom.clientWidth; } if(Dom.clientHeight <= 300) { canvas.height = 300; Dom.style.overflowY = อัตโนมัติ; } อื่น ๆ { canvas.height = Dom.clientHeight; //พื้นที่แกนพิกัด//โปรดทราบว่าพื้นที่แผนภูมิเส้นจริงมีขนาดเล็กกว่าการส่งคืนนี้เล็กน้อย { p1:'สีเขียว', p2:'สีแดง', p3:'สีเหลือง', p4:'สีม่วง', x: 0 , / /พิกัดด้านซ้ายของแกนพิกัดบนผืนผ้าใบ y: 0, //พิกัดด้านบนของแกนพิกัดบนผืนผ้าใบ maxX: canvas.width, //พิกัดที่ถูกต้องของแกนพิกัดบนผืนผ้าใบ maxY: canvas.height , //พิกัดด้านล่างของแกนพิกัดบนผืนผ้าใบ r:(canvas.width)/2, //จุดเริ่มต้น ry:(canvas.height)/2, //จุดเริ่มต้น cr: (canvas.width)/4, / /Radius startAngle :-(1/2*Math.PI), //มุมเริ่มต้น endAngle:(-(1/2*Math.PI)+2*Math.PI), //มุมสิ้นสุด xAngle:1*(คณิตศาสตร์ .PI/ 180) //Offset}; } //วาดวงกลม var tmpAngle = -(1/2*Math.PI); var ds = null; var sum = data[0]['sales'][0]+data[0 ] ['sales'][1]+data[0]['sales'][2]+data[0]['sales'][3] var เปอร์เซ็นต์1 = data[0]['sales'][0] / ผลรวม* Math.PI * 2; var เปอร์เซ็นต์2 = ข้อมูล[0]['ยอดขาย'][1]/sum * Math.PI * 2 + เปอร์เซ็นต์1; var เปอร์เซ็นต์3 = ข้อมูล[0]['ยอดขาย'][2]/sum * Math.PI * 2 + เปอร์เซนต์2; var เปอร์เซนต์4 = data[0]['sales'][3]/sum * Math.PI * 2 + เปอร์เซ็นต์3; console.log(percent1); console.log(percent3); console.log(percent4); var tmpSum = 0; var DrawCircle = function(){ ถ้า(tmpAngle >= ds.endAngle) { กลับเท็จ; } อื่น ๆ ถ้า (tmpAngle+ ds.xAngle > ds. endAngle) { tmpAngle = ds.endAngle; } อื่น ๆ { tmpAngle += ds.xAngle; tmpSum += ds.xAngle } // console.log(ds.startAngle+'***'+tmpAngle); // console.log(tmpSum); // ctx.clearRect(ds.x,ds. y, canvas.width, canvas.height); ถ้า (tmpSum > เปอร์เซ็นต์1 && tmpSum <เปอร์เซ็นต์2) { ctx.beginPath(); ctx.moveTo(ds.r,ds.arc(ds.r,ds.ry,ds.cr,ds.startAngle+เปอร์เซ็นต์1,tmpAngle); p2; } อื่น ๆ ถ้า (tmpSum > เปอร์เซ็นต์2 && tmpSum <percent3) { ctx.beginPath(); ctx.moveTo(ds.r,ds.arc(ds.r,ds.ry,ds.cr,ds.startAngle+เปอร์เซ็นต์2,tmpAngle); p3; } อื่น ๆ ถ้า (tmpSum > เปอร์เซ็นต์3 ) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+เปอร์เซ็นต์3,tmpAngle); .beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle); } ctx.closePath(); this.toDraw = function(){ ds= defaultStyle(dom_circle,canvas); // console.log(tmpAngle); // console.log(ds.xAngle) ctx.clearRect(ds.x,ds.y,canvas.width,canvas.height(); } this.toDraw(); self = this; window.onresize = function(){ self.toDraw() } })(หน้าต่าง);
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network