Pythonの「Bokeh」というパッケージを使用して、ブラウザ上で指定した任意のデータをグラフ表示する方法を紹介します。
データはブラウザ上の入力ボックスから任意に変更可能で、GUIライクなボタン操作により、グラフの追加・削除を可能としています。「Bokeh」にはサーバー機能が備わっているため、常駐型システムに関する経験がなくとも容易に開発が可能です。
（グラフの追加イメージ）
（グラフの削除イメージ）
動作確認済み環境
CPU: Intel Core i7-9750H
その他のプラットフォーム: Anaconda3（python3.8）
Pythonパッケージ: bokeh==2.2.3, pandas==1.1.3
※bokehの2.0.0以降のバージョンではpython3.6以上、2.4.0以降のバージョンではpython3.7以上が要求されています。
詳細は公式のリリース情報を参照してください。
Anacondaは、Pythonインタプリタ（実行環境）と、科学技術計算、データサイエンス、機械学習に関連したパッケージがセットになったプラットフォーム環境です。本記事では、Anaconda環境をWindowPCへインストールする方法と簡単[…]
必要パッケージのインストール
bokeh
アプリケーション概要
ソースコード
アプリケーションのソースコードはGitHubで公開しています。
実行方法
「–show」 を指定すると、既定のブラウザが自動で立ち上がり、Pythonスクリプト内で定義したレイアウトが表示されます。
機能概要
①データのルートパスの入力受付
入力ボックス「root path:」にデータファイル（*.csv）が含まれるフォルダのルートパスを指定すると、ルートパス配下のデータファイルを再帰的に検索する。
検索により見つかったデータファイルは「Load」ボタン横のセレクトボックスにリストアップされる。
②指定したデータのロード、グラフ表示
「Load」ボタン横のセレクトボックスからデータファイルを選択し、「Load」ボタンを押下すると、グラフが１つ追加される。
グラフ名は「{表示順序}_{ファイル名}」に自動で設定される。
同じデータを複数回に渡ってグラフ化することも可能としている。
「ALL Load」ボタンを押下すると、「Load」ボタン横のセレクトボックスにリストアップされている全てのデータファイルがグラフ化される。
追加されたグラフは「Remove」ボタン横のセレクトボックスにリストアップされる。
横方向のグラフ表示数は最大数４つに設定している。５つ目以降のグラフは２行目以降に表示される。
③指定したグラフの削除
削除したグラフ以降に表示していたグラフのグラフ名と表示位置は最新の表示順序に応じて自動的に調整される。
「ALL Remove」ボタンを押下すると、「Remove」ボタン横のセレクトボックスにリストアップされている全てのグラフが削除される。
プログラミング方法
以下の順序でプログラミングします。
- オブジェクトのインポート
- ウィジェットの定義
- コールバック関数の定義
- ウィジェット上の操作とコールバック関数の紐づけ
- レイアウトの定義
オブジェクトのインポート
作成するアプリケーションの概要に合わせて必要なオブジェクトをインポートします。「任意」と補足したものは、画面レイアウトやプロットのデザイン、搭載するウィジェットに依存するものですので、必須ではありません。
| レイアウト関連 | curdoc column ※任意 row ※任意 |
| データプロット関連 | figure ColumnDataSource Spectral4 ※任意 |
| ウィジェット関連 | TextInput ※任意 Select ※任意 Button ※任意 |
ウィジェットの定義
アプリケーションに搭載したい機能に応じて、必要なウィジェットを定義します。
| 変数名 | データ型 （オブジェクト名） |
対応する機能概要 | 表示イメージ |
| root_path_input | TextInput | ①データのルートパスの入力受付 |  |
| file_list | Select | ①データのルートパスの入力受付 ②指定したデータのロード、グラフ表示 |
 |
| plot_list | Select | ②指定したデータのロード、グラフ表示 ③指定したグラフの削除 |
|
| all_load_button | Button | ②指定したデータのロード、グラフ表示 |  |
| load_button | Button | ②指定したデータのロード、グラフ表示 |  |
| all_remove_button | Button | ③指定したグラフの削除 |  |
| remove_button | Button | ③指定したグラフの削除 |  |
コールバック関数の定義
ウィジェット上で実施されたユーザ操作をトリガとして、コールされる関数の処理内容を定義します。
(関数インターフェール)
(データプロット部分のみの抜粋)
| 関数名 |
実行条件
|
処理概要 |
|
search_data_from_input_path
|
「root_path_input」で定義した入力ボックスへの文字列（ルートパス）の入力 | 入力されたルートパス配下のデータファイルを再帰的に検索する。 検索により見つかったデータファイルを「Load」ボタン横のセレクトボックスにリストアップする。 |
|
set_load_target
|
「file_list」で定義したセレクトボックス内の文字列（ファイル名）を選択 | 選択したファイル名を内部変数に格納 |
|
set_remove_target
|
「plot_list」で定義したセレクトボックス内の文字列（グラフ名）を選択 | 選択したグラフ名を内部変数に格納 |
| all_load_data | 「all_load_button」で定義したボタンの押下 | 「file_list」で定義したセレクトボックス内の全ての文字列を入力として、「load_data」関数を実行 |
|
load_data
|
「load_button」で定義したボタンの押下 | 「set_load_target」で選択したファイルをパースしてグラフ表示する |
|
all_remove_data
|
「all_remove_button」で定義したボタンの押下 | 「plot_list」で定義したセレクトボックス内の全ての文字列を入力として、「remove_data」関数を実行 |
|
remove_data
|
「remove_button」で定義したボタンの押下 | 「set_remove_target」で選択したグラフを削除する |
ウィジェット上の操作とコールバック関数の紐づけ
各ウィジェット用のオブジェクトには、コールバック関数の紐づけ用のメソッドが定義されています。このメソッドにコールバック関数を指定することで、ウィジェット上の操作とコールバック関数を紐づけることができます。
| オブジェクト名 | 紐づけ用のメソッド | 処理概要 | reference |
| TextInput | on_change | 第一引数で指定したフィールド名「’value’」が変更された際に、第二引数で指定したコールバック関数が実行される。 TextInputの「’value’」フィールドには入力ボックス内の文字列が設定されている。 コールバック関数実行時の引数には以下が渡される。 ・第一引数（attrname）: 変更されたフィールド名 ・第二引数（old）: 変更前の文字列 ・第三引数（new）: 変更後の文字列 |
◆ |
| Select | on_change | 第一引数で指定したフィールド名「’value’」が変更された際に、第二引数で指定したコールバック関数が実行される。 Selectの「’value’」フィールドにはセレクトボックス内で選択した文字列が設定されている。 コールバック関数実行時の引数には以下が渡される。 ・第一引数（attrname）: 変更されたフィールド名 ・第二引数（old）: 変更前の文字列 ・第三引数（new）: 変更後の文字列 |
◆ |
| Button | on_click | ボタン押下時に、第一引数で指定したコールバック関数が実行される。 | ◆ |
レイアウトの定義
ウィジェットやプロットを任意に配置したレイアウトを定義します。row()内のウィジェットは横方向、column内のウィジェットは縦方向に自動整列されます。
curdoc()で取得したドキュメントにレイアウトを追加することで、ブラウザ表示と、ウィジェット上の操作をリアルタイムに検出することが可能になります。