CapDrive
Guía de uso

LineChart

Trace la serie de datos con valores reales de x/y como una curva. Adecuado para tendencias como velocidad y tiempo, admite rangos de coordenadas, ejes y etiquetas; Los valores y faltantes romperán los segmentos de línea.

Ejemplo

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 }}
    />
  );
}

Uso

  • value.x/y sitúa muestras; label.x/y solo aporta texto. No ordena por x; y=null corta la línea. Un gráfico temporal móvil actualiza data y rangeX, por ejemplo [segundosActuales−30,segundosActuales].
  • $data.history contiene 30 segundos, de antiguos a nuevos, quizá vacío o con ausencias. timestamp usa milisegundos; elapsed, segundos. Conserva cortes null y usa elapsed.value, no índices, para el tiempo.
  • rangeX/rangeY limita números, no etiquetas. Ocultar etiquetas no oculta ejes; usa stroke="clear" por separado. El motor evita solapamientos, por lo que activar etiquetas no garantiza mostrarlas todas.
  • contentAnimation cambia texto, imágenes o datos estructurados. interpolate requiere puntos/closed de Polyline, secuencia Path o muestras compatibles. Los cambios de estructura se aplican inmediatamente.

Propiedades

dataReadonlyArray<ChartDataPoint>

Datos del gráfico. value.x/y define coordenadas y label.x/y el texto; y nulo interrumpe la línea.

Ejemplo[{value: {x: 0, y: 12}, label: {x: "0s", y: "12"}}, {value: {x: 10, y: 24}, label: {x: "10s", y: "24"}}]
rangeX?ChartRange

Rango numérico visible [min, max]. Si se omite, se ajusta a los datos.

Ejemplo[0, 30]
rangeY?ChartRange

Rango numérico visible [min, max]. Si se omite, se ajusta a los datos.

Ejemplo[0, 100]
showXLabels?boolean

Mostrar etiquetas del eje. El diseño nativo selecciona un subconjunto sin superposiciones.

Ejemplotrue
showYLabels?boolean

Mostrar etiquetas del eje. El diseño nativo selecciona un subconjunto sin superposiciones.

Ejemplotrue
xAxis?ChartAxisStyle

Línea horizontal en la parte inferior del gráfico. Por defecto usa primer plano y ancho 1pt; stroke: clear la oculta.

Ejemplo{stroke: HDR($env.foreground), lineWidth: 1}
yAxis?ChartAxisStyle

Línea vertical a la izquierda del gráfico. Por defecto usa primer plano y ancho 1pt; stroke: clear la oculta.

Ejemplo{stroke: HDR($env.foreground), lineWidth: 1}
stroke?Paint

Color o degradado del trazo; clear lo oculta.

EjemploHDR($env.dark ? "white" : "black")
lineWidth?number

Grosor del trazo en puntos; 0 no dibuja trazo.

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

Extremos: butt corta, square prolonga en cuadrado, round redondea.

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

Unión de segmentos: miter, round o bevel.

Ejemplo"round"
dash?number[]

Longitudes alternas de trazo y hueco en puntos; matriz vacía para línea continua.

Ejemplo[]
dashPhase?number

Desplazamiento del patrón de guiones en puntos.

Ejemplo0
contentAnimation?ContentAnimation

Transición opcional. interpolate requiere igual número de muestras y posiciones de datos ausentes; de lo contrario, actualiza inmediatamente.

Ejemplo{type: "interpolate", duration: 0.25}
Propiedades comunes
width?number | "auto" | "fill"

Anchura en puntos, tamaño automático o relleno del contenedor.

Ejemplo"fill"
height?number | "auto" | "fill"

Altura en puntos, tamaño automático o relleno del contenedor.

Ejemplo"fill"
x?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
y?number

Desplazamiento visual en puntos: x a la derecha, y hacia abajo, sin cambiar el espacio del diseño.

Ejemplo0
transform?ViewTransform

Transformación global sin alterar el diseño. Traslación en puntos, giro/inclinación en grados, escala 1 sin cambios, anclajes 0–1.

Ejemplo{rotation: 0}
opacity?number

Opacidad de todo el View: 0 transparente, 1 opaco.

Ejemplo1
clipped?boolean

Recorta el dibujo que sobresale de los límites del View.

Ejemplofalse
clip?"rectangle" | "ellipse"

Recorte rectangle o ellipse; Material también admite false para desactivarlo.

Ejemplo"rectangle"
mask?View | null

View de máscara alfa. Centrada sin afectar al diseño; null desactiva la máscara.

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

Orden entre elementos hermanos; los valores mayores aparecen delante.

Ejemplo0
blur?number

Radio de desenfoque en puntos; 0 lo desactiva.

Ejemplo4
innerShadow?DrawingEffect

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

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

Color, opacidad, radio de desenfoque y desplazamiento x/y del efecto; distancias en puntos.

Ejemplo{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Color de la sombra exterior.

EjemploHDR("black")
shadowOpacity?number

Opacidad de la sombra de 0 a 1; 0 la oculta.

Ejemplo0
shadowRadius?number

Radio de desenfoque de la sombra, en puntos.

Ejemplo4
shadowX?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo0
shadowY?number

Desplazamiento de sombra en puntos: x derecha, y abajo.

Ejemplo2
animations?LineChartAnimation[]

Anima cambios de propiedad. duration/delay en segundos; from/to son extremos; repeat/autoreverse controlan repeticiones y wrap el período.

Ejemplo[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identidad estable entre elementos hermanos.

Ejemplo práctico

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' }}
    />
  );
}

Animación

Animación

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

Al omitir

La tabla documenta omisiones comprobadas en la implementación. Los ejemplos no son valores predeterminados. Especifica valores para resultados fijos; tamaños y colores del contexto no son constantes.

PropiedadesAl omitir
data[]
showXLabelstrue
showYLabelstrue
lineWidth2
strokeHDR($env.dark ? 'white' : 'black')
xAxis{ stroke: HDR($env.foreground), lineWidth: 1 }
yAxis{ stroke: HDR($env.foreground), lineWidth: 1 }

$data · Datos de conducción

Animación

BarChart

Color / Gradient

BarChart

Anterior

Tipos comunes

Siguiente paso

En esta página

EjemploUsoPropiedadesEjemplo prácticoAnimaciónAl omitirAPI relacionadas