بطاقة مخطط الخريطة الحرارية
خريطة حرارية مصفوفية في غلاف بطاقة لوحة التحكم - يوم الأسبوع × الساعة، المنطقة × الشهر، أي شيء بمحورين. تمزج الخلايا لون التمييز في مسار المخطط حسب القيمة لتتبع التدرج السمة في كلا الوضعين؛ التمرير فوق خلية يُحيط بها إطار ويُغمق تسميات صفها وعمودها ويبدّل العنوان الرئيسي بقيمة تلك الخلية. شبكة CSS عادية، بدون مكتبة مخططات.
Active users
1,892
+5.2%التثبيت
بطاقة مخطط الخريطة الحرارية جزء من BoardUI Pro.
الوضع الداكن جاهز - هذا مكوّن يتبع رموز التصميم الدلالية لـ BoardUI تلقائياً. إعداد تبديل السمة.
هل تستخدم حزمة واجهة مستخدم مشتركة أو أسماء استيراد مختصرة مخصصة؟ تهيئة مسارات التثبيت قبل تشغيل CLI. تستخدم أمثلة النسخ واللصق الاستيرادات الافتراضية.
البيانات
rows هو { label, values[] }[] و columns يُسمّي فتحات القيم. أضف صفاً أو عموداً وتعيد الشبكة تدفقها؛ اللون يستبدل لهجة المنحدر و max يثبّت الطرف المشبع. تكون حبة الفترة قائمة منسدلة عند تمرير ranges - كل نطاق يحمل بياناته الخاصة (واختياريًا delta / headline) وتُعيد الرسم البياني تحريكه عند التحديد؛ onRangeChange يتيح لك الجلب بدلاً من ذلك. عند غياب خصائص البيانات، تُشحن البطاقة بثلاثة نطاقات تجريبية، وهو ما تستخدمه المعاينات أعلاه.
// One entry per row; values line up with `columns`.const columns = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];const rows = [ { label: "EMEA", values: [42, 48, 55, 61, 70, 74] }, { label: "AMER", values: [38, 40, 47, 52, 58, 66] }, { label: "APAC", values: [21, 25, 29, 36, 41, 49] }, { label: "LATAM", values: [12, 14, 15, 19, 24, 27] },];
<HeatmapChartCard title="Revenue by region" columns={columns} color="var(--color-chart-7)" // ramp accent; defaults to chart-6 blue max={80} // fully saturated cell; defaults to the largest value ranges={[ // period dropdown - each range overrides rows / columns / max / delta { id: "h1", label: "H1 2024", rows: h1Rows, delta: 0.118 }, { id: "h2", label: "H2 2024", rows: h2Rows, delta: 0.064 }, ]}/>
// Or a static pill: rows={rows} range="H1 2024"