将鼠标悬停在图例上将隐藏除相应行以外的所有行

问题描述 投票:0回答:1

当您将鼠标悬停在图例上时,除相应行外的所有行都将被隐藏。如何通过bokeh,python或javascript实现此目的。我不知道该怎么做才能实现此功能。如果我们能提供一个包含三行代码的简单示例,那就太好了。谢谢您的帮助。我的代码示例如下:

import bokeh.palettes as bp
from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import LinearAxis, Range1d, NumeralTickFormatter, Legend
from bokeh.layouts import column
import numpy as np


if __name__ == '__main__':
    num = 5
    color_list2 = bp.magma(num)
    color_list1 = bp.viridis(num)
    plotTools = 'box_zoom, wheel_zoom, pan, tap, crosshair, hover, reset, save'
    p = figure(plot_width=800, plot_height=400, x_range=(0, 1000), y_range=(-2.5, -1.5),
               tools=plotTools, toolbar_location='right', active_scroll='wheel_zoom', )
    p.title.text = 'Hover and Hide'
    items_c1 = []
    i = 0
    pictures = []
    labels = ['a', 'b', 'c', 'd', 'e']
    for label in labels:
        n = np.random.randint(low=3, high=6)
        xs = np.random.random(n) * 1000
        y1s = np.random.random(n) - 2.5
        temp_line = p.line(xs, y1s, line_width=2, color=color_list1[i % num],
                           alpha=0.3, hover_color='red', hover_alpha=0.9)  # , legend_label=label
        items_c1.append((label + '_BER', [temp_line]))
        i = i + 1
        if i % num == 0:
            legend_1 = Legend(items=items_c1)
            p.add_layout(legend_1, 'left')
            p.xaxis.axis_label = 'run_time'
            p.yaxis[0].axis_label = 'BER'
            p.legend[0].orientation = 'vertical'
            p.legend[0].location = 'bottom_center'
            p.legend[0].click_policy = 'hide'
            pictures.append(p)

            p = figure(plot_width=800, plot_height=400, x_range=(0, 1000), y_range=(-2.5, -1.5),
                       tools=plotTools, toolbar_location='right', active_scroll='wheel_zoom', )
            items_c1 = []
    file = "test_ask_5"
    file_path = file + '.html'
    output_file(file_path)
    show(column(pictures))
python bokeh
1个回答
0
投票

下面的解决方案将隐藏所有行,但要单击的行(而不是悬停的行)。该代码适用于Bokeh v1.3.4

import numpy as np
from bokeh.plotting import figure, show
from bokeh.models import CustomJS

colors = ['orange', 'cyan', 'lightgreen']

p = figure()
lines = [p.line(np.arange(10), np.random.random(10), line_color = colors[i], line_width = 3, legend=colors[i], name=colors[i]) for i in range(3)]

code = '''if(Bokeh != 'undefined' && (Bokeh.active_line === 'undefined' || Bokeh.active_line == null)) 
          { 
              Bokeh.active_line = cb_obj.name; 
          }'''
[line.js_on_change('visible', CustomJS(code = code)) for line in lines]

code = ''' for(i = 0; i < lines.length; i++) {
                if (lines[i].name == Bokeh.active_line) {
                    lines[i].visible = true
                }
                else {
                    lines[i].visible = false
                }
            } 
            Bokeh.active_line = null'''
p.js_on_event('tap', CustomJS(args = {'lines' : lines}, code = code))

code = '''  for(i = 0; i < lines.length; i++) {
                lines[i].visible = true
            } 
            Bokeh.active_line = null'''
p.js_on_event('reset', CustomJS(args = dict(lines = lines), code = code))

p.legend.click_policy = 'hide'

show(p)

第一个回调适用于所有字形渲染器(行),并且在必须隐藏该行(即用户单击图例项时,会触发该回调)。回调仅设置全局变量Bokeh.active_line,该变量记住渲染器(行)的名称,例如“橙色”或“青色”

第二个回调附加到绘图画布,并且每次用户单击绘图上的任何位置时都会触发。基本上要做的是反转字形(线)的可见性。它仅显示由Bokeh.active_line

第三个回调附加到绘图上,并且当用户单击工具栏上的重置工具时触发。它恢复所有行的可见性。

enter image description here

© www.soinside.com 2019 - 2024. All rights reserved.