Bokeh数据库的绘制与更新

Question

我正在创建一个绘图，它将根据产品的特定属性显示一系列产品。我模仿了Bokeh的“电影”例子的图形设计。我可以通过导航到源文件夹并执行"bokeh serve --show shafts" from Andaconda Prompt来运行绘图。在

我的问题是，我需要保存一个HTML文件，这样我就可以在没有附带数据库的情况下将其分发给多个人。如果我试图保存HTML文件

"output_file("slider.html", title="slider.py example")"

从movies示例或我的代码，然后从HTML文件运行绘图，滑块不会更新图形。我认为问题是当您从"bokeh serve --show shafts" from Andaconda Prompt运行文件时，它正在服务器上运行，并且能够连续地访问python代码。在

或者，当您从HTML运行它时，它会将所有代码转换为JASON格式，并且不再能够访问python代码。为了解决这个问题，Bokeh添加了一些小的Javascript部分，这些部分将在服务器上继续更新。在

Bokeh给出了多个例子来说明如何做到这一点，但我并不完全理解Javascript中更新了什么来更新图形。我对JS不是很熟悉，所以它有点困难。他们给出的一个简单例子是：

^{pr2}$

y[i]显然是为了更新绘图而更新的内容，但是我不明白它与最初的python更新有什么关系，或者为什么这个更改会影响到似乎超出其范围的图形。我真正的问题是在我的代码中，为了让代码在Bokeh服务器上运行，我需要更新哪些变量。在

下面是我的密码。for control in controls: control.on_change('value'.......是在服务器上更新图形的代码部分，但我需要用JavaScript代码替换它，以便它在保存为HTML时更新。在

callback = CustomJS(args=dict(source=source), code="""
var data = source.data;
selected = shafts[
    ((data.Weight2g >= min_weight_slider.value) &&
    (data.Weight2g <= max_weight_slider.value) &&
    (data.Butt_Frequency >= min_butt_freq_slider.value) &&
    (data.Butt_Frequency <= max_butt_freq_slider.value) &&
    (data.Tip_Frequency >= min_tip_freq_slider.value) &&
    (data.Tip_Frequency <= max_tip_freq_slider.value) &&
    (data.Torque >= min_torque_slider.value) &&
    (data.Torque <= max_torque_slider.value))
];
data = selected;
source.data = selected;
}
source.change.emit;
""")

min_weight_slider = Slider(title="Minimum Weight", value=40,

    start=40.0, end=200.0, step=0.5, callback = callback)
callback.args["min_weight_slider"] = min_weight_slider

max_weight_slider = Slider(title="Maximum Weight", value=200, start=40.0, end=200.0, step=0.5, callback = callback)
callback.args["max_weight_slider"] = max_weight_slider

min_butt_freq_slider = Slider(title="Minimum Butt Frequency", value=180.0, start=100.0, end=500.0, step=10.0, callback = callback)
callback.args["min_butt_freq_slider"] = min_butt_freq_slider

max_butt_freq_slider = Slider(title="Maximum Butt Frequency", value=500.0, start=100.0, end=500.0, step=10.0, callback = callback)
callback.args["max_butt_freq_slider"] = max_butt_freq_slider

min_tip_freq_slider = Slider(title="Minimum Tip Frequency", value=180, start=100, end=500, step=10, callback = callback)
callback.args["min_tip_freq_slider"] = min_tip_freq_slider

max_tip_freq_slider = Slider(title="Maximum Tip Frequency", value=400, start=100, end=500, step=10, callback = callback)
callback.args["max_tip_freq_slider"] = max_tip_freq_slider

min_torque_slider = Slider(title="Minimum Torque", value=2, start=1, end=20, step=0.1, callback = callback)
callback.args["min_torque_slider"] = min_torque_slider

max_torque_slider = Slider(title="Maximum Torque", value=15, start=1, end=20, step=0.1, callback = callback)
callback.args["max_torque_slider"] = max_torque_slider

x_axis = Select(title="X Axis", options=sorted(axis_map.keys()), value="Butt_Frequency")
callback.args["x_axis"] = x_axis
y_axis = Select(title="Y Axis", options=sorted(axis_map.keys()), value="Tip_Frequency")
callback.args["y_axis"] = y_axis


def select_shafts():
selected = shafts[
    (shafts.Weight2g >= min_weight_slider.value) &
    (shafts.Weight2g <= max_weight_slider.value) &
    (shafts.Butt_Frequency >= min_butt_freq_slider.value) &
    (shafts.Butt_Frequency <= max_butt_freq_slider.value) &
    (shafts.Tip_Frequency >= min_tip_freq_slider.value) &
    (shafts.Tip_Frequency <= max_tip_freq_slider.value) &
    (shafts.Torque >= min_torque_slider.value) &
    (shafts.Torque <= max_torque_slider.value) 
]
return selected      



#updates the 
def update():
df = select_shafts()

        #re-names the above function
x_name = axis_map[x_axis.value]
y_name = axis_map[y_axis.value]

p.xaxis.axis_label = x_axis.value
p.yaxis.axis_label = y_axis.value
p.title.text = "%d shafts selected" % len(df)
source.data = dict(
    x=df[x_name],
    y=df[y_name],
    color=df["color"],
    Manufacture=df["Manufacture"],
    Model = df["Model"],
    Type = df["Type"],
    Weight = df["Weight"],
    Flex=df["Flex"],
    Butt_Frequency = df["Butt_Frequency"],
    Tip_Frequency = df["Tip_Frequency"],
    Torque=df["Torque"],
    Weight2G = df["Weight2g"],
    Availability = df["Availability"],
    alpha=df["alpha"]
)








controls = [min_weight_slider, max_weight_slider,   min_butt_freq_slider, max_butt_freq_slider, min_tip_freq_slider, max_tip_freq_slider, min_torque_slider, max_torque_slider,x_axis, y_axis]


#for control in controls:
#control.on_change('value', lambda attr, old, new: update())

sizing_mode = 'fixed'  # 'scale_width' also looks nice with this   example


inputs = widgetbox(*controls, sizing_mode=sizing_mode)
    #Widget box produced with bokeh

l = layout([
[inputs, p]
], sizing_mode=sizing_mode)

update()  # initial load of the data

curdoc().add_root(l)
curdoc().title = "Shafts"

show(l)

提前谢谢你

我想补充一个我试图解决问题的最新情况。我意识到当程序在Bokeh服务器上运行时，它能够不断地更新plot函数可以访问的源数据。当程序运行JS函数时，它只能更新单个字典条目键中的值。在

我试图modify这段代码来模拟我的需要。在

Answer 1

为了得到我想要的结果，我通过javascript回调传递了两个数据集。从未修改过的原始数据，然后是基于最终更新绘图的选定条件修改的原始数据的副本。在

callback = CustomJS(args={"orgData": originalData, "modData": sourceData}, code="""

var oData = orgData.data;
var updateData = modData.data;



var holdData = {'x':[],'y':[],'color':[], 'Manufacture':[],'Model':[],'Type':[],
'Weight':[],'Flex':[],'Butt_Frequency':[],'Tip_Frequency':[],
'Torque':[],'WeightMes':[],'Availability':[],'alpha':[]};

console.log(Manufacture_Select.value.includes(oData.Manufacture[1])); 
//console.log(min_weight_slider.value);
//console.log((oData.WeightMes[1] >= min_weight_slider.value) && (oData.WeightMes[1] <= max_weight_slider.value));

var xAxisSelection = String(x_axis.value);
var yAxisSelection = String(y_axis.value);
var avalButSelNames = [];

for (i = 0; i < avalibility_Button.active.length; i++){

    avalButSelNames.push(avalibility_Button.labels[avalibility_Button.active[i]]);

}
console.log(avalButSelNames)
for(i = 0; i < oData.Manufacture.length; i++){
       if((oData.WeightMes[i] >= weight_slider.value[0])&& 
            (oData.WeightMes[i] <= weight_slider.value[1]) &&
            (oData.Butt_Frequency[i] >= butt_freq_slider.value[0]) &&
            (oData.Butt_Frequency[i] <= butt_freq_slider.value[1]) &&
            (oData.Tip_Frequency[i] >= tip_freq_slider.value[0]) &&
            (oData.Tip_Frequency[i] <= tip_freq_slider.value[1]) &&
            (oData.Torque[i] >= torque_slider.value[0]) &&
            (oData.Torque[i] <= torque_slider.value[1]) &&
            (oData.Balance_Point[i] <= Balance_Point_Slider.value[1]) &&
            (oData.Balance_Point[i] >= Balance_Point_Slider.value[0]) &&
            (Manufacture_Select.value.includes(oData.Manufacture[i])) &&
            (Type_Select.value.includes(oData.Type[i]))&&
            (Flex_Select.value.includes(oData.Flex[i]))&&
            (avalButSelNames.includes(oData.Availability[i]))

       ){
           holdData['x'].push(oData[xAxisSelection][i]);
           holdData['y'].push(oData[yAxisSelection][i]);
           holdData['color'].push(oData.color[i]);
           holdData['Manufacture'].push(oData.Manufacture[i]);
           holdData['Model'].push(oData.Model[i]);
           holdData['Type'].push(oData.Type[i]);
           holdData['Weight'].push(oData.Weight[i]);
           holdData['Flex'].push(oData.Flex[i]);
           holdData['Butt_Frequency'].push(oData.Butt_Frequency[i]);
           holdData['Tip_Frequency'].push(oData.Tip_Frequency[i]);
           holdData['Torque'].push(oData.Torque[i]);
           holdData['WeightMes'].push(oData.WeightMes[i]);
           holdData['Availability'].push(oData.Availability[i]);
           holdData['alpha'].push(oData.alpha[i]);
           //console.log(i);
       }
    }




modData.data = holdData;

labels = plot.get('renderers');
labels[0]["attributes"]["axis_label"] = xAxisSelection;
labels[2]["attributes"]["axis_label"] = yAxisSelection;



""")