Question

我正在尝试使用CustomJS将互动添加到热图（使用rect），以基于所选值显示另一个散景图。这就是我尝试过的

heat_map_df_stack = pd.DataFrame(heat_map_df.stack(), columns=['rate']).reset_index()
....
issue_heat_map = figure(title="",
       x_range=issues, y_range=list(reversed(products)),
       x_axis_location="above", plot_width=400, plot_height=400,
       tools=TOOLS, toolbar_location='below',
       tooltips=[('Product & Issue Id', '@Product @Issue'), ('Issue Count', '@rate')],
       name='issue_heat_map')
....   

issue_heat_map.rect(x="Issue", y="Product", width=1, height=1,
   source=heat_map_df_stack,
   fill_color={'field': 'rate', 'transform': mapper},
   line_color=None)
....

taptool = issue_heat_map.select(type=TapTool)
taptool.callback = CustomJS(args = dict(source = ""), code =
"""
console.log('test')
console.log(cb_obj)
var inds = cb_obj.selected;
window.alert(inds);
""")

单击矩形或所选内容后，现在什么也没有发生。

[编辑]：我更新了上面的代码。现在，我可以看到控制台日志和警报，但是对如何从热图中获取选定的值一无所知。

Answer 1

这是使用bokeh服务器的版本。该代码是bokeh gallery的热图示例的改编。

from math import pi
import pandas as pd
import numpy as np

from bokeh.io import curdoc
from bokeh.models import LinearColorMapper, BasicTicker, PrintfTickFormatter, ColorBar
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource
from bokeh.layouts import gridplot
from bokeh.sampledata.unemployment1948 import data

data['Year'] = data['Year'].astype(str)
data = data.set_index('Year')
data.drop('Annual', axis=1, inplace=True)
data.columns.name = 'Month'

years = list(data.index)
months = list(data.columns)

# reshape to 1D array or rates with a month and year for each row.
df = pd.DataFrame(data.stack(), columns=['rate']).reset_index()
source = ColumnDataSource(df)

# this is the colormap from the original NYTimes plot
colors = ["#75968f", "#a5bab7", "#c9d9d3", "#e2e2e2", "#dfccce", "#ddb7b1", "#cc7878", "#933b41", "#550b1d"]
mapper = LinearColorMapper(palette=colors, low=df.rate.min(), high=df.rate.max())

TOOLS = "hover,save,pan,box_zoom,reset,wheel_zoom, tap"

p = figure(title="US Unemployment ({0} - {1})".format(years[0], years[-1]),
           x_range=years, y_range=list(reversed(months)),
           x_axis_location="above", plot_width=900, plot_height=400,
           tools=TOOLS, toolbar_location='below',
           tooltips=[('date', '@Month @Year'), ('rate', '@rate%')])

p.grid.grid_line_color = None
p.axis.axis_line_color = None
p.axis.major_tick_line_color = None
p.axis.major_label_text_font_size = "5pt"
p.axis.major_label_standoff = 0
p.xaxis.major_label_orientation = pi / 3

heatmap = p.rect(x="Year", y="Month", width=1, height=1,
       source=source,
       fill_color={'field': 'rate', 'transform': mapper},
       line_color=None)

color_bar = ColorBar(color_mapper=mapper, major_label_text_font_size="5pt",
                     ticker=BasicTicker(desired_num_ticks=len(colors)),
                     formatter=PrintfTickFormatter(format="%d%%"),
                     label_standoff=6, border_line_color=None, location=(0, 0))
p.add_layout(color_bar, 'right')

# Adding the tap interaction + plot
other_source = ColumnDataSource({'x': range(10), 'y': range(10)})
other_plot = figure(title="Other Plot")
other_line = other_plot.line(x='x', y='y', source=other_source)


def update(attr, old, new):
    if not old:
        old = [1]
    if new:
        other_source.data.update(y=np.array(other_source.data['y'])/old[0]*new[0])


source.selected.on_change('indices', update)

curdoc().add_root(gridplot([[p, other_plot]]))

最重要的部分是最后几行，我在其中设置了第二个图并添加了更新功能，以根据从热图中选择的矩形来更改第二个图中的线的斜率。要运行此示例，需要bokeh的1.0开发版本。可以找到安装指南here

向热图添加交互，以根据选择显示另一个散景图

1 个答案: