Dash DAQ④（GraduatedBarコンポーネント）

Dash DAQ

Dash DAQでは、データの収集・管理を行うコンポーネントを提供しています。

スイッチや計器に似た可視化ツールが用意されており、データを変化させる管理UIを作成できます。

Dash Enterprise - https://dash.plotly.com/dash-daq

GraduatedBarコンポーネント

GraduatedBarコンポーネントを使うと、メモリ付きバーを表示することができます。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.GraduatedBar(
        id='our-graduated-bar',
        label="Default",
        value=6
    ),
    dcc.Slider(
        id='our-graduated-bar-slider',
        min=0,
        max=10,
        step=1,
        value=5
    ),
])

@app.callback(
    Output('our-graduated-bar', 'value'),
    Input('our-graduated-bar-slider', 'value')
)
def update_output(value):
    return value

if __name__ == '__main__':
    app.run_server(debug=True)

[ブラウザで表示]

メモリ付きバーを表示することができました。

スライドバーで選択値を変更すると、メモリに反映されることを確認できます。