Bokeh HoverTool显示“ ???”即使情节中的来源已更新

编程问答 2022-08-11

问题描述

我对bokeh很陌生，我一直在尝试使用gmap绘制伦敦各地的不同位置，并在鼠标悬停时显示价格。但是，我不知道为什么Hovertools显示“ ???”。这是我的代码：

from bokeh.models import CustomJS,ColumnDataSource,CheckBoxGroup,Column,Row
from bokeh.models import GMapOptions,PanTool,BoxSelectTool,CustomJSFilter,HoverTool,WheelZoomTool,CustomJS,ColumnDataSource
from bokeh.plotting import gmap
from bokeh.plotting import figure,show
import pandas as pd

df_map = pd.DataFrame({'y':[51.516568,51.517134,51.516361],'x' : [0.074812,-0.075898,-0.075888],'Price': [100,200,300],'Station':['Aldgate','Paddington','Euston']})
data_source = ColumnDataSource(df_map)
source = ColumnDataSource(dict(x=[],y=[],price =[]))
## Initiate Google Map
map_options = GMapOptions(lat=51.509865,lng=-0.118092,map_type="roadmap",zoom=10)
plot = gmap("GMAP_TOKEN_HERE",map_options,title="London Properties Map")

plot.circle('x','y',source = source)
## Add tools
TOOLTIPS = [
    ("Price","@price"),]
plot.add_tools(HoverTool(tooltips = TOOLTIPS))

## Callback function for select Box
callback = CustomJS(args = {'source': source,'data_source': data_source},code = """
var data = data_source.data;
var s_data = source.data;

var x_data = data['x'];
var y_data = data['y'];
var select_vals = cb_obj.active.map(x => cb_obj.labels[x]);

var Nearest_tube = data['Station'];

var x = s_data['x'];
x.length = 0;
var y = s_data['y'];
y.length = 0;
var price = s_data['price'];
price.length = 0;

for (var i = 0; i < x_data.length; i++){
    if(select_vals.indexOf(Nearest_tube[i]) >= 0){
        x.push(x_data[i]);
        y.push(y_data[i]);
        price.push(price[i]);
    }
}
source.change.emit();
""")
chkbxgrp = CheckBoxGroup(labels = ['Aldgate','Euston'],active=[])
chkbxgrp.js_on_change('active',callback)
layout = Row(chkbxgrp,plot)
show(layout)

任何帮助将不胜感激。谢谢。

解决方法

带复选框过滤器的伦敦散景交互式地图的工作代码如下：

from bokeh.models import CustomJS,ColumnDataSource,CheckboxGroup,Column,Row
from bokeh.models import GMapOptions,PanTool,BoxSelectTool,CustomJSFilter,HoverTool,WheelZoomTool,CustomJS,ColumnDataSource
from bokeh.plotting import gmap

from bokeh.plotting import figure,show
import pandas as pd

df_map = pd.DataFrame({'y':[51.516568,51.517134,51.516361],'x' : [0.074812,-0.075898,-0.075888],'Price': [100,200,300],'Station':['Aldgate','Paddington','Euston']})
data_source = ColumnDataSource(df_map)
source = ColumnDataSource(dict(x=[],y=[],price =[]))
map_options = GMapOptions(lat=51.509865,lng=-0.118092,map_type="roadmap",zoom=10)
plot = gmap("GOOGLE_MAP_API_HERE",map_options,title="London Properties Map")

plot.circle('x','y',source = source)

TOOLTIPS = [
    ("Price","@price"),]
plot.add_tools(HoverTool(tooltips = TOOLTIPS))

callback = CustomJS(args = {'source': source,'data_source': data_source},code = """
var data = data_source.data;
var s_data = source.data;

var x_data = data['x'];
var y_data = data['y'];
var price_data = data['Price']
//var select_vals = cb_obj.value
var select_vals = cb_obj.active.map(x => cb_obj.labels[x]);

var Nearest_tube = data['Station'];

var x = s_data['x'];
x.length = 0;
var y = s_data['y'];
y.length = 0;
var price = s_data['price'];
price.length = 0;

for (var i = 0; i < x_data.length; i++){
    if(select_vals.indexOf(Nearest_tube[i]) >= 0){
        x.push(x_data[i]);
        y.push(y_data[i]);
        price.push(price_data[i]);
    }
}
source.change.emit();
""")
chkbxgrp = CheckboxGroup(labels = ['Aldgate','Euston'],active=[])
chkbxgrp.js_on_change('active',callback)
layout = Row(chkbxgrp,plot)
show(layout)
bokehpandaspandaspython