بطاقة المخطط الشعاعي
أشرطة شعاعية في غلاف بطاقة لوحة التحكم - أقواس مستديرة فوق مسار المخطط، مع تعتيم عند التمرير بدرجة واحدة كسائر مخططات BoardUI، وعنوان عداد تصاعدي يتبع الحلقة المحددة. ستة مظاهر من خاصية واحدة: حلقات عادية أو مُعنوَنة أو بشبكة، ومقاييس أحادية القيمة رفيعة وصلبة، ومقياس نصف دائرة مكدّس.
الزوار
925
+5.2%التثبيت
بطاقة المخطط الشعاعي جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
المتغيرات
rings (الافتراضي)، تسميات، و شبكة ارسم حلقة واحدة لكل عنصر. gauge و صلب عرض قيمة واحدة مقابل max مع النسبة المئوية في المنتصف؛ مكدّس يطوي العناصر في نصف مقياس يعرض حصة الشريحة الأساسية في المركز ويتابع الشريحة التي يمرر عليها المؤشر.
{/* Ring names set along each arc */}<RadialChartCard variant="labels" />
{/* No tracks - rings over a circular grid */}<RadialChartCard variant="grid" />
{/* Single value against a goal, percent in the centre */}<RadialChartCard variant="gauge" data={[{ label: "Visitors", value: 1260 }]} max={2000} delta={0.052} range="Last 7 days" />
{/* Thicker ring on a raised disc */}<RadialChartCard variant="solid" data={[{ label: "Visitors", value: 1260 }]} max={2000} delta={0.052} range="Last 7 days" />
{/* Half gauge of stacked segments with a legend */}<RadialChartCard variant="stacked" data={[ { label: "Desktop", value: 1260 }, { label: "Mobile", value: 570 }, ]} delta={0.052} range="Last 7 days"/>مع البلاطات
tiles يضيف بلاطة إحصاء لكل عنصر أسفل المخطط - لون ونص فوق القيمة، ثلاثة في كل صف مع تمديد الصف الأخير إلى العرض الكامل - ويتيح للبطاقة النمو لتناسبها. يؤدي تحريك المؤشر فوق بلاطة إلى تركيز حلقتها والعكس صحيح.
{/* Stat tiles under the rings: three per row, the last row full width (5 → 3 + 2) */}<RadialChartCard tiles />البيانات
data هي قائمة مسطّحة { label, value, color? } قائمة. أضف عنصراً وسيصبح حلقة أو شريحة، وتتناوب الألوان على لوحة الرسم البياني ما لم تحدد لوناً، و max يضبط قيمة الدائرة الكاملة. تكون حبة الفترة قائمة منسدلة عند تمرير ranges - كل نطاق يحمل بياناته الخاصة (واختياريًا delta / headline) وتُعيد الرسم البياني تحريكه عند التحديد؛ onRangeChange يتيح لك الجلب بدلاً من ذلك. عند غياب خصائص البيانات، تُشحن البطاقة بثلاثة نطاقات تجريبية، وهو ما تستخدمه المعاينات أعلاه.
// One item per ring / segment. First item = innermost ring.const data = [ { label: "Other", value: 90 }, { label: "Edge", value: 173 }, { label: "Firefox", value: 187 }, { label: "Safari", value: 200 }, { label: "Chrome", value: 275, color: "var(--color-chart-6)" }, // override any colour];
<RadialChartCard title="Visitors" data={data} max={300} // full-circle value; defaults to 110% of the largest ring headline={925} // optional resting headline (defaults to the total) delta={0.052} range="Jan – Jun 2024" // static pill…/>
// …or a working period dropdown: each range overrides data / max / delta / headline.<RadialChartCard variant="gauge" ranges={[ { id: "7d", label: "Last 7 days", data: [{ label: "Visitors", value: 1260 }], max: 2000, delta: 0.052 }, { id: "30d", label: "Last 30 days", data: [{ label: "Visitors", value: 4820 }], max: 6000, delta: 0.081 }, { id: "90d", label: "Last 90 days", data: [{ label: "Visitors", value: 12400 }], max: 15000, delta: -0.024 }, ]}/>