لقد كنت أستخدم الرسوم البيانية لفترة طويلة. إذا ظهر مخطط دائري بالنمط الموضح أعلاه، فمن الصعب بالنسبة لي استخدام الرسوم البيانية في هذا الوضع. لقد حاولت استخدام d3 و Canvas لرسم المخططات الدائرية على التوالي لأنني على دراية بالقماش ويحتاج d3 أيضًا إلى تقديم المكونات الإضافية، بناءً على مبدأ الوزن الخفيف، استخدمت تغليف القماش.
هناك وضعان رسميان للمخطط الدائري: (1) وضع نصف القطر (2) وضع المنطقة
عملية التنفيذ(1) الوظائف المغلفة هي كما يلي:
function drawCircle(canvasId, option) { const color_arr = option.color Let data_arr = option.data const pi2 = Math.PI * 2; Let Canvas = document.getElementById(canvasId); startAgl = 0; Let const cH = 0; Canvas.height; for (let item of data_arr) { sum += item.value * 1.0 } data_arr = data_arr.map((v, i) => { return { name: v.name, value: (v.value) * 1.0 / sum } }) for (let i = 0; i < data_arr.length; i++) { // ارسم مخططًا دائريًا Let min = (cW > cH ? cH : cW); // احصل على الحد الأدنى لقيمة عرض اللوحة القماشية وارتفاعها agl = data_arr[i].value * pi2 + startAgl; // نقطة النهاية c.strokeStyle = color_arr[i]; * دقيقة * 0.3؛ // سمك الخط c.beginPath(); c.arc(cW / 2, cH / 2, min * 0.3, startAgl, agl, false); // ارسم دائرة c.rosePath(); startAgl = agl; // ارسم وسيلة إيضاح = color_arr[i]; 50 + 18 * i, 16, 16); c.fillText(data_arr[i].name, cW * 0.8 + 20, 62 + 18 * ط)؛ } }(2) طريقة الاتصال:
دع اللون = ['#0580F2'، '#FAA732'، '#E1575D'، '#8B73CC'، '#8CD123'، '#4B53BA'، '#429588']؛ [ { الاسم: '20'، القيمة: '20' }، { الاسم: '30'، القيمة: '30' }، { الاسم: '40'، القيمة: '40' }، { الاسم: '50'، القيمة: '50' }، { الاسم: '60'، القيمة: '60' }، ] } drawCircle('myCanvas'، خيار )ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.