Saltar al contenido
Fieldbook
Menú
Iniciar sesión
ES

Gráficas

Plain trend line

Plain trend line: Un gráfico de líneas mínimo de una sola serie con una curva suave sin decoración y sin marcadores de puntos, mantenido tan simple y legible como puede serlo una línea de tendencia.

Cómo usar Plain trend line

Plain trend line se presenta con el formato de vista previa «tarjeta» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

ControlTipoValor inicialLímites de la vista previa
accentColorcolor#38BDF8Los metadatos no indican otro límite.
strokeWidthnumber2De 1 a 4; paso 0.5
showGridbooleantrueLos metadatos no indican otro límite.
animatebooleantrueLos metadatos no indican otro límite.
¿Para qué frameworks está disponible Plain trend line?

Plain trend line está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Plain trend line?

Los metadatos de React indican estas dependencias npm además de React: motion.

¿Qué detalles de accesibilidad se observan en Plain trend line?

El código React de Plain trend line incluye: atributos y manejadores (aria-hidden, aria-label, aria-live, onKeyDown, tabIndex); roles explícitos (img); comparaciones de teclas (ArrowLeft, ArrowRight, End, Escape, Home). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Plain trend line el movimiento reducido?

Plain trend line consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: duration: animate && !reduce ? 0.5 : 0. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Wiping multi series line de Fieldbook, de la categoría Gráficas.
1903Wiping multi series lineGráficasUn gráfico de líneas de varias series que se desplaza sobre la primera pintura, se desliza a un nuevo rango a medida que cambian los datos y muestra una lectura en forma de cruz en cada serie.
Imagen fija del componente Series Switch Trend de Fieldbook, de la categoría Gráficas.
2292Series Switch TrendGráficasUna línea de tendencia de noventa días con dos mosaicos en total en el encabezado; Al elegir un mosaico, la línea se transforma en esa serie y se intercala el trazo con su acento.
Imagen fija del componente Forecast tail line de Fieldbook, de la categoría Gráficas.
1859Forecast tail lineGráficasUna continuación discontinua que lleva una serie más allá de su último punto real hasta un horizonte, alargándose y aterrizando en un marcador hueco.
Imagen fija del componente Gridline area chart de Fieldbook, de la categoría Gráficas.
2099Gridline area chartGráficasUn gráfico de áreas enmarcado en una tarjeta con dos capas rellenas superpuestas, ejes redondeados, una línea de cuadrícula tenue y una línea de pie de página que indica la tendencia.
Imagen fija del componente Named point line de Fieldbook, de la categoría Gráficas.
2291Named point lineGráficasUna línea que atraviesa cinco categorías que imprime el nombre de cada categoría encima de su punto en lugar de un número, dejando el valor en la lectura al pasar el cursor.
Imagen fija del componente Smooth Area Trend de Fieldbook, de la categoría Gráficas.
1888Smooth Area TrendGráficasUn gráfico de áreas de una sola serie con un borde superior suavemente curvado, un relleno teñido suave, líneas de cuadrícula horizontales tenues y una lectura que sigue al puntero.