如何添加懸停高亮背景虛化步驟圖表

Question

我的工作，試圖從這個http://fortune.com/fortune500/visualizations/?iid=recirc_f500landing-zone1

複製類似於第二圖形代碼中有散景默認步驟圖表，但並不想讓我添加字形。

我想代碼是這樣的

from bokeh.charts import Step, show, output_file 

# build a dataset where multiple columns measure the same thing 
data = dict(
     stamp=[.33, .33, .34, .37, .37, .37, .37, .39, .41, .42, 
       .44, .44, .44, .45, .46, .49, .49], 
     postcard=[.20, .20, .21, .23, .23, .23, .23, .24, .26, .27, 
       .28, .28, .29, .32, .33, .34, .35] 
    ) 

# create a step chart where each column of measures receives a unique color and dash style 
step = Step(data, y=['stamp', 'postcard'], 
     dash=['stamp', 'postcard'], 
     color=['stamp', 'postcard'], 
     title="U.S. Postage Rates (1999-2015)", 
     ylabel='Rate per ounce', legend=True) 

selected_line = Line(line_alpha=1, line_color="firebrick") 
nonselected_line = Line(line_alpha=0.2, line_color="blue") 

step.add_glyph(data, 
      step, 
      selection_glyph=selected_line, 
      nonselection_glyph=nonselected_line 
) 

output_file("steps.html") 

show(step) 

我試圖從http://bokeh.pydata.org/en/latest/docs/user_guide/styling.html#selected-and-unselected-glyphs此頁每路有建立這個情節沒有圖表庫的方法嗎？

Answer 1

步驟圖表 爲了不bokeh.charts庫中創建這一點，你可以用多線，看到http://bokeh.pydata.org/en/latest/docs/user_guide/plotting.html#multiple-lines。您只需手動爲每個y創建相應的x值。

本質上，如果y值發生變化，它應該與前面的y值具有相同的x值，否則增加x值。這應該創建正確的數據。

Higlight on hover： 使用多行字形可以非常接近所需的效果。 它內置了懸停顏色和alpha設置，因此很容易處理。它唯一不能做的就是對齊最近的一行。不知道如果沒有自定義JavaScript是可能的，但我可能是錯的。

下面附加的示例代碼。

from bokeh.plotting import figure, show 
from bokeh.models import HoverTool 
from bokeh.models import ColumnDataSource 

p = figure(plot_width=400, plot_height=400,y_range=(0.2,0.5)) 


y_vals = [0.22,0.22,0.25,0.25,0.26,0.26,0.27,0.27] 
y_vals2 = [y*1.4 for y in y_vals] 
x_vals = [0,1,1,2,2,2,2,3] 
data_dict = {'x':[x_vals,x_vals], 
      'y':[y_vals,y_vals2], 
      'color':["firebrick", "navy"], 
      'alpha':[0.1, 0.1]} 

source = ColumnDataSource(data_dict) 

p.multi_line('x','y',source=source, 
      color='color', alpha='alpha', line_width=4, 
      hover_line_alpha=1.0,hover_line_color='color') 

p.add_tools(HoverTool(show_arrow=False, 
         line_policy='nearest', 
         tooltips=None)) 
show(p)