使用散景绘制Jupyter/Python中的交互式饼图

Question

我是Bokeh的新手，我很想知道如何使用Bokeh绘制Jupyer/Python中的简单交互式饼图。我打算在页面here的底部解释如何在Bokeh中使用'CustomJS和Python函数'。饼图由两个条目组成，其中一个滑块可以改变（v1 + v2）圆形内一个饼图'v2'的形状。我试图按照散景网站中的示例来展示与正弦图的交互性，但我无法使用它与我的饼图一起工作。任何帮助将不胜感激。以下是我在Jupyter笔记本中使用的代码块。

import numpy as np 
 
import matplotlib.pyplot as plt 
 
from bokeh.layouts import column 
 
from bokeh.models import CustomJS, ColumnDataSource, Slider 
 
from bokeh.plotting import Figure, output_file, show, output_notebook 
 
from bokeh.charts import Donut, show 
 

 
#output_file('donut.html') 
 
output_notebook() 
 

 
v1=1 
 
v2=.2 
 
import pandas as pd 
 
data = pd.Series([v1,v2], index = list('ab')) 
 
plot = Figure(plot_width=400, plot_height=400) 
 
plot = Donut(data) 
 
    
 
    
 
def pie_chart(source=data,window=None,deltav=None): 
 
    data = source.data 
 
    v2 = deltav.value 
 
    #v2 = data['v2'] 
 
    source.trigger('change') 
 
    
 
slider = Slider(start=.1, end=1., value=.2, step=.1, title="delta-V", callback=CustomJS.from_py_func(pie_chart)) 
 
callback.args["deltav"] = slider 
 
    
 
l = column(slider, plot) 
 
show(l)

Answer 1

如果你想交互更新的东西，那么你会好起来的使用bokeh.plotting API。对于一些相当无趣的技术原因，bokeh.charts API（包括Donut）不太适合需要更新事物的用例。

使用bokeh.plotting有一个wedge glyph method，您可以使用它来绘制饼图。这里是（用散景0.12.5）更新一个饼图采用了滑盖写了一个完整的例子：

from math import pi 

from bokeh.io import output_file, show 
from bokeh.layouts import column 
from bokeh.models import ColumnDataSource, CustomJS, Slider 
from bokeh.plotting import figure 

output_file("pie.html") 

source = ColumnDataSource(data=dict(
    start=[0, 0.2], end=[0.2, 2*pi], color=['firebrick', 'navy'] 
)) 

plot = figure() 
plot.wedge(x=0, y=0, start_angle='start', end_angle='end', radius=1, 
     color='color', alpha=0.6, source=source) 

slider = Slider(start=.1, end=1., value=.2, step=.1, title="delta-V") 

def update(source=source, slider=slider, window=None): 
    data = source.data 
    data['end'][0] = slider.value 
    source.trigger('change') 

slider.js_on_change('value', CustomJS.from_py_func(update)) 

show(column(slider, plot)) 

它是略高于Donut版本更加详细，但对数据结构之间的关系python方面和JS方面更清晰直接。

Answer 2

所有这些建议帮助！谢谢一堆。

我回来了，有点扭曲到我原来的问题。现在我想使用散景服务器来执行相同的交互式绘图。我已经调整了the sine plot example with sliders来为我的环形图问题生成下面的代码。当我使用散景服务提供服务时，我的代码中的数据定义出现错误。我认为我很接近但错过了一小步。

''' Present an interactive function explorer with slider widgets. 
 

 
Scrub the slider to change the pie shape in the donut plot 
 

 
Use the ``bokeh serve`` command to run the example by executing: 
 

 
    bokeh serve donuts.py 
 

 
at your command prompt. Then navigate to the URL 
 

 
    http://localhost:5006/donuts 
 

 
in your browser. 
 

 
''' 
 
import numpy as np 
 

 
from bokeh.io import curdoc 
 
from bokeh.layouts import row, widgetbox 
 
from bokeh.models import ColumnDataSource 
 
from bokeh.models.widgets import Slider, TextInput 
 
from bokeh.plotting import figure 
 
from math import pi 
 

 
# Set up data 
 
source = ColumnDataSource(data=dict(
 
    start=[0, 0.], end=[0., 2*pi], color=["black", "red"] 
 
)) 
 

 
# Set up plot 
 
plot = figure(x_axis_location=None, y_axis_location=None, plot_width=400, plot_height=400,) 
 
plot.annular_wedge(x=0, y=0, start_angle='start', end_angle='end', inner_radius=.4, outer_radius=.8, 
 
     color="color", alpha=.7, source=source) 
 
#plot.background_fill_color = None 
 
plot.xgrid.grid_line_color = None 
 
plot.ygrid.grid_line_color = None 
 

 
# Set up widgets 
 
slider = Slider(start=.0, end=round(2*pi,2), value=.2, step=.1, title="delta-V") 
 

 
# Set up callbacks 
 
    
 
def update(attrname, old, new): 
 
    
 
    # Get the current slider values 
 
    data['end'][0] = slider.value 
 
    source.data = dict(start=start, end=end, color=color) 
 

 
for w in [slider]: 
 
    w.on_change('value', update) 
 

 

 
# Set up layouts and add to document 
 
inputs = widgetbox(slider) 
 

 
curdoc().add_root(row(inputs, plot, width=800)) 
 
curdoc().title = "Donut"

Answer 3

我想我找到我的答案。下面是在情况下，它可以帮助

''' Present an interactive function explorer with slider widgets. 
 

 
Scrub the slider to change the pie shape in the donut plot 
 

 
Use the ``bokeh serve`` command to run the example by executing: 
 

 
    bokeh serve donuts.py 
 

 
at your command prompt. Then navigate to the URL 
 

 
    http://localhost:5006/donuts 
 

 
in your browser. 
 

 
''' 
 
import numpy as np 
 

 
from bokeh.io import curdoc 
 
from bokeh.layouts import row, widgetbox 
 
from bokeh.models import ColumnDataSource 
 
from bokeh.models.widgets import Slider, TextInput 
 
from bokeh.plotting import figure 
 
from math import pi 
 

 
# Set up data 
 
source = ColumnDataSource(data=dict(
 
    start=[0, 0], end=[0., 2*pi], color=["white", "red"] 
 
)) 
 

 
# Set up plot 
 
plot = figure(x_axis_location=None, y_axis_location=None, plot_width=400, plot_height=400,) 
 
plot.annular_wedge(x=0, y=0, start_angle='start', end_angle='end', inner_radius=.4, outer_radius=.8, 
 
     color="color", alpha=1., source=source) 
 
#plot.background_fill_color = None 
 
plot.xgrid.grid_line_color = None 
 
plot.ygrid.grid_line_color = None 
 

 
# Set up widgets 
 
slider = Slider(start=.0, end=round(2*pi,2), value=.0, step=.1, title="delta-V") 
 

 
# Set up callbacks 
 
    
 
def update(attrname, old, new): 
 
    
 
    # Get the current slider values 
 
    z = slider.value 
 
    source.data = dict(start=[pi,pi+z], end=[pi+z, pi], color=["yellow", "red"]) 
 

 
for w in [slider]: 
 
    w.on_change('value', update) 
 

 

 
# Set up layouts and add to document 
 
inputs = widgetbox(slider) 
 

 
curdoc().add_root(row(inputs, plot, width=800)) 
 
curdoc().title = "Donut"