概要
前回から引き続きStreamlitの解説をしてゆきます
前回はStreamlitのAPIについて解説しました
Streamlit開発でどのようなことが可能なのかを一通り知ることができます
具体的には、チャート表示系のメソッド、入力ウィジェットを作成するメソッド、メディアを表示するメソッド、レイアウトを設定するメソッド、チャット風の表示を作成するためのメソッドについて解説します
↓Lesson 4にStreamlitの作り方が乗っています
ポチップ
チャート表示系のメソッド
最初にチャート表示系のメソッドについて紹介します
st.line_chart
まずはst.line_chartです
st.line_chartでは折れ線グラフを表示します
引数にデータフレームを設定することで折れ線グラフを表示できます
st.area_chart
続いてはst.area_chartです
st.area_chartでは面グラフを表示します
引数にデータフレームを設定することで面グラフを表示できます
面グラフは折れ線グラフに基づいて軸と折れ線に囲まれている部分を色で強調されています
全体的な総量を比較するのに使用されることが多いです
従って、単純な値を比較する際には折れ線グラフを、累積的な値を比較する際には面グラフを使用するのがよいでしょう
st.bar_chart
続いてはst.bar_chartです
st.bar_chartでは棒グラフを表示します
引数にデータフレームを設定することで棒グラフを表示できます
折れ線グラフは時系列データのように順番に意味のあるデータにつかいましたが、
棒グラフは順番を入れ替えても問題ないようなデータに使います
st.pyplot
続いてはst.pyplotです
引数にmatplotlibで作成したオブジェクトを設定することでグラフや図を表示できます
st.altair_chart
続いてはst.altair_chartです
引数にaltairで作成したオブジェクトを設定することでグラフや図を表示できます
matplotlibとaltairのどちらもデータを可視化するためのライブラリですが次のような違いがあります
matplotlibはカスタマイズ性が高いですが、複雑なデータを表示したい場合は多くのコードを書く必要があります
Altairはインタラクティブにデータを表示でき、複雑なデータでも少ないコードで表示可能ですがカスタマイズ性が低いです
st.vega_lite_chart
続いてはst.vega_lite_chartです
引数にvega_liteで作成したオブジェクトを設定することでグラフや図を表示できます
st.plotly_chart
続いてはst.plotly_chartです
引数にPlotlyで作成したオブジェクトを設定することでグラフや図を表示できます
st.bokeh_chart
続いてはst.bokeh_chartです
引数にBokehで作成したオブジェクトを設定することでグラフや図を表示できます
st.pydeck_chart
続いてはst.pydeck_chartです
引数にPyDeckで作成したオブジェクトを設定することでグラフや図を表示できます
st.graphviz_chart
続いてはst.graphviz_chartです
引数にdagre-d3で作成したオブジェクトを設定することでグラフや図を表示できます
matplotlib、altair、vega_lite、plotly、Bokeh、PyDeck、dagre-d3は全てグラフ可視化のためのライブラリです
いろいろ使ってみて自分の好みに合ったものを選びましょう
st.map
続いてはst.mapです
引数にデータフレームを設定することでマップ表にデータをプロットできます
入力ウィジェットを作成するメソッド
続いて入力ウィジェットを作成するメソッドについて紹介します
st.button
まずはst.buttonです
これはボタンを作成します
st.download_button
続いてはst.download_buttonです
これはダウンロードボタンを表示します
st.checkbox
続いてはst.checkboxです
これはチェックボックスを表示します
st.radio
続いてはst.radioです
これはラジオを表示します
st.selectbox
続いてはst.selectboxです
これはセレクトボックスを表示します
st.button
st.multiselect
続いてはst.multiselectです
これは複数選択できるセレクトボックスを表示します
st.slider
続いてはst.sliderです
これはスライダーを表示します
st.select_slider
続いてはst.select_sliderです
これはスライダーを表示しますが、先程のst.sliderとの違いは何でしょうか
st.sliderは数値やタイムスタンプ等のデータにしか使えませんが、st.select_sliderはそれ以外にも使用できます
st.text_input
続いてはst.text_inputです
これはテキスト入力できるウィジェットを表示します
st.number_input
続いてはst.number_inputです
これは数値入力できるウィジェットを表示します
st.text_area
続いてはst.text_areaです
これは複数行のテキスト入力できるウィジェットを表示します
st.date_input
続いてはst.date_inputです
これは日付を入力できるウィジェットを表示します
st.time_input
続いてはst.time_inputです
これは時間を入力できるウィジェットを表示します
st.file_uploader
続いてはst.file_uploaderです
これはファイルをアップロードできるウィジェットを表示します
st.color_picker
続いてはst.color_pickerです
これは色を選択できるウィジェットを表示します
メディアを表示するメソッド
続いてメディアを表示するメソッドについて解説します
st.image
まずはst.imageです
これは画像を表示できます
st.audio
続いてはst.audioです
これは音声を表示できます
st.video
続いてはst.videoです
これは動画を表示できます
レイアウトを設定するメソッド
続いて、レイアウトを設定するメソッドについて解説します
st.sidebar
まずはst.sidebarです
これはサイドバーを表示します
st.columns
続いてはst.columnsについてです
通常は上から下に表示がなされているのですが、st.columnsを使えば2列に表示を作れます
st.tabs
続いてはst.tabsです
これはタブを表示します
st.expander
続いてはst.expanderです
これを使用することでクリックで表示、非表示できる領域を作成します
st.container
続いてはst.containerです
これはひとまとまりの領域（コンテナ）を作成します
st.container
続いてはst.emptyです
これは空のコンテナを作成します。st.containerで作成しデータ表示を行ったコンテナをすべて消去したい場合に便利です
チャット風の表示を作成するためのメソッド
続いてチャット風の表示を作成するためのメソッドを紹介します
st.chat_message
まずはst.chat_messageです
これはチャットメッセージ風の表示を行います
st.chat_input
続いてはst.chat_inputです
これはチャットの入力欄のようなウィジェットを作成します
