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 只决定文字。按输入顺序连线，不会自动按 x 排序；y=null 断开线段。时间曲线需要每次更新 data 和 rangeX，例如使用 [当前秒数−30, 当前秒数] 显示滚动窗口。
  • $data.history 是最近 30 秒的已选数据，按旧到新排列，可能为空或包含缺测。timestamp 的单位是毫秒，elapsed 是秒。做速度/时间曲线时保留 null 断点，并用 elapsed.value 作为横坐标，不要把数组索引当作时间。
  • rangeX/rangeY 是数值范围，不是标签范围。隐藏标签不会隐藏轴线；用 xAxis/yAxis 的 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

透明度遮罩 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