javascript - 如何在 Python 中更新散景的 JavaScript 回调中的源?
问题描述
我正在为我的案例调整这个答案,我想要一个交互式的独立图表,其中滑块选择要在条形图中绘制的数据列。(独立是至关重要的,我无法运行 Bokeh 服务器,因此需要JavaScript 回调。)
数据是一个浮点矩形,38 列中的每一列都有 100 行,它们都有字符串标签等'40'
。(这是 pandas.read_csv()
默认处理标题中的数字的方式。)这是左上角的示例(3x3 ,加上行和列标签):
# , 40, 41, 42,
1.00000, 1.00000, 0.99287, 0.98489,
2.00000, 1.00000, 0.99348, 0.98626,
3.00000, 1.00000, 0.99433, 0.98922,
下面的代码为第一列生成图表,但在移动滑块时不会更新图表。
通过戳它,我怀疑问题出在 JavaScript 代码上,尽管ColumnDataSource对我来说仍然有点神秘。(一个更直接的数字列标签字典到列中的数字列表不起作用datasource_available
,尽管对应于链接答案的用例。)
datadf = pd.read_csv('male_survival_by_pctile.csv')
datadf.set_index('# ',inplace=True)
years = range(40,77)
data = {}
data_available = {}
for year in years:
data[year] = {'top':datadf[str(year)],'x':range(1,101)}
data_available = ColumnDataSource.from_df(datadf)
from bokeh.core.properties import field
from bokeh.io import curdoc, output_notebook, show
from bokeh.layouts import layout, column
from bokeh.models import (ColumnDataSource, HoverTool, SingleIntervalTicker,
Slider, Button, Label, CustomJS)
from bokeh.plotting import figure
output_notebook()
source_visible = ColumnDataSource(data=dict(x=range(1,101),top=data_available[str(years[0])]))
source_available = ColumnDataSource(data=data_available)
plot = figure(output_backend="webgl")
plot.xaxis.ticker = SingleIntervalTicker(interval=.01)
plot.xaxis.axis_label = "Income percentile"
plot.yaxis.ticker = SingleIntervalTicker(interval=.05)
plot.yaxis.axis_label = "Survival rate"
label = Label(x=1.1, y=18, text=str(years[0]), text_font_size='70pt', text_color='#eeeeee')
plot.add_layout(label)
plot.vbar(top='top',x='x',width=1,source=source_visible)
slider = Slider(start=years[0], end=years[-1], value=years[0], step=1, title="Age")
slider.callback = CustomJS(
args=dict(source_visible=source_visible,
source_available=source_available), code="""
var selected_function = cb_obj.get('value').toString();
// Get the data from the data sources
var data_visible = source_visible.get('data');
var data_available = source_available.get('data');
// Change bar height to the selected value
data_visible.top = data_available[selected_function];
// Update the plot
source_visible.trigger('change');
""")
layout = column(slider, plot)
show(layout)
解决方案
CustomJS
正如您所怀疑的那样,问题出在代码中。有两件事需要修复。
Bokeh 已弃用
get()
andset()
方法并将其替换为getv()
orsetv()
。然而,访问或修改模型属性的首选方式是通过常用的 JavaScript 属性,例如source_visible.data
.Bokeh 已弃用
trigger('change')
并将其替换为change.emit()
.
固定CustomJS
代码:
slider.callback = CustomJS(
args=dict(source_visible=source_visible,
source_available=source_available), code="""
var selected_function = cb_obj.value.toString();
// Get the data from the data sources
var data_visible = source_visible.data;
var data_available = source_available.data;
// Change bar height to the selected value
data_visible.top = data_available[selected_function];
// Update the plot
source_visible.change.emit();
""")
JavaScript 错误和警告显示在浏览器的控制台中。以下是在不同浏览器中打开控制台的说明。
推荐阅读
- c# - aspnetcore - 如何在“配置”方法中访问注入?
- arduino - ESP32、ESP8266 和 ESP8266 节点 MCU 不工作
- python - 带有 Scrapy Python 的 CSS 选择器 HTML
- python - Python tkinter 保存和更改 txt 文件
- vba - 如何处理损坏的表链接上的错误
- c++ - 在同一窗口中绘制 3d 和 2d 无法正常工作 openGl
- laravel - 我可以在哪里更改 FCM 网络通知点击操作网址?
- r - I tensorflow/compiler/mlir/mlir_graph_optimization_pass.cc:116] 未启用任何 MLIR 优化通道(已注册 2)
- java - 在 Apache Tomcat 中进行部署时,Eureka 客户端连接超时
- html - HTML H[1-6] 从 _type.scss 中获取默认值