Gráficas

Series Switch Trend

Series Switch Trend: Una 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.

Daily trendLast 90 days

Apr 2Apr 9Apr 16Apr 23Apr 30May 7May 14May 21May 28Jun 4Jun 11Jun 18Jun 25

Cómo usar Series Switch Trend

Series Switch Trend se presenta con el formato de vista previa «ancho» 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.

Control	Tipo	Valor inicial	Límites de la vista previa
`primaryColor`	`color`	`#38BDF8`	Los metadatos no indican otro límite.
`secondaryColor`	`color`	`#FF6A1F`	Los metadatos no indican otro límite.
`days`	`number`	`90`	De 30 a 120; paso 10
`strokeWidth`	`number`	`2`	De 1 a 4; paso 0.5
`showGrid`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Series Switch Trend?

Series Switch Trend 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 Series Switch Trend?

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

¿Qué detalles de accesibilidad se observan en Series Switch Trend?

El código React de Series Switch Trend incluye: elementos nativos (button); atributos y manejadores (aria-hidden, aria-label, aria-live, aria-pressed, 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 Series Switch Trend el movimiento reducido?

Series Switch Trend consulta la preferencia de movimiento en su código React mediante useReducedMotion(). 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 Plain trend line de Fieldbook, de la categoría Gráficas.

2288Plain trend lineGráficasUn 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.

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 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 Metric switch bar chart de Fieldbook, de la categoría Gráficas.

2280Metric switch bar chartGráficasUn gráfico de barras diario denso con dos mosaicos métricos en el encabezado; Al hacer clic en un mosaico, las barras se transforman en esa métrica.

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.