CapDrive
使用指南

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 而非索引當 x。
  • 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

整體視覺變換不改變版面。平移用點，旋轉及傾斜用度，縮放 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

透明度遮罩 View，置中顯示且不影響佈局；null 表示不使用遮罩。

範例<Circle width="fill" height="fill" background="white"/>
zIndex?number

同層 View 的繪製順序，數值越大越靠前。

範例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[]
showXLabelstrue
showYLabelstrue
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

$data · 駕駛資料

動畫

BarChart

Color / Gradient

BarChart

上一個

共用類型

下一步

本頁內容

範例使用說明屬性組合範例動畫省略時的行為相關 API