Dash DAQ⑮(Thermometerコンポーネント)

Dash DAQ

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

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

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

Thermometerコンポーネント

Thermometerコンポーネントを使うと、温度計型の計器を表示することができます。

初期値をvalue、最小値をmin、最大値をmaxでそれぞれ設定します。(12~14行目)

[ソースコード]

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
33
34
35
36
37
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.Thermometer(
id='my-thermometer-1',
value=5,
min=0,
max=10,
style={
'margin-bottom': '5%'
}
),
html.Br(),
dcc.Slider(
id='thermometer-slider-1',
value=5,
min=0,
max=10,

),
])

@app.callback(
Output('my-thermometer-1', 'value'),
Input('thermometer-slider-1', 'value')
)
def update_thermometer(value):
return value

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

[ブラウザで表示]

温度計型の計器が表示されました。

スライドバーで数値を変更すると、温度計内の水色のエリアが変わることを確認できます。