LineChart

قم برسم سلسلة البيانات بقيم x/y الفعلية كمنحنى. مناسبة لاتجاهات مثل السرعة والوقت، وتدعم نطاقات الإحداثيات والمحاور والتسميات؛ سيؤدي فقدان قيم y إلى كسر أجزاء الخط.

مثال

function main() {
  return (
    <LineChart
      data={[
        { value: { x: 0, y: 20 }, label: { x: '0s', y: '20' } },
        { value: { x: 10, y: 60 }, label: { x: '10s', y: '60' } },
      ]}
      rangeX={[0, 10]}
      rangeY={[0, 100]}
      showXLabels={true}
      showYLabels={true}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
    />
  );
}

الاستخدام

value.x/y للموقع وlabel.x/y للنص فقط. لا فرز تلقائي، وy=null يقطع الخط. النافذة الزمنية تحدث data وrangeX معًا، مثل [الثوانيالحالية−30,الثوانيالحالية].
$data.history آخر 30 ثانية من الأقدم، وقد يكون فارغًا أو ناقصًا. timestamp بالمللي ثانية وelapsed بالثواني. أبقِ انقطاعات null واستخدم elapsed.value لا الفهرس للزمن.
rangeX/rangeY حدود أرقام لا تسميات. إخفاء التسميات لا يخفي المحاور؛ استخدم stroke="clear". ينتقي العرض تسميات غير متداخلة فلا يضمن ظهورها كلها.
contentAnimation للنص والصورة والبيانات المركبة. interpolate يحتاج توافق عدد نقاط Polyline وclosed أو أوامر Path أو عينات المخطط. تغيّر البنية يحدث فورًا.

الخصائص

dataReadonlyArray<ChartDataPoint>

بيانات المخطط. تحدد value.x/y الإحداثيات وlabel.x/y النص؛ تقطع y بقيمة null الخط.

مثال[{value: {x: 0, y: 12}, label: {x: "0s", y: "12"}}, {value: {x: 10, y: 24}, label: {x: "10s", y: "24"}}]

rangeX?ChartRange

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

مثال[0, 30]

rangeY?ChartRange

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

مثال[0, 100]

showXLabels?boolean

إظهار تسميات المحور. يختار التخطيط الأصلي مجموعة فرعية غير متداخلة.

مثالtrue

showYLabels?boolean

إظهار تسميات المحور. يختار التخطيط الأصلي مجموعة فرعية غير متداخلة.

مثالtrue

xAxis?ChartAxisStyle

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

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

yAxis?ChartAxisStyle

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

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

stroke?Paint

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

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

lineWidth?number

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

مثال2

lineCap?"round" | "butt" | "square"

نهاية الخط: butt يقطع، square يمدد بشكل مربع، round يدوّر.

مثال"round"

lineJoin?"round" | "miter" | "bevel"

شكل وصلات الخط: miter أو round أو bevel.

مثال"round"

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?LineChartAnimation[]

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

مثال[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

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

مثال عملي

function main() {
  const now = $data.current.elapsed?.value ?? 0;
  const data = $data.history
    .filter((sample) => sample.elapsed?.value != null)
    .map((sample) => ({
      value: { x: sample.elapsed.value, y: sample.speed?.value ?? null },
      label: {
        x: sample.elapsed.value.toFixed(0) + 's',
        y: sample.speed?.value == null ? '' : sample.speed.value.toFixed(0),
      },
    }));
  return (
    <LineChart
      data={data}
      rangeX={[now - 30, now]}
      rangeY={[0, 160]}
      stroke={$env.accent}
      xAxis={{ stroke: $env.foreground, lineWidth: 1 }}
      yAxis={{ stroke: 'clear' }}
    />
  );
}

الحركة

widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYstrokelineWidthdashPhasetransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYrangeX.0rangeX.1rangeY.0rangeY.1xAxis.lineWidthxAxis.dashPhaseyAxis.lineWidthyAxis.dashPhasexAxis.strokeyAxis.stroke

عند الإغفال

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

الخصائص	عند الإغفال
`data`	`[]`
`showXLabels`	`true`
`showYLabels`	`true`
`lineWidth`	`2`
`stroke`	`HDR($env.dark ? 'white' : 'black')`
`xAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`
`yAxis`	`{ stroke: HDR($env.foreground), lineWidth: 1 }`

مثال

الاستخدام

الخصائص

مثال عملي

الحركة

عند الإغفال

$data · بيانات القيادة

الحركة

BarChart

Color / Gradient

في هذه الصفحة

LineChart

مثال

الاستخدام

الخصائص

مثال عملي

الحركة

عند الإغفال

واجهات مرتبطة

$data · بيانات القيادة

الحركة

BarChart

Color / Gradient

في هذه الصفحة