Funciones interactivas
Amplíe, examine y desplace la vista
Funciones interactivas es una lección gratuita de Python Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Python Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Python Academy incluye 4 lecciones en total.
Por qué importa la interactividad
La mayor ventaja de Plotly frente a las bibliotecas estáticas es que los gráficos responden al usuario. Los lectores pueden ampliar una región, desplazarse por los datos y pasar el cursor para leer los valores exactos sin saturar el gráfico con etiquetas.
La interactividad permite que un solo gráfico sirva tanto para obtener una visión general como para consultar los detalles.
Información emergente al pasar el cursor
De forma predeterminada, al pasar el cursor sobre un punto se muestran sus valores x e y. Puede ampliar esta información con hover_data=['col1', 'col2'] para añadir columnas, o usar hover_name='name' para establecer el título en negrita de la información emergente.
Una buena información emergente evita la necesidad de recargar el gráfico con elementos innecesarios.
Crear una cadena de información emergente
Conceptualmente, una información emergente es simplemente texto con formato compuesto a partir de una fila de datos. Este es el mismo concepto expresado en Python básico.
point = {'name': 'Berlin', 'pop': 3700000, 'gdp': 154}
tooltip = point['name'] + '\nPop: ' + format(point['pop'], ',') + '\nGDP: ' + str(point['gdp'])
print(tooltip)Ampliación y desplazamiento
Las figuras de Plotly incluyen una barra de modos con herramientas para ampliar, desplazarse y seleccionar con un rectángulo. Los usuarios también pueden arrastrar para ampliar un rectángulo y hacer doble clic para restablecer la vista.
Estos comportamientos están activados de forma predeterminada; normalmente no necesita escribir código para habilitarlos.
El rango y el restablecimiento
La ampliación cambia temporalmente el rango del eje. Puede establecer el rango inicial con fig.update_xaxes(range=[0, 100]), y el usuario siempre puede restablecerlo.
Considere la ampliación como la selección de una subventana dentro del rango completo de los datos.
full_min, full_max = 0, 1000
zoom_min, zoom_max = 200, 400
visible = zoom_max - zoom_min
total = full_max - full_min
print('Zoom shows', round(visible / total * 100), '% of the range')Modos de información emergente
fig.update_layout(hovermode='x unified') muestra una sola información emergente que enumera todas las series en la posición x sobre la que se encuentra el cursor. Es excelente para comparar varias líneas en el mismo momento.
Otros modos son 'closest' y 'x'.
Interactividad de la leyenda
Las leyendas de Plotly se pueden pulsar. Un solo clic oculta una serie; un doble clic la muestra de forma aislada. Así, los usuarios pueden centrarse en los datos que les interesan sin que tenga que crear gráficos independientes.
Funciona automáticamente siempre que el gráfico tenga varias trazas.
Controles deslizantes de rango
Para las series temporales, añada un control deslizante de rango con fig.update_xaxes(rangeslider_visible=True). Debajo aparece un pequeño gráfico de vista general que permite a los usuarios arrastrar para seleccionar un intervalo de fechas.
Combina bien con botones de selección de rango como 1m, 6m y YTD.
Plantillas de información emergente personalizadas
Para obtener un control total, use hovertemplate, una cadena con marcadores de posición como %{x} y %{y}. Puede decidir exactamente qué texto y formato numérico se muestran al pasar el cursor.
Diseñar la plantilla es como diseñar cualquier cadena con formato.
x, y = 2021, 42.567
template = 'Year %{x}: $%{y:.1f}M'
rendered = template.replace('%{x}', str(x)).replace('%{y:.1f}', format(y, '.1f'))
print(rendered)Saber cuándo parar
La interactividad es potente, pero no es gratuita. Demasiados controles abruman a los lectores ocasionales. Active las funciones que respondan a preguntas reales y confíe en los valores predeterminados adecuados para el resto.
La barra de modos
La barra de herramientas situada en la esquina superior derecha de cada figura es la barra de modos. Contiene herramientas para ampliar, desplazarse y ajustar la escala automáticamente, además de un botón de cámara para descargar un PNG. Puede configurarla u ocultarla con el argumento config al mostrar la figura.
Ocultar los botones que no se usan despeja el gráfico para el público no técnico.
Comprobación rápida
Ponga a prueba sus conocimientos sobre las funciones interactivas.
Resumen
Ha explorado la interactividad de Plotly:
- Información emergente, ampliada con
hover_datayhovertemplate - Ampliación y desplazamiento mediante la barra de modos integrada
hovermode='x unified'para combinar la información emergente- Leyendas interactivas y controles deslizantes de rango para series temporales
Use estas funciones de forma deliberada para responder a preguntas reales.
Preguntas frecuentes
¿La lección «Funciones interactivas» es gratis?
Sí — el texto completo de «Funciones interactivas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Python Academy, actualiza a CoddyKit PRO. El curso de Python Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Funciones interactivas»?
Amplíe, examine y desplace la vista Practicas Python Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Python Academy?
No se requiere experiencia previa. Python Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Funciones interactivas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Python Academy?
Sí. Cada lección de Python Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Conceptos básicos de Plotly Express
- Funciones interactivas
- Conceptos de dashboards
- Exportación e incrustación