Bokeh - Thêm tiện ích
Mô-đun bokeh.models.widgets chứa các định nghĩa của các đối tượng GUI tương tự như các phần tử biểu mẫu HTML, chẳng hạn như nút, thanh trượt, hộp kiểm, nút radio, v.v. Các điều khiển này cung cấp giao diện tương tác cho một biểu đồ. Việc gọi xử lý như sửa đổi dữ liệu lô, thay đổi thông số lô, v.v., có thể được thực hiện bởi các hàm JavaScript tùy chỉnh được thực thi trên các sự kiện tương ứng.
Bokeh cho phép xác định chức năng gọi lại bằng hai phương pháp:
Sử dụng CustomJS callback để tính tương tác sẽ hoạt động trong các tài liệu HTML độc lập.
Sử dụng Bokeh server và thiết lập trình xử lý sự kiện.
Trong phần này, chúng ta sẽ xem cách thêm các widget Bokeh và gán các lệnh gọi lại JavaScript.
Cái nút
Tiện ích này là một nút có thể nhấp thường được sử dụng để gọi một trình xử lý cuộc gọi lại do người dùng xác định. Hàm tạo nhận các tham số sau:
Button(label, icon, callback)Thông số nhãn là một chuỗi được sử dụng làm chú thích của nút và lệnh gọi lại là hàm JavaScript tùy chỉnh được gọi khi được nhấp.
Trong ví dụ sau, một biểu đồ và tiện ích Nút được hiển thị trong bố cục Cột. Bản thân biểu đồ hiển thị một đường thẳng giữa chuỗi dữ liệu x và y.
Một hàm JavaScript tùy chỉnh có tên 'gọi lại' đã được xác định bằng cách sử dụng CutomJS() function. Nó nhận tham chiếu đến đối tượng đã kích hoạt gọi lại (trong trường hợp này là nút) ở dạng biến cb_obj.
Hàm này thay đổi dữ liệu ColumnDataSource nguồn và cuối cùng phát ra bản cập nhật này trong dữ liệu nguồn.
from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import Figure, output_file, show
from bokeh.models.widgets import Button
x = [x*0.05 for x in range(0, 200)]
y = x
source = ColumnDataSource(data=dict(x=x, y=y))
plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)
callback = CustomJS(args=dict(source=source), code="""
var data = source.data;
x = data['x']
y = data['y']
for (i = 0; i < x.length; i++) {
y[i] = Math.pow(x[i], 4)
}
source.change.emit();
""")
btn = Button(label="click here", callback=callback, name="1")
layout = column(btn , plot)
show(layout)Đầu ra (ban đầu)
Nhấp vào nút trên cùng của cốt truyện và xem hình vẽ cốt truyện được cập nhật trông như sau:
Đầu ra (sau khi nhấp chuột)
Thanh trượt
Với sự trợ giúp của điều khiển thanh trượt, bạn có thể chọn một số giữa các thuộc tính đầu và cuối được gán cho nó.
Slider(start, end, step, value)Trong ví dụ sau, chúng tôi đăng ký một hàm gọi lại trên sự kiện on_change của slider. Giá trị số tức thời của Slider có sẵn cho trình xử lý ở dạng cb_obj.value được sử dụng để sửa đổi dữ liệu ColumnDatasource. Hình vẽ liên tục cập nhật khi bạn trượt vị trí.
from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import Figure, output_file, show
from bokeh.models.widgets import Slider
x = [x*0.05 for x in range(0, 200)]
y = x
source = ColumnDataSource(data=dict(x=x, y=y))
plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)
handler = CustomJS(args=dict(source=source), code="""
var data = source.data;
var f = cb_obj.value
var x = data['x']
var y = data['y']
for (var i = 0; i < x.length; i++) {
y[i] = Math.pow(x[i], f)
}
source.change.emit();
""")
slider = Slider(start=0.0, end=5, value=1, step=.25, title="Slider Value")
slider.js_on_change('value', handler)
layout = column(slider, plot)
show(layout)Đầu ra
RadioGroup
Tiện ích con này trình bày một bộ sưu tập các nút bật tắt loại trừ lẫn nhau hiển thị các nút tròn ở bên trái chú thích.
RadioGroup(labels, active)Trong đó, nhãn là danh sách phụ đề và hoạt động là chỉ mục của tùy chọn đã chọn.
Lựa chọn
Tiện ích này là một danh sách thả xuống đơn giản gồm các mục chuỗi, một trong số đó có thể được chọn. Chuỗi đã chọn xuất hiện ở cửa sổ trên cùng và nó là tham số giá trị.
Select(options, value)Danh sách các phần tử chuỗi trong trình đơn thả xuống được đưa ra dưới dạng đối tượng danh sách tùy chọn.
Sau đây là một ví dụ kết hợp của nút radio và các widget chọn lọc, cả hai đều cung cấp ba mối quan hệ khác nhau giữa chuỗi dữ liệu x và y. CácRadioGroup và Select widgets được đăng ký với các trình xử lý tương ứng thông qua phương thức on_change ().
from bokeh.layouts import column
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import Figure, output_file, show
from bokeh.models.widgets import RadioGroup, Select
x = [x*0.05 for x in range(0, 200)]
y = x
source = ColumnDataSource(data=dict(x=x, y=y))
plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)
radiohandler = CustomJS(args=dict(source=source), code="""
var data = source.data;
console.log('Tap event occurred at x-position: ' + cb_obj.active);
//plot.title.text=cb_obj.value;
x = data['x']
y = data['y']
if (cb_obj.active==0){
for (i = 0; i < x.length; i++) {
y[i] = x[i];
}
}
if (cb_obj.active==1){
for (i = 0; i < x.length; i++) {
y[i] = Math.pow(x[i], 2)
}
}
if (cb_obj.active==2){
for (i = 0; i < x.length; i++) {
y[i] = Math.pow(x[i], 4)
}
}
source.change.emit();
""")
selecthandler = CustomJS(args=dict(source=source), code="""
var data = source.data;
console.log('Tap event occurred at x-position: ' + cb_obj.value);
//plot.title.text=cb_obj.value;
x = data['x']
y = data['y']
if (cb_obj.value=="line"){
for (i = 0; i < x.length; i++) {
y[i] = x[i];
}
}
if (cb_obj.value=="SquareCurve"){
for (i = 0; i < x.length; i++) {
y[i] = Math.pow(x[i], 2)
}
}
if (cb_obj.value=="CubeCurve"){
for (i = 0; i < x.length; i++) {
y[i] = Math.pow(x[i], 4)
}
}
source.change.emit();
""")
radio = RadioGroup(
labels=["line", "SqureCurve", "CubeCurve"], active=0)
radio.js_on_change('active', radiohandler)
select = Select(title="Select:", value='line', options=["line", "SquareCurve", "CubeCurve"])
select.js_on_change('value', selecthandler)
layout = column(radio, select, plot)
show(layout)Đầu ra
Tiện ích tab
Cũng giống như trong trình duyệt, mỗi tab có thể hiển thị các trang web khác nhau, tiện ích Tab là mô hình Bokeh cung cấp chế độ xem khác nhau cho từng hình. Trong ví dụ sau, hai biểu đồ của đường cong sin và côsin được hiển thị trong hai tab khác nhau -
from bokeh.plotting import figure, output_file, show
from bokeh.models import Panel, Tabs
import numpy as np
import math
x=np.arange(0, math.pi*2, 0.05)
fig1=figure(plot_width=300, plot_height=300)
fig1.line(x, np.sin(x),line_width=2, line_color='navy')
tab1 = Panel(child=fig1, title="sine")
fig2=figure(plot_width=300, plot_height=300)
fig2.line(x,np.cos(x), line_width=2, line_color='orange')
tab2 = Panel(child=fig2, title="cos")
tabs = Tabs(tabs=[ tab1, tab2 ])
show(tabs)Đầu ra
