CapDrive
دليل الاستخدام

BarChart

ارسم كل عنصر بيانات كشريط، مناسب لمقارنة القيم الفئوية. يمكن ترتيبه أفقيًا أو رأسيًا، وتعيين النطاقات الرقمية، وتسميات الفئات، والتسميات الرقمية، ويدعم القيم الإيجابية والسلبية.

مثال

function main() {
  return (
    <BarChart
      data={[
        { value: 30, label: 'A' },
        { value: 70, label: 'B' },
      ]}
      axis="vertical"
      rangeY={[0, 100]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={6}
      yAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

الاستخدام

  • كل data عمود حسب ترتيب المصفوفة دون x. horizontal يبقي اسم نطاق القيم rangeY. النطاق التلقائي يشمل صفرًا، والسالب يمتد عبر الأساس؛ background يملأ الأعمدة.
  • rangeX/rangeY حدود أرقام لا تسميات. إخفاء التسميات لا يخفي المحاور؛ استخدم stroke="clear". ينتقي العرض تسميات غير متداخلة فلا يضمن ظهورها كلها.
  • contentAnimation للنص والصورة والبيانات المركبة. interpolate يحتاج توافق عدد نقاط Polyline وclosed أو أوامر Path أو عينات المخطط. تغيّر البنية يحدث فورًا.

الخصائص

dataReadonlyArray<BarChartDataPoint>

فئات بترتيب المصفوفة. لكل عنصر قيمة رقمية وتسمية اختيارية.

مثال[{value: 10, label: "A"}, {value: 20, label: "B"}, {value: 30, label: "C"}]
axis?"horizontal" | "vertical"

اتجاه الأعمدة: vertical من اليسار إلى اليمين؛ horizontal من الأعلى إلى الأسفل.

مثال"vertical"
rangeY?ChartRange

نطاق القيم المرئي [min, max]. عند حذفه يُضبط حسب البيانات ويشمل الصفر.

مثال[0, 100]
showLabels?boolean

إظهار تسميات الفئات. تبقى المفقودة فارغة ويمنع التخطيط الأصلي التداخل.

مثالtrue
showValueLabels?boolean

إظهار تسميات رقمية للمحور يتم إنشاؤها تلقائيًا.

مثالtrue
barThickness?number | "auto"

سماكة العمود بالنقاط، أو auto لتناسب تباعد الفئات.

مثال"auto"
xAxis?ChartAxisStyle

خط المحور الأفقي أسفل الرسم. الافتراضي لون المقدمة بعرض 1pt؛ استخدم stroke بقيمة clear لإخفائه.

مثال{stroke: HDR($env.foreground), lineWidth: 1}
yAxis?ChartAxisStyle

خط المحور الرأسي يسار الرسم. الافتراضي لون المقدمة بعرض 1pt؛ استخدم stroke بقيمة clear لإخفائه.

مثال{stroke: HDR($env.foreground), lineWidth: 1}
background?Paint

تعبئة كل عمود. الافتراضي لون مقدمة السمة.

مثالHDR($env.dark ? "white" : "black")
cornerRadius?number

نصف قطر زوايا كل عمود، مقيد بحجمه.

مثال0
stroke?Paint

لون أو تدرج للخط؛ clear يخفيه.

مثال"clear"
lineWidth?number

سماكة الخط بالنقاط؛ 0 لا يرسم خطاً.

مثال2
strokePosition?"inside" | "center" | "outside"

موضع الحد بالنسبة لكل عمود. الافتراضي inside.

مثال"inside"
dash?number[]

أطوال متناوبة للرسم والفراغ بالنقاط؛ المصفوفة الفارغة خط متصل.

مثال[]
dashPhase?number

إزاحة نمط الشرطات بالنقاط.

مثال0
contentAnimation?ContentAnimation

انتقال محتوى اختياري. يتطلب interpolate نفس عدد الفئات والاتجاه؛ وإلا يُحدّث فورًا.

مثال{type: "interpolate", duration: 0.25}
الخصائص المشتركة
width?number | "auto" | "fill"

العرض بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال"fill"
height?number | "auto" | "fill"

الارتفاع بالنقاط أو الحجم التلقائي أو ملء العنصر الأب.

مثال"fill"
x?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0
y?number

إزاحة بصرية بالنقاط: x يميناً وy لأسفل، دون تغيير المساحة في التخطيط.

مثال0
transform?ViewTransform

تحويل View كله دون تغيير التخطيط. الإزاحة بالنقاط، الدوران والميل بالدرجات، المقياس 1 بلا تغيير، والمرساة 0–1.

مثال{rotation: 0}
opacity?number

عتامة View بالكامل: 0 شفاف و1 معتم.

مثال1
clipped?boolean

قص الرسم الذي يتجاوز حدود View.

مثالfalse
clip?"rectangle" | "ellipse"

شكل القص rectangle أو ellipse؛ يقبل Material أيضاً false لتعطيله.

مثال"rectangle"
mask?View | null

عرض قناع ألفا. يتم توسيطه دون التأثير على التخطيط؛ تعطل null القناع.

مثال<Circle width="fill" height="fill" background="white"/>
zIndex?number

ترتيب الرسم بين العناصر الشقيقة؛ القيم الأكبر في الأمام.

مثال0
blur?number

نصف قطر التمويه بالنقاط؛ 0 يعطّله.

مثال4
innerShadow?DrawingEffect

لون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.

مثال{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

لون التأثير وعتامته ونصف قطر تمويهه وإزاحة x/y؛ المسافات بالنقاط.

مثال{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

لون الظل الخارجي.

مثالHDR("black")
shadowOpacity?number

عتامة الظل من 0 إلى 1؛ 0 يخفيه.

مثال0
shadowRadius?number

نصف قطر تمويه الظل الخارجي بالنقاط.

مثال4
shadowX?number

إزاحة الظل بالنقاط: x يميناً وy لأسفل.

مثال0
shadowY?number

إزاحة الظل بالنقاط: x يميناً وy لأسفل.

مثال2
animations?BarChartAnimation[]

تحريك تغير الخاصية. duration/delay بالثواني، from/to للنهايات، repeat/autoreverse للتكرار وwrap للدورة.

مثال[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

معرّف ثابت بين العناصر الشقيقة.

مثال عملي

function main() {
  return (
    <BarChart
      width={260}
      height={160}
      axis="horizontal"
      rangeY={[-50, 100]}
      data={[
        { value: 80, label: 'A' },
        { value: -25, label: 'B' },
        { value: 45, label: 'C' },
      ]}
      showLabels={true}
      showValueLabels={true}
      background={$env.accent}
      cornerRadius={4}
      xAxis={{ stroke: $env.foreground, dash: [4, 3] }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

الحركة

الحركة

widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYbarThicknessstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

عند الإغفال

الجدول يوضح سلوك الإغفال المتحقق من التنفيذ؛ الأمثلة ليست افتراضيات. لنتيجة ثابتة مرر قيمة صريحة؛ الأبعاد وألوان الثيم متغيرة بحسب السياق.

الخصائصعند الإغفال
data[]
axis"vertical"
showLabelstrue
showValueLabelstrue
cornerRadius0
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

LineChart

Color / Gradient

Path

السابق

LineChart

الخطوة التالية

في هذه الصفحة

مثالالاستخدامالخصائصمثال عمليالحركةعند الإغفالواجهات مرتبطة