تقدم هذه المقالة نموذج التعليمات البرمجية لرسم مخطط دائري ديناميكيًا باستخدام قماش html5 ومشاركته مع الجميع، والتفاصيل هي كما يلي:
دعونا نلقي نظرة على الاداءات أولا
لا يشير هذا إلى مكتبات الطرف الثالث مثل jquery، ولكنه مكتوب باستخدام عمليات DOM وميزات اللوحة.
تنقسم دوائر رسم القماش عمومًا إلى دوائر صلبة ودوائر مجوفة.
ومن خلال تحليل الطلب نعلم أن الدائرة دائرة مصمتة.
1. استخدم القماش أولًا لرسم دائرة صلبة
// الكود الكاذب var Canvas = document.createElement(canvas);var ctx = Canvas.getContext('2d');ctx.beginPath();ctx.arc(إحداثيات مركز الدائرة للمحور السيني، إحداثيات المحور الصادي لمركز الدائرة، نصف القطر ، زاوية البداية، زاوية النهاية)؛ctx.fillStyle = 'green';ctx. ClosePath();ctx.fill();2. ارسم مخططًا دائريًا بناءً على ألوان مختلفة
// الكود الكاذب var Canvas = document.createElement(canvas);var ctx = Canvas.getContext('2d');ctx.beginPath();ctx.arc(إحداثي المحور السيني المركزي، إحداثي المحور الصادي المركزي، نصف القطر، أخضر زاوية البداية، زاوية النهاية الخضراء)؛ctx.fillStyle = 'green';ctx. ClosePath();ctx.fill();ctx.beginPath();ctx.arc(إحداثي المحور السيني المركزي، إحداثي المحور الصادي المركزي، نصف القطر، زاوية البداية الحمراء، زاوية النهاية الحمراء)؛ctx .fillStyle = 'red';ctx. ClosePath();ctx.fill();ctx.beginPath();ctx.arc(إحداثيات مركز الدائرة X، إحداثيات مركز الدائرة Y المحور، نصف القطر، زاوية البداية الصفراء، زاوية النهاية الصفراء) ;ctx.fillStyle = 'yellow';ctx. ClosePath();ctx.fill();ctx.beginPath();ctx.arc(إحداثيات المحور السيني لمركز الدائرة، وإحداثيات المحور ص لمركز الدائرة، ونصف القطر، وزاوية البداية الأرجوانية، وزاوية النهاية الأرجوانية) ;ctx.fillStyle = 'purple';ctx. ClosePath();ctx.fill();3. رسم المخططات الدائرية بشكل ديناميكي
يوصى عمومًا بثلاث طرق على موقع رسم الدوائر الديناميكية: requestAnimationFrame، وsetInterval (التوقيت)، وحساب الزاوية الديناميكية.
هنا أستخدم طريقة requestAnimationFrame الأولى.
أثناء عملية الكتابة، اكتشفت مشكلة، وهي أنه عند رسم دائرة ديناميكيًا، لا يتم رسمها بناءً على إحداثيات مركز الدائرة. لحل هذه المشكلة، تحتاج إلى إعادة تعريف إحداثيات فرشاة القماش كإحداثيات مركز الدائرة الأصلي في كل مرة ترسم فيها دائرة.
<!DOCTYPE html><html><head> <meta charset=utf-8> <title></title> <style> #graph {/* الحدود: 1 بكسل أسود خالص؛ الارتفاع: 100%؛ العرض: 100%؛ حجم الصندوق: border-box;*/ } </style></head><body><div id=circle style=width: 500px;float: left;></div></body></html><script type=text/javascript>(function(window,undef){ var data = [ {product: Product 1, sales: [192.44, 210.54, 220.84, 230.11,220.85,210.59,205.49,200.55,195.71 ,187.46 ,180.66 ,170.90]}, {product:product2,sales:[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'); 2d'); var defaultStyle = function(Dom,canvas){ if(Dom.clientWidth <= 300) { Canvas.width = 300; Dom.style.overflowX = auto; } else{ Canvas.width = Dom.clientWidth } if(Dom.clientHeight <= 300) { Canvas.height = 300; Dom.style.overflowY = auto } else { Canvas.height = Dom.clientHeight } // تنسيق منطقة المحور // لاحظ أن منطقة المخطط الخطي الفعلية أصغر قليلاً من هذه return { p1:'green', p2:'red', p3:'yellow', p4:'purple', x: 0 , / / الإحداثي الأيسر لمحور الإحداثيات على اللوحة القماشية y: 0, // الإحداثي العلوي لمحور الإحداثيات على اللوحة القماشية maxX: Canvas.width, // الإحداثي الأيمن لمحور الإحداثيات على اللوحة القماشية maxY: Canvas.height , // الإحداثي السفلي لمحور الإحداثيات على اللوحة القماشية r:(canvas.width)/2, //نقطة البداية ry:(canvas.height)/2, //نقطة البداية cr: (canvas.width)/4, //نصف القطر startAngle :-(1/2*Math.PI), //زاوية البداية endAngle:(-(1/2*Math.PI)+2*Math.PI), //زاوية النهاية xAngle:1*( الرياضيات.PI/ 180) // إزاحة } // ارسم دائرة var tmpAngle = -(1/2*Math.PI); var ds = null var sum = data[0]['sales'][0]+data[0 ]; ['مبيعات'][1]+data[0]['مبيعات'][2]+data[0]['مبيعات'][3] var بالمائة1 = data[0]['مبيعات'][0] / مجموع* Math.PI * 2; var المئة 2 = البيانات[0] ['المبيعات'] [1]/sum * Math.PI * 2 + النسبة المئوية 1; 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(){ if(tmpAngle >= ds.endAngle) { return false } else if(tmpAngle+ ds.xAngle > ds. endAngle) { tmpAngle = ds.endAngle } else{ tmpAngle += ds.xAngle; tmpSum += ds.xAngle } // console.log(ds.startAngle+'***'+tmpAngle); // console.log(tmpSum); y,canvas.width,canvas.height); ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent1,tmpAngle); p2 } else if(tmpSum > بالمائة2 && tmpSum <percent3) { ctx.beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent2,tmpAngle); p3 } else if(tmpSum > بالمائة3 ) { ctx.beginPath(); ctx.moveTo(ds.r,ds.arc(ds.r,ds.ry,ds.cr,ds.startAngle+percent3,tmpAngle); .beginPath(); ctx.moveTo(ds.r,ds.ry); ctx.arc(ds.r,ds.ry,ds.cr,ds.startAngle,tmpAngle); ctx.fillStyle = ds.p1; } ctx. ClosePath(); requestAnimationFrame(drawCircle); 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); drawCircle(); self = this; window.onresize = function(){ self.toDraw() } }})(window);ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.