Crear un control deslizante de rango simple en Bokeh

El widget de control deslizante de rango le permite seleccionar un rango de punto flotante desde un control deslizante con puntos de inicio y fin. El widget RangeSlider de Bokeh consta de valores iniciales y finales, un tamaño de paso, un valor inicial y un título. 

Sintaxis:

range_slider = RangeSlider(inicio, final, valor, paso, título)

range_slider.js_on_change(“valor”, CustomJS(código))

Veamos el procedimiento para crear un control deslizante de rango.

  • Importe el widget RangeSlider de bokeh.models

En este paso, importamos figuras y mostramos métodos desde la interfaz bokeh.plotting. La interfaz Bokeh.plotting le permite crear gráficos ensamblando varios elementos, como cuadrículas, ejes y otras herramientas. El método figure() le permite agregar diferentes tipos de glifos a su gráfico y el método show() le permite mostrar su visualización en un navegador. Del mismo modo, importamos el diseño de bokeh.layouts para crear objetos de diseño. Y finalmente, estamos importando RangeSlider para crear un control deslizante de rango y hacer que nuestra visualización sea interactiva.

  • Configuración de los datos y la figura.

En este paso, estamos creando un archivo de salida que es un archivo HTML y se abre en la nueva ventana de su navegador. La salida se mostrará en este archivo HTML. El método de figura crea una figura con el rango, la altura y el ancho dados.

  • Crear un objeto RangeSlider

Sintaxis:

RangeSlider(título, inicio, final, paso, valor)

Parámetro:

  • Título: Representa el título del control deslizante de rango.
  • Inicio : Representa el límite inferior del rango y es de tipo flotante.
  • end : Representa el límite superior del rango y es de tipo float.
  • step : Representa el intervalo entre los valores y es de tipo float.
  • value : Representa una tupla que contiene los valores de los límites superior e inferior del rango seleccionado.
  • Enlace al JavaScript 

El enlace al javaScript se proporciona mediante el uso de la función link_js() para vincular los valores generados por RangeSlider a su gráfico. 

Sintaxis:

RangeSliderObject.js_link(valor, p.x_range, inicio/fin, attr_selector)

  • Crear un diseño de todos los elementos que desea mostrar en el navegador.

Finalmente, estamos usando el método de diseño para mostrar todos los elementos de nuestro tablero y mostrar (diseño) para mostrar nuestro diseño en el navegador.

Programa:

Python

from bokeh.plotting import figure, show
  
from bokeh.layouts import layout
from bokeh.models import RangeSlider
  
x = list(range(12))
y = [i**2 for i in x]
  
output_file = ('range_slider.html')
p = figure(x_range=(1, 9), plot_width=600, plot_height=300)
points = p.circle(x=x, y=y, size=40, fill_color="red")
  
range_slider = RangeSlider(
    title=" Adjust X-Axis range",
    start=0,
    end=12,
    step=1,
    value=(p.x_range.start, p.x_range.end),
)
  
range_slider.js_link("value", p.x_range, "start", attr_selector=0)
range_slider.js_link("value", p.x_range, "end", attr_selector=1)
  
layout = layout([range_slider], [p])
show(layout)

Producción:

Publicación traducida automáticamente

Artículo escrito por namaldesign y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *