بطاقة مخطط الرادار
مخطط رادار في غلاف بطاقة لوحة التحكم - شبكة مضلعة في رموز التصميم للمخطط، عنوان رئيسي بعدّ تصاعدي يتبع المحور المحوَّم عليه، رقاقة دلتا وحبة فترة، ونقطة نشطة نابضة على كل سلسلة. خاصية واحدة تبدّل بين المملوء والمنقط والخطوط فقط وتخطيط النتيجة المركزية.
الزوار
1,424
+5.2%التثبيت
بطاقة مخطط الرادار جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
المتغيرات
variant يختار المظهر: filled (الافتراضي)، dots, lines لمقارنة السلاسل، و score، يطبع قيمة كل محور بجانب تسميته ويحسب متوسطها في قرص مركزي مرفوع. tiles (كما في المعاينة أعلاه) يضيف لوحة إحصائية لكل محور تحت أي منها ويتيح للبطاقة النمو.
{/* Dots on every vertex */}<RadarChartCard variant="dots" />
{/* Outline only - two series and a legend */}<RadarChartCard variant="lines" series={[ { key: "desktop", label: "Desktop" }, { key: "mobile", label: "Mobile" }, ]}/>
{/* Centre score: each axis label carries its value, low ones turn rose */}<RadarChartCard variant="score" alertBelow={30} />البيانات
data هي قائمة مسطّحة من الصفوف - واحد لكل محور - مفهرسة بـ label، مع حقل رقمي لكل سلسلة. series يُسمّي تلك الحقول واختيارياً ألوانها؛ كل شيء آخر (سقف نصف القطر، الإجماليات، قيم التسمية التوضيحية، حالات التمرير) مشتق. حبة الفترة هي قائمة منسدلة عند تمرير ranges - كل نطاق يحمل بياناته الخاصة (واختياريًا delta / headline) وتُعيد الرسم البياني تحريكه عند التحديد؛ onRangeChange يتيح لك الجلب بدلاً من ذلك. عند غياب خصائص البيانات، تُشحن البطاقة بثلاثة نطاقات تجريبية، وهو ما تستخدمه المعاينات أعلاه.
const data = [ { label: "January", desktop: 186, mobile: 80 }, { label: "February", desktop: 305, mobile: 200 }, { label: "March", desktop: 237, mobile: 120 }, { label: "April", desktop: 273, mobile: 190 }, { label: "May", desktop: 209, mobile: 130 }, { label: "June", desktop: 214, mobile: 140 },];
<RadarChartCard title="Visitors" data={data} series={[ { key: "desktop", label: "Desktop" }, // palette colour { key: "mobile", label: "Mobile", color: "var(--color-chart-6)" }, // or your own ]} max={320} // optional radius ceiling (defaults to the largest value) headline={1424} // optional resting headline (defaults to the primary total) delta={0.052} // "+5.2%" chip range="Jan – Jun 2024" // static pill…/>
// …or a working period dropdown: each range overrides data / delta / headline.<RadarChartCard title="Visitors" series={[{ key: "desktop", label: "Desktop" }]} ranges={[ { id: "h1", label: "H1 2024", data: h1Data, delta: 0.052 }, { id: "h2", label: "H2 2024", data: h2Data, delta: 0.081 }, { id: "year", label: "2024", data: yearData, delta: 0.067 }, ]} defaultRange="h1" onRangeChange={(id) => track("radar_range", { id })}/>