如何在Bokeh中创建侧边面板展示悬停数据点详情？

Absolutely! Bokeh totally has what you need here. When built-in hover tooltips are too cramped for large datasets, you can easily create a fixed side panel that updates with full details whenever you hover (or click) a data point. Here's how to pull it off, with a complete example and key API pointers.

Core Components to Use #

• Div: A flexible widget that renders HTML content—perfect for building a side panel with structured, long-form details.
• HoverTool: Captures hover events on your plot's data points.
• CustomJS: Syncs the hover event with the side panel, updating its content dynamically.
• row() Layout: Combines your main plot and side panel into a single cohesive view.

Complete Example Code #

from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, HoverTool, Div, CustomJS
from bokeh.layouts import row

# Simulate a dataset with extensive details per point
data = {
    'x': [1, 2, 3, 4, 5],
    'y': [6, 7, 2, 4, 5],
    'name': ['Point A', 'Point B', 'Point C', 'Point D', 'Point E'],
    'description': [
        'This is a detailed description for Point A. It includes multiple lines of text explaining the context, metrics, and related information.',
        'Point B has even more extensive details covering its origin, performance metrics, and comparative analysis against other points.',
        'Point C\'s details include technical specifications, usage scenarios, and long-term performance trends.',
        'Point D is associated with a complex dataset that requires a full panel to display all relevant attributes and historical data.',
        'Point E includes user feedback, operational logs, and a breakdown of key performance indicators.'
    ],
    'metrics': ['92%', '87%', '95%', '78%', '90%'],
    'category': ['Type 1', 'Type 2', 'Type 1', 'Type 3', 'Type 2']
}

source = ColumnDataSource(data=data)

# Create main plot
p = figure(width=600, height=400, title='Main Plot with Side Detail Panel',
           x_axis_label='X Value', y_axis_label='Y Value')
scatter = p.circle('x', 'y', source=source, size=15, color='navy', alpha=0.6)

# Build the side panel with styling
side_panel = Div(width=300, height=400,
                 style={'border': '1px solid #ccc', 'padding': '10px', 'background': '#f8f8f8'},
                 text='<h3>Hover over a point to see details</h3>')

# CustomJS callback to update panel content on hover
callback = CustomJS(args=dict(source=source, panel=side_panel), code="""
    // Get the index of the hovered point
    const indices = cb_data.index.indices;
    if (indices.length > 0) {
        const idx = indices[0];
        const data = source.data;
        
        // Format all relevant data into HTML
        panel.text = `
            <h3>${data.name[idx]}</h3>
            <p><strong>X Value:</strong> ${data.x[idx]}</p>
            <p><strong>Y Value:</strong> ${data.y[idx]}</p>
            <p><strong>Category:</strong> ${data.category[idx]}</p>
            <p><strong>Performance:</strong> ${data.metrics[idx]}</p>
            <h4>Full Description:</h4>
            <p>${data.description[idx]}</p>
        `;
    } else {
        // Reset panel when no point is hovered
        panel.text = '<h3>Hover over a point to see details</h3>';
    }
""")

# Attach callback to HoverTool (disable default tooltips)
hover = HoverTool(renderers=[scatter], callback=callback, tooltips=None)
p.add_tools(hover)

# Combine plot and panel into a single layout
layout = row(p, side_panel)

show(layout)

Key API Notes #

1. Div Widget:

   • Use the text property to inject any HTML content (headings, paragraphs, lists, etc.)
   • Customize appearance with the style parameter (CSS rules) to match your app's design.

2. HoverTool Callback:

   • The cb_data object contains context about the hover event—cb_data.index.indices gives you the index of the hovered point in your ColumnDataSource.
   • Set tooltips=None to disable the default small hover popup, since we're using the side panel instead.

3. ColumnDataSource:

   • All plot data should be stored here to ensure smooth sync between the plot and interactive elements like the side panel.

4. Alternative: Click Trigger:

   • If you prefer to update the panel on click instead of hover, replace HoverTool with TapTool and bind the same CustomJS callback to it.

内容的提问来源于stack exchange，提问作者bhomass