Saltar al contenido
Fieldbook
Menú
Iniciar sesión
ES

Gráficas

Value labeled line

Value labeled line: Un gráfico de líneas mensual que imprime cada valor por encima de su propio punto, para que los números se puedan leer sin tener que desplazarse sobre nada.

Cómo usar Value labeled line

Value labeled line 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.

ControlTipoValor inicialLímites de la vista previa
accentcolor#F5C542Los metadatos no indican otro límite.
showValuesbooleantrueLos metadatos no indican otro límite.
labelOffsetnumber12De 6 a 24; paso 1
strokeWidthnumber2De 1 a 4; paso 0.5
showGridbooleantrueLos metadatos no indican otro límite.
¿Para qué frameworks está disponible Value labeled line?

Value labeled 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 Value labeled line?

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

¿Qué detalles de accesibilidad se observan en Value labeled line?

El código React de Value labeled 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 Value labeled line el movimiento reducido?

Value labeled line consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Expresiones de index.tsx que dependen de la preferencia: delay: reduce ? 0 : 0.12 + (i / Math.max(n - 1, 1)) * DRAW_DURATION * 0.85; duration: reduce ? 0 : 0.32; duration: reduce ? 0 : DRAW_DURATION. 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 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 Outside Value Pie de Fieldbook, de la categoría Gráficas.
2395Outside Value PieGráficasUn gráfico circular sólido con números simples flotando justo afuera de cada sector, colocado de manera que cada etiqueta se lea hacia afuera desde el centro sin líneas de conexión.
Imagen fija del componente Engraved label pie de Fieldbook, de la categoría Gráficas.
2348Engraved label pieGráficasUn gráfico circular sólido que establece cada nombre de categoría dentro de su propio sector en un color invertido, de modo que el desglose se lee sin etiquetas ni líneas guía externas.
Imagen fija del componente Leader line pie de Fieldbook, de la categoría Gráficas.
2377Leader line pieGráficasUn gráfico circular sólido cuyos valores se encuentran fuera del círculo, cada uno vinculado a su sector mediante una línea guía de dos segmentos.
Imagen fija del componente Paired bar chart de Fieldbook, de la categoría Gráficas.
2281Paired bar chartGráficasUn gráfico de barras agrupadas donde cada mes muestra dos barras una al lado de la otra, una por serie, para comparar dos medidas en las mismas categorías.
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.