小さな部品を追加する

ウィジェットは、可視化されたフロントエンドユーザインタフェースを提供するために、Bokehアプリケーションに追加することができる対話型コントロールである。これらは，新たな計算を駆動し，描画を更新し，他のプログラミング機能に接続することができる.Bokehサーバと一緒に使用する場合、ウィジェットは任意のPythonコードを実行することができ、複雑なアプリケーションをサポートすることができます。小部品は，BokehサーバなしでブラウザのJavascriptで実行する際に独立したHTML文書で使用することも可能である.

コールバック.

小さな部品を使用するためには，それらを文書に追加し，それらのコールバックを定義する必要がある.小部品は文書ルートディレクトリに直接追加することも可能であり，レイアウトに入れ子することも可能である.小さな部品を使用できる2つの方法があります

• A CustomJS コールバック(参照) JavaScriptコールバック ）。この手法は，独立したHTML文書やBokehサーバアプリケーションに適している.

• 使用 bokeh serve Bokehサーバを起動してイベントハンドラを設定するには、以下の操作を実行してください .on_change (またはあるウィジェットの場合は .on_click ）。

イベントハンドラは，ユーザがウィジェットに付加できるPython関数である.そして，小さな部品上のいくつかの属性が変更された場合には，これらの関数を呼び出す.イベントハンドラの関数署名は、それらがウィジェットに付加される方法によって決定される(例えば、通過するか否か .on_change あるいは…。 .on_click ）。

すべての小さな部品は1つあります .on_change 属性名および1つまたは複数のイベントハンドラをパラメータとする方法。これらの処理プログラムは関数署名を持つことが望ましい. (attr, old, new) どこですか attr 変更された属性の名前を指し、 old そして new この属性の前の値と更新値を参照してください。

def my_text_input_handler(attr, old, new):
    print("Previous label: " + old)
    print("Updated label: " + new)

text_input = TextInput(value="default", title="Label:")
text_input.on_change("value", my_text_input_handler)

さらに、いくつかの小さな構成要素(ボタン、ドロップダウンリスト、およびチェックボックスを含む)は、 .on_click 方法，この方法はイベントハンドラをその唯一のパラメータとする.一面の平原上 Button すると，引数がない場合にはこのハンドラを呼び出す.他の小さな部品については、ご利用ください .on_click すると，新しい属性値をハンドラに渡す.

def my_radio_handler(new):
    print 'Radio button option ' + str(new) + ' selected.'

radio_group = RadioGroup(labels=["Option 1", "Option 2", "Option 3"], active=0)
radio_group.on_click(my_radio_handler)

Bokehは、簡単なデフォルトのウィジェットのセットを提供します。ユーザは、自分のカスタムウィジェットを作成することができ、カスタム拡張を作成することによって、上述したように、異なるサード·パーティウィジェットライブラリをパッケージすることもできる Bokehを伸ばす それがそうです。

以下のコマンドを用いて表示される属性の詳細について .on_change 会いましょう 参考にする それがそうです。(ウィジェットに関する情報は以下の位置で見つけることができます bokeh.models ()

実例.

以下の各節では，すべての内蔵小部品を用いた短くて完全な例を収集する.多くの例示的な印刷出力は、ブラウザJavascriptコンソールログを見ることで、これらの出力を観察することができる。

ボタン

Bokehは簡単なボタンを提供しています

from bokeh.io import show
from bokeh.models import Button, CustomJS

button = Button(label="Foo", button_type="success")
button.js_on_click(CustomJS(code="console.log('button: click!', this.toString())"))

show(button)

CheckboxButtonGroup

Bokehはまた、複数のオプションを同時に選択することができるチェックボックスボタン群を提供する。

from bokeh.io import show
from bokeh.models import CheckboxButtonGroup, CustomJS

LABELS = ["Option 1", "Option 2", "Option 3"]

checkbox_button_group = CheckboxButtonGroup(labels=LABELS, active=[0, 1])
checkbox_button_group.js_on_click(CustomJS(code="""
    console.log('checkbox_button_group: active=' + this.active, this.toString())
"""))

show(checkbox_button_group)

CheckboxGroup

標準チェックボックス：

from bokeh.io import show
from bokeh.models import CheckboxGroup, CustomJS

LABELS = ["Option 1", "Option 2", "Option 3"]

checkbox_group = CheckboxGroup(labels=LABELS, active=[0, 1])
checkbox_group.js_on_click(CustomJS(code="""
    console.log('checkbox_group: active=' + this.active, this.toString())
"""))

show(checkbox_group)

ColorPicker

ユーザがRGB色値のウィジェットを指定することを可能にする。

from bokeh.io import show
from bokeh.layouts import column
from bokeh.models import ColorPicker
from bokeh.plotting import Figure

plot = Figure(x_range=(0, 1), y_range=(0, 1), plot_width=350, plot_height=350)
line = plot.line(x=(0,1), y=(0,1), color="black", line_width=4)

picker = ColorPicker(title="Line Color")
picker.js_link('color', line.glyph, 'line_color')

show(column(plot, picker))

DataTable

BokehはSlickGridに基づく複雑なデータテーブルの小型部品を提供する.フォームにはデータソースオブジェクトが配置されているため，そのデータソースを共有する描画は，描画とテーブルの間にオプションを自動的にリンクする(静的HTML文書においても同様であることに注意されたい).

from datetime import date
from random import randint

from bokeh.io import show
from bokeh.models import ColumnDataSource, DataTable, DateFormatter, TableColumn

data = dict(
        dates=[date(2014, 3, i+1) for i in range(10)],
        downloads=[randint(0, 100) for i in range(10)],
    )
source = ColumnDataSource(data)

columns = [
        TableColumn(field="dates", title="Date", formatter=DateFormatter()),
        TableColumn(field="downloads", title="Downloads"),
    ]
data_table = DataTable(source=source, columns=columns, width=400, height=280)

show(data_table)

DatePicker

ユーザが期待値の小さい部品を指定することを許可する.

from bokeh.io import show
from bokeh.models import CustomJS, DatePicker

date_picker = DatePicker(title='Select date', value="2019-09-20", min_date="2019-08-01", max_date="2019-10-30")
date_picker.js_on_change("value", CustomJS(code="""
    console.log('date_picker: value=' + this.value, this.toString())
"""))

show(date_picker)

DateRangeSlider

Bokeh Date Range-スライダは、 start そして end 日価，a step 大きさ、頭文字 value そして1つは title ：

from datetime import date

from bokeh.io import show
from bokeh.models import CustomJS, DateRangeSlider

date_range_slider = DateRangeSlider(value=(date(2016, 1, 1), date(2016, 12, 31)),
                                    start=date(2015, 1, 1), end=date(2017, 12, 31))
date_range_slider.js_on_change("value", CustomJS(code="""
    console.log('date_range_slider: value=' + this.value, this.toString())
"""))

show(date_range_slider)

ディフ！

<div>タグにHTMLをサポートするテキストを表示するための小さな部品：

from bokeh.io import show
from bokeh.models import Div

div = Div(text="""Your <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>-supported text is initialized with the <b>text</b> argument.  The
remaining div arguments are <b>width</b> and <b>height</b>. For this example, those values
are <i>200</i> and <i>100</i>, respectively.""",
width=200, height=100)

show(div)

降下する.

A ボタン これは、クリックすると、相互排他的エントリのドロップダウンリストを表示します。

from bokeh.io import show
from bokeh.models import CustomJS, Dropdown

menu = [("Item 1", "item_1"), ("Item 2", "item_2"), None, ("Item 3", "item_3")]

dropdown = Dropdown(label="Dropdown button", button_type="warning", menu=menu)
dropdown.js_on_event("menu_item_click", CustomJS(code="console.log('dropdown: ' + this.item, this.toString())"))

show(dropdown)

FileInput

ユーザがファイルを選択し、その内容を記憶することを可能にするウィジェット。

from bokeh.io import show
from bokeh.models import FileInput

file_input = FileInput()

show(file_input)

MultiChoice

コンパクトな水平レイアウトに複数の利用可能なオプションを表示する複数のウィジェット：

from bokeh.io import show
from bokeh.models import CustomJS, MultiChoice

OPTIONS = ["foo", "bar", "baz", "quux"]

multi_choice = MultiChoice(value=["foo", "baz"], options=OPTIONS)
multi_choice.js_on_change("value", CustomJS(code="""
    console.log('multi_choice: value=' + this.value, this.toString())
"""))

show(multi_choice)

MultiSelect

複数の利用可能なオプションを垂直リストに表示することができる複数のウィジェット：

from bokeh.io import show
from bokeh.models import CustomJS, MultiSelect

OPTIONS = [("1", "foo"), ("2", "bar"), ("3", "baz"), ("4", "quux")]

multi_select = MultiSelect(value=["1", "2"], options=OPTIONS)
multi_select.js_on_change("value", CustomJS(code="""
    console.log('multi_select: value=' + this.value, this.toString())
"""))

show(multi_select)

段落

HTML<p>タグにテキストブロックを表示するための小さな部品：

from bokeh.io import show
from bokeh.models import Paragraph

p = Paragraph(text="""Your text is initialized with the 'text' argument.  The
remaining Paragraph arguments are 'width' and 'height'. For this example, those values
are 200 and 100, respectively.""",
width=200, height=100)

show(p)

PasswordInput

入力されたテキストを曖昧にするテキスト入力：

from bokeh.io import show
from bokeh.models import CustomJS, PasswordInput

password_input = PasswordInput(placeholder="enter password...")
password_input.js_on_change("value", CustomJS(code="""
    console.log('password_input: value=' + this.value, this.toString())
"""))

show(password_input)

PreText

HTML<pre>タグに予めフォーマットされたテキストブロックを表示するための小さな構成要素：

from bokeh.io import show
from bokeh.models import PreText

pre = PreText(text="""Your text is initialized with the 'text' argument.

The remaining Paragraph arguments are 'width' and 'height'. For this example,
those values are 500 and 100, respectively.""",
width=500, height=100)

show(pre)

RadioButtonGroup

ラジオボタン群は一度に最大1つのボタンしか選択できません。

from bokeh.io import show
from bokeh.models import CustomJS, RadioButtonGroup

LABELS = ["Option 1", "Option 2", "Option 3"]

radio_button_group = RadioButtonGroup(labels=LABELS, active=0)
radio_button_group.js_on_click(CustomJS(code="""
    console.log('radio_button_group: active=' + this.active, this.toString())
"""))

show(radio_button_group)

RadioGroup

ラジオボタン群は、標準ラジオボタンの外観を使用している。

from bokeh.io import show
from bokeh.models import CustomJS, RadioGroup

LABELS = ["Option 1", "Option 2", "Option 3"]

radio_group = RadioGroup(labels=LABELS, active=0)
radio_group.js_on_click(CustomJS(code="""
    console.log('radio_group: active=' + this.active, this.toString())
"""))

show(radio_group)

RangeSlider

Bokeh範囲スライダは、 start そして end 値，a step 大きさ、頭文字 value そして1つは title ：

from bokeh.io import show
from bokeh.models import CustomJS, RangeSlider

range_slider = RangeSlider(start=0, end=10, value=(1,9), step=.1, title="Stuff")
range_slider.js_on_change("value", CustomJS(code="""
    console.log('range_slider: value=' + this.value, this.toString())
"""))

show(range_slider)

選ぶ

小さな部品を1つ選択します

from bokeh.io import show
from bokeh.models import CustomJS, Select

select = Select(title="Option:", value="foo", options=["foo", "bar", "baz", "quux"])
select.js_on_change("value", CustomJS(code="""
    console.log('select: value=' + this.value, this.toString())
"""))

show(select)

滑りやすいブロック.

Bokehスライダは、 start そして end 値，a step 大きさ、頭文字 value そして1つは title ：

from bokeh.io import show
from bokeh.models import CustomJS, Slider

slider = Slider(start=0, end=10, value=1, step=.1, title="Stuff")
slider.js_on_change("value", CustomJS(code="""
    console.log('slider: value=' + this.value, this.toString())
"""))

show(slider)

紡績機.

デジタルマイクロ調整器部材：

import numpy as np

from bokeh.io import show
from bokeh.layouts import column, row
from bokeh.models import Spinner
from bokeh.plotting import figure

x = np.random.rand(10)
y = np.random.rand(10)

p = figure(x_range=(0, 1), y_range=(0, 1))
points = p.scatter(x=x, y=y, size=4)

spinner = Spinner(title="Glyph size", low=1, high=40, step=0.5, value=4, width=80)
spinner.js_link('value', points.glyph, 'size')

show(row(column(spinner, width=100), p))

表札を作る.

オプションのカードウィンドウは、オプションのオプションカードに複数の描画またはレイアウトを表示することができます：

from bokeh.io import show
from bokeh.models import Panel, Tabs
from bokeh.plotting import figure

p1 = figure(plot_width=300, plot_height=300)
p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
tab1 = Panel(child=p1, title="circle")

p2 = figure(plot_width=300, plot_height=300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)
tab2 = Panel(child=p2, title="line")

show(Tabs(tabs=[tab1, tab2]))

TextAreaInput

ユーザから複数行のテキストを収集するための小さな構成要素：

from bokeh.io import show
from bokeh.models import CustomJS, TextAreaInput

text_area_input = TextAreaInput(value="default", rows=6, title="Label:")
text_area_input.js_on_change("value", CustomJS(code="""
    console.log('text_area_input: value=' + this.value, this.toString())
"""))

show(text_area_input)

TextInput

ユーザからテキストの行を収集するための小さな構成要素：

from bokeh.io import show
from bokeh.models import CustomJS, TextInput

text_input = TextInput(value="default", title="Label:")
text_input.js_on_change("value", CustomJS(code="""
    console.log('text_input: value=' + this.value, this.toString())
"""))

show(text_input)

ToggleButton

切替ボタンのオン/オフ状態：

from bokeh.io import show
from bokeh.models import CustomJS, Toggle

toggle = Toggle(label="Foo", button_type="success")
toggle.js_on_click(CustomJS(code="""
    console.log('toggle: active=' + this.active, this.toString())
"""))

show(toggle)