好玩有趣的 Bokeh用 Python 來設計一個圖+兩個下拉式選單

請先閱讀前一篇文章：好玩有趣的 Bokeh用 Python 來設計網頁互動視覺化

問題：一個圖+兩個下拉式選單，例如第一個下拉是11月和12月，第二個下拉是品牌A和品牌B，共4種數據。

程式：

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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

from bokeh.models import ColumnDataSource from bokeh.plotting import figure from bokeh.models.widgets import Select from bokeh.io import curdoc from bokeh.layouts import column, row import pandas as pd #圖的資料 d1 = {'time': [1,2,3,4], 'y': [2,4,6,8]} d2 = {'time': [1,2,3,4,5], 'y': [2,1,1,8,22]} d3 = {'time': [1,2,3,4], 'y': [8,6,4,2]} d4 = {'time': [1,2,3,4,5], 'y': [22,8,1,1,2]} df1 = pd.DataFrame(data=d1, ) df2 = pd.DataFrame(data=d2, ) df3 = pd.DataFrame(data=d3, ) df4 = pd.DataFrame(data=d4, ) #設定數據資料來源 source = ColumnDataSource(df1 ) source.data = df1 #配圖 p = figure() r = p.vbar(x='time', top='y', width=1, source = source) #第一個下拉選單 select = Select(title="月份", options=['11月', '12月']) #第二個下拉選單 select2 = Select(title="品牌", options=['品牌 A', '品牌 B']) #為下拉選單置預設值 select.value, select2.value = '11月', '品牌 A' #第一個下拉選單的callback def update_plot(attrname, old, new): newSource = df1 if select.value == '11月' and select2.value == '品牌 A': newSource = df1 if select.value == '11月' and select2.value == '品牌 B': newSource = df2 if select.value == '12月' and select2.value == '品牌 A': newSource = df3 if select.value == '12月' and select2.value == '品牌 B': newSource = df4 source.data = newSource #第一個下拉選單動作 select.on_change('value', update_plot) #第二個下拉選單動作 select2.on_change('value', update_plot) #把表單放入網頁的佈局 layout = column(row([select, select2], width=400), p) curdoc().add_root(layout)

以上程式儲存在test.py
執行指令為
bokeh serve --show test.py

執行畫面：