如何将图形上可配置点的坐标输出到具有散景的表中

Question

我有一个由函数y / 100 =（x / 100）^ n定义的图

我想用bokeh上的滑块确定x，并且（i）在x和y轴上用虚线标记该点，并且（ii）在滑块下方的表上找到相关的y坐标。

这是我尝试过的，但是没有成功（滑块，表格和图形都在那儿，但是移动滑块时什么也没有发生。]]

###  Slider:: Interactive Graph with Python Bokeh
###  Source:: https://docs.bokeh.org/en/latest/docs/gallery/slider.html

import numpy as np
import pandas as pd

from bokeh.layouts import row, column
from bokeh.models import CustomJS, Slider, Title
from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn

#%%  Read data from graph

##  Define parameters and function

n = 0.333333333333
w1, h1 = 500, 400
w2, h2 = 200,  80

def x_to_y(x):
    y = 100*((x*0.01)**n)
    y = np.round(y, 2)
    return y


##  Initialize the graph 

x = np.linspace(0, 100, 1001)
y = x_to_y(x)

cust_slider = Slider(start=0, end=100, step=0.1, 
                     value=30, 
                     width=w2, height=h2,
                     title="% Customers")


##  Create a table with (x, y) values of the graph... 
##              read x from slider

tabl = dict(cust=[cust_slider.value],
            potn=[x_to_y(cust_slider.value)])

values = ColumnDataSource(tabl)

columns = [TableColumn(field="cust", title="% Customers"),
           TableColumn(field="potn", title="% Potential")]

data_table = DataTable(source=values, 
                       columns=columns,
                       width=w2, height=h2, 
                       editable=True)


##  Plot the graph from  function (later to be read from source)

source = ColumnDataSource(data=dict(x=x, y=y))

TOOLTIPS = [("Customers: ", "$x"),
            ("Potential: ", "$y")
           ]

plot = figure(x_range=(0,100),
              y_range=(0, 100), 
              tooltips=TOOLTIPS,
              plot_width=w1, 
              plot_height=h1)

plot.line('x', 'y', source=source)
plot.line([0,cust_slider.value,cust_slider.value], 
          [x_to_y(cust_slider.value),x_to_y(cust_slider.value),0],
          line_dash="dashed"
         )

plot.add_layout(Title(text="Customers (%)", align="center"), "below")
plot.add_layout(Title(text="Potential (%)", align="center"), "left")


##  Try to make table and plot interactive  (...table not interacting)

callback = CustomJS(args=dict(source=tabl, 
                              slider=cust_slider),
                    code="""const source = source.data;
                            const xx = source['cust'];
                            const yy = source['potn'];
                            xx = slider.value;
                            yy = x_to_y(xx);
                            source.change.emit();"""
                   )

cust_slider.js_on_change('value', callback)


layout = row(plot,
             column(cust_slider,
                    data_table)
            )

output_file("slider_mwe.html", title="Graph")

show(layout)

这是我得到的图形的快照：

我有一个由函数y / 100 =（x / 100）^ n定义的图形，我想用散景器上的滑块确定x，（i）在x和y轴上用虚线标记该点， （ii）找到相关的y -...

Answer 1

有一些问题。首先，您的CustomJS代码：