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