使用 CustomJS 制作带有 Bokeh 的动态散点图 - “不存在的列名”问题

Question

我以为我找到了一个具体的例子，我可以在这里利用，但不幸的是，同样的逻辑对我不起作用。我有两个问题：我正在尝试做的甚至是可能的：在 html 文档中发送动态散点图，允许您控制在 x 和 y 轴上绘制的内容。我已经成功处理了静态图，但还没有破解动态图。我的代码哪里出错了（见下文？）这是相关的代码段（按顺序。我有一个数据框，我使用 ColumnDataSource 将其转换为“源”。我创建了一个初始图（注意，此时没有名为“x”和“y”的列。我稍后在回调函数中创建它们）：plot.circle('x', 'y',            source=source,            color={'field': 'Picker',                    'transform': mapper},                    legend='Picker')我创建了两个下拉菜单（请注意，每个选项中的选项对应于“源”中的列，我希望人们能够从中进行选择）x_menu=Select(options=['Box Office', 'Difference', 'Price Paid'],                        value='Box Office',                         title='What do you want to put on the x axis')y_menu=Select(options=['Metacritic', 'Rotten Tomatoes'],                        value='Metacritic',                         title='What do you want to put on the y axis')我创建回调：callback = CustomJS (args=dict(source=source), code="""    console.log('changed selected option', cb_obj.value)    var data=source.data    data['x']=data[cb_obj.value]    data['y']=data[cb_obj.value]    source.change.emit();    """)我将回调分配给下拉菜单：x_menu.callback = callbacky_menu.callback = callback然后我尝试展示情节：show(row(widgetbox(x_menu, y_menu), plot))但它返回以下错误：ERROR:bokeh.core.validation.check:E-1001 (BAD_COLUMN_NAME): Glyph refers to nonexistent column name: x, y [renderer: GlyphRenderer(id='df96b108-e2e4-4b8c-b0c6-12df40b4205d', ...)]很感谢任何形式的帮助。谢谢！

Answer 1

如果您提供一个自包含的最小示例（我们可以复制、粘贴和运行的代码），会更容易提供帮助。话虽如此，这里有一些可以帮助您入门的内容。您已经非常接近此解决方案，但我想重要的部分是为每个菜单设置一个回调。

我希望这有帮助 ：-）

# -*- coding: utf-8 -*-

import numpy as np

import pandas as pd

from bokeh.layouts import row, widgetbox

from bokeh.models import CustomJS, Select

from bokeh.plotting import figure, show, ColumnDataSource

# Define some random data

dataframe = pd.DataFrame({

    'Difference': np.sin(np.linspace(0, 100, 500)),

    'Price': np.cos(np.linspace(0, 100, 500)),

    'Metacritic': np.sin(np.linspace(0, 100, 500)),

    'Rotten Tomatoes': np.cos(np.linspace(0, 200, 500)),

    })

# Set x and y-axis defaults

dataframe['x'] = dataframe['Difference']

dataframe['y'] = dataframe['Metacritic']

# Create Bokeh's ColumnDataSource

source = ColumnDataSource(data=dataframe)

# Create the plot figure

plot = figure(plot_width=400, plot_height=400)

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

# Create the dropdown menus

x_menu = Select(options=['Difference', 'Price'],

                value='Difference',

                title='What do you want to put on the x axis')

y_menu = Select(options=['Metacritic', 'Rotten Tomatoes'],

                value='Metacritic',

                title='What do you want to put on the y axis')

# Create two callbacks, one for each menu

callback_x = CustomJS(args=dict(source=source), code="""

    console.log('changed selected option', cb_obj.value)

    var data=source.data

    data['x']=data[cb_obj.value]

    source.change.emit();

    """)

callback_y = CustomJS(args=dict(source=source), code="""

    console.log('changed selected option', cb_obj.value)

    var data=source.data

    data['y']=data[cb_obj.value]

    source.change.emit();

    """)

# Assign callbacks to menu widgets

x_menu.callback = callback_x

y_menu.callback = callback_y

# Show the html document with a layout

show(row(widgetbox(x_menu, y_menu), plot))