Question

我有一个脚本来绘制用户想要查看的某些共享的价格：他可以通过下拉按钮选择共享，Bokeh将相应地绘制曲线。（我在jupyter笔记本上工作）：

from bokeh.io import output_notebook, show
from bokeh.plotting import figure
output_notebook()

我的代码如下：

from bokeh.models import  Callback, ColumnDataSource, Select,CustomJS
from bokeh.plotting import figure, show, gridplot
from bokeh.models.widgets.layouts import VBox
import pandas as pd

shares = ['AAPL', 'MSFT', 'IBM', 'All']

AAPL = pd.read_csv("http://ichart.yahoo.com/table.csv?s=AAPL&a=0&b=1&c=2000&d=0&e=1&f=2015",parse_dates=['Date'])
MSFT = pd.read_csv("http://ichart.yahoo.com/table.csv?s=MSFT&a=0&b=1&c=2000&d=0&e=1&f=2015",parse_dates=['Date'])
IBM = pd.read_csv("http://ichart.yahoo.com/table.csv?s=IBM&a=0&b=1&c=2000&d=0&e=1&f=2015",parse_dates=['Date'])

max_price = max(AAPL['Adj Close'].max(), MSFT['Adj Close'].max(), IBM['Adj Close'].max()) + 10
min_date = min(AAPL['Date'].min(), MSFT['Date'].min(), IBM['Date'].min())
max_date = max(AAPL['Date'].max(), MSFT['Date'].max(), IBM['Date'].max())

myplot = figure(title="Share price", x_axis_type="datetime", x_range=[min_date,max_date],y_range=[0,max_price],
        background_fill='#FFF5EE', plot_width=900, plot_height = 400, outline_line_color= None)

source_AAPL = ColumnDataSource(data=dict(x=AAPL['Date'], y = AAPL['Adj Close'], ytemp = AAPL['Adj Close']))
source_MSFT = ColumnDataSource(data=dict(x=MSFT['Date'], y = MSFT['Adj Close'], ytemp = MSFT['Adj Close']))
source_IBM  = ColumnDataSource(data=dict(x=IBM['Date'],  y = IBM['Adj Close'],  ytemp = IBM['Adj Close']))

myplot.line(x ='x', y ='y', color='#A6CEE3', source = source_AAPL, name='AAPL')
myplot.line(x ='x', y ='y', color='#33A02C', source = source_MSFT, name='IBM')
myplot.line(x ='x', y ='y', color='#FB9A99', source = source_IBM, name='MSFT') 


Callback_Shares = CustomJS(args={'source_AAPL': source_AAPL,'source_MSFT': source_MSFT,'source_IBM': source_IBM}, code="""
    var f = cb_obj.get('value');
    var data_AAPL = source_AAPL.get('data');
    var data_MSFT = source_MSFT.get('data');     
    var data_IBM = source_IBM.get('data');
    if (f == 'AAPL') {
        data_MSFT['y'] = [0 for i in range(len(data_MSFT['x']))];
        data_IBM['y'] = [0 for i in range(len(data_IBM['x']))];
        data_AAPL['y'] = data_AAPL['ytemp'] ;
        source_AAPL.trigger('change');
        source_MSFT.trigger('change');
        source_IBM.trigger('change');
        }
    if (f == 'MSFT') {
        data_AAPL['y'] = [0 for i in range(len(data_AAPL['x']))];
        data_IBM['y'] = [0 for i in range(len(data_IBM['x']))];
        data_MSFT['y'] = data_MSFT['ytemp'] ;
        source_AAPL.trigger('change');
        source_MSFT.trigger('change');
        source_IBM.trigger('change');
        }
    if (f == 'IBM') {
        data_AAPL['y'] = [0 for i in range(len(data_AAPL['x']))];
        data_MSFT['y'] = [0 for i in range(len(data_MSFT['x']))];
        data_IBM['y'] = data_IBM['ytemp'] ;
        source_AAPL.trigger('change');
        source_MSFT.trigger('change');
        source_IBM.trigger('change');
        }
    if (f == 'All') {
        data_AAPL['y'] = data_AAPL['ytemp'];
        data_MSFT['y'] = data_MSFT['ytemp'];
        data_IBM['y'] = data_IBM['ytemp'];
        source_AAPL.trigger('change');
        source_MSFT.trigger('change');
        source_IBM.trigger('change');
        }"""
)

dropdown = Select(title="Shares:", value=shares[3], options=shares, callback = Callback_Shares)

myfigure =  VBox(dropdown, gridplot([[myplot]]))
show(myfigure)

我的问题是图中总是显示3条曲线，并没有考虑DropDown的选择...

Answer 1

遗憾的是，另一个答案不是最佳答案。作为项目维护者，我觉得有义务以最佳方式展示项目。这是一个更简单的完整示例，其功能相同并适用于Bokeh 0.12.4：

from bokeh.models import CustomJS, ColumnDataSource, Select
from bokeh.plotting import figure, output_file, show
from bokeh.layouts import column
import pandas as pd

url = "http://ichart.yahoo.com/table.csv?s=%s&a=0&b=1&c=2000&d=0&e=1&f=2015"

AAPL = pd.read_csv(url % "AAPL", parse_dates=['Date'])
MSFT = pd.read_csv(url % "MSFT", parse_dates=['Date'])
IBM  = pd.read_csv(url % "IBM",  parse_dates=['Date'])

max_price = max(AAPL['Close'].max(), MSFT['Close'].max(), IBM['Close'].max())

source = ColumnDataSource({
    'xAAPL' : AAPL['Date'], 'yAAPL' : AAPL['Close'], 'yAAPLp' : AAPL['Close'],
    'xMSFT' : MSFT['Date'], 'yMSFT' : MSFT['Close'], 'yMSFTp' : MSFT['Close'],
    'xIBM'  :  IBM['Date'], 'yIBM'  :  IBM['Close'], 'yIBMp'  :  IBM['Close']
})

p = figure(width=500, height=250, x_axis_type="datetime", y_range=[0, max_price+10])

r_aapl = p.line('xAAPL', 'yAAPL', source=source, color='navy',  alpha=0.5)
r_msft = p.line('xMSFT', 'yMSFT', source=source, color='red',   alpha=0.5)
r_ibm  = p.line('xIBM',  'yIBM',  source=source, color='green', alpha=0.5)

callback = CustomJS(args=dict(r_aapl=r_aapl, r_msft=r_msft, r_ibm=r_ibm), code="""
    f = cb_obj.value;
    r_aapl.visible = false;
    r_msft.visible = false;
    r_ibm.visible = false;
    if      (f == "AAPL") { r_aapl.visible = true; }
    else if (f == "MSFT") { r_msft.visible = true; }
    else if (f == "IBM")  { r_ibm.visible = true; }
    else {
        r_aapl.visible = true;
        r_msft.visible = true;
        r_ibm.visible = true;
    }
""")

shares = ['AAPL', 'MSFT', 'IBM', 'All']
multi_select = Select(title="Select Shares:", value=shares[3], options=shares, callback=callback)

output_file("datetime.html")

show(column(multi_select, p))

我还应该补充一点，“交互式图例”允许通过点击图例隐藏或静音字形，将作为0.12.5中的标准功能添加。

Answer 2

不是更新实际数据源，而是有更简单的方法来控制可见性。您可以将字形的alpha设置为零，或将颜色设置为None，或者可能最直接地将其渲染器的visible属性设置为False，如{ {3}}。该示例的相关部分（简化了一些）是此代码：

r0 = p.line(x, y0, color="red")
r1 = p.line(x, y1, color="green")
r2 = p.line(x, y2, color="blue")

checkbox = CheckboxGroup(labels=["Line 0", "Line 1", "Line 2"],
                         active=[0, 1, 2], width=100)

checkbox.callback = CustomJS.from_coffeescript(
    args=dict(r0=r0, r1=r1, r2=r2, checkbox=checkbox), 
    code="""
r0.visible = 0 in checkbox.active;
r1.visible = 1 in checkbox.active;
r2.visible = 2 in checkbox.active;
""")

Answer 3

经过一番努力后，我找到了以下解决方案：

from bokeh.models import CustomJS, ColumnDataSource, Select
from bokeh.plotting import figure, output_file, show
from bokeh.models.layouts import VBox
import pandas as pd

AAPL = pd.read_csv("http://ichart.yahoo.com/table.csv?s=AAPL&a=0&b=1&c=2000&d=0&e=1&f=2015",parse_dates=['Date'])
MSFT = pd.read_csv("http://ichart.yahoo.com/table.csv?s=MSFT&a=0&b=1&c=2000&d=0&e=1&f=2015",parse_dates=['Date'])
IBM = pd.read_csv("http://ichart.yahoo.com/table.csv?s=IBM&a=0&b=1&c=2000&d=0&e=1&f=2015",parse_dates=['Date'])

max_price = max(AAPL['Close'].max(), MSFT['Close'].max(), IBM['Close'].max()) + 10
min_date = min(AAPL['Date'].min(), MSFT['Date'].min(), IBM['Date'].min())
max_date = max(AAPL['Date'].max(), MSFT['Date'].max(), IBM['Date'].max())

output_file("datetime.html")
source = ColumnDataSource({'xAAPL': AAPL['Date'], 'xMSFT': MSFT['Date'], 'xIBM': IBM['Date'], 
                       'yAAPL': AAPL['Close'], 'yAAPLp': AAPL['Close'], \
                       'yMSFT': MSFT['Close'], 'yMSFTp': MSFT['Close'], \
                       'yIBM': IBM['Close'],   'yIBMp': IBM['Close'] })

p = figure(width=500, height=250, x_axis_type="datetime", x_range=[min_date,max_date],y_range=[0,max_price])

p.line('xAAPL', 'yAAPL', source=source, color='navy', alpha=0.5)
p.line('xMSFT', 'yMSFT', source=source, color='red', alpha=0.5)
p.line('xIBM',  'yIBM',  source=source, color='green', alpha=0.5)

callback = CustomJS(args=dict(source=source), code="""
    var data = source.get('data');
    var f = cb_obj.get('value')
    yAAPL = data['yAAPL']
    yMSFT = data['yMSFT']
    yIBM  = data['yIBM']
    yAAPLp = data['yAAPLp']
    yMSFTp = data['yMSFTp']
    yIBMp  = data['yIBMp']
    if (f == "AAPL") {
        for (i = 0; i < yAAPL.length; i++) {yAAPL[i] = yAAPLp[i]}            
        for (i = 0; i < yMSFT.length; i++) {yMSFT[i] = 'nan'}
        for (i = 0; i < yIBM.length; i++)  {yIBM[i] = 'nan'}
    } 
    else if (f == "MSFT") {
        for (i = 0; i < yAAPL.length; i++) {yAAPL[i] = 'nan'}            
        for (i = 0; i < yMSFT.length; i++) {yMSFT[i] = yMSFTp[i]}
        for (i = 0; i < yIBM.length; i++)  {yIBM[i] = 'nan'}
    } 
    else if (f == "IBM") {
        for (i = 0; i < yAAPL.length; i++) {yAAPL[i] = 'nan'}            
        for (i = 0; i < yMSFT.length; i++) {yMSFT[i] = 'nan'}
        for (i = 0; i < yIBM.length; i++)  {yIBM[i] = yIBMp[i]}
    }
    else {
        for (i = 0; i < yAAPL.length; i++) {yAAPL[i] = yAAPLp[i]}            
        for (i = 0; i < yMSFT.length; i++) {yMSFT[i] = yMSFTp[i]}
        for (i = 0; i < yIBM.length; i++)  {yIBM[i] = yIBMp[i]}
    }
    source.trigger('change');
""")

shares = ['AAPL', 'MSFT', 'IBM', 'All']
multi_select = Select(title="Select Shares:", value=shares[3],     options=shares, callback=callback)
layout = VBox(multi_select, p)
show(layout)

DropDown不使用Bokeh

3 个答案: