بطاقة المخطط المركّب
الحجم والمعدل على لوحة واحدة - أشرطة مستديرة على المحور الأيسر، وخط على محوره الأيمن الخاص، لكل منهما تنسيقه الخاص. يؤدي التمرير فوق فئة إلى تغميق شريطها وتخفيت البقية، وظهور نقطة نابضة على الخط وتبديل العنوان الرئيسي؛ تحتوي البلاطات أدناه على إجمالي الشريط ومتوسط الخط.
Sessions · Conversion 3.7%
83,200
+9.4%التثبيت
بطاقة المخطط المركّب جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
البيانات
تقرأ كلتا السلسلتين من الصفوف نفسها: شريط و line كل اسم حقل وتسمية ولون اختياري و format - المحاور مستقلة، لذا يمكن وضع عدد ونسبة مئوية معًا دون أن يُسطّح أحدهما الآخر. تصبح حبة الفترة الزمنية قائمة منسدلة عند تمرير ranges؛ عند غياب خصائص البيانات، تشحن البطاقة بثلاث فترات تجريبية.
// One row per category, carrying both series' fields.const data = [ { label: "Jan", sessions: 4200, rate: 2.4 }, { label: "Feb", sessions: 4800, rate: 2.6 }, // …];
<ComboChartCard title="Sessions" data={data} bar={{ key: "sessions", label: "Sessions", format: (n) => n.toLocaleString() }} line={{ key: "rate", label: "Conversion", color: "var(--color-chart-6)", format: (n) => `${n}%`, // the right axis keeps its own formatting }} delta={0.094} ranges={[ // period dropdown { id: "year", label: "This year", data: thisYear, delta: 0.094 }, { id: "prev", label: "Last year", data: lastYear, delta: -0.028 }, ]} tiles // bar total + line average below the chart/>