CustomJS 回调上的散景布局更新

问题描述

我是 bokehJS 的新手，我需要根据 dropdown 值更新绘图。 对于初始加载，我使用以下代码在绘图布局中添加 arrow。但是，每当我更改 dropdown 上的值时，图都会更新，但是 arrow 会消失。

p.add_layout(Arrow(end=TeeHead(line_width=0),x_start=0,y_start=min(source1.data['y']),x_end=0,y_end=max(source1.data['y']),line_dash="dashed"))

下面是我写的自定义jscallback：

callback = CustomJS(args=dict(source1=test_vs_control_source1,source2=test_vs_control_source2,data=data,leg=p.legend.items,tt=p.hover),code=
    switch(cb_obj.value) {
      case 'Actuals':
        // code block
        source1.data = data.actual.testgroup;
        source2.data = data.actual.controlgroup;
        leg[0].label.value = 'Test Group';
        leg[1].label.value = 'Control Group'
        tt[0].tooltips = "<div>
             <span style="font-size: 18px;color:deepskyblue;">T_Post: $x{0,0}</span><br/>
             <span style="font-size: 18px;color:orange;">C_Post: $y{0,0}</span>
          </div>";
        break;
      case 'Impact':
        // code block
        source1.data = data.impact;
        source2.data = {'x':[],'y':[]};
        leg[0].label.value = 'Impact';
        leg[1].label.value = '';
        tt[0].tooltips = "<div>
             <span style="font-size: 18px;color:deepskyblue;">Impact: $x{0,0}</span>
          </div>";
        break;
      case 'Lift':
        // code block
        source1.data = data.lift;
        source2.data = {'x':[],'y':[]};
        leg[0].label.value = 'Lift';
        leg[1].label.value = '';
        tt[0].tooltips = "<div>
             <span style="font-size: 18px;color:deepskyblue;">Lift: $x{0,0}</span>
          </div>";
        break;
      default:
        // code block
        leg[0].label.value = 'Test Group';
        leg[1].label.value = 'Control Group';
        tt[0].tooltips = "<div>
             <span style="font-size: 18px;color:deepskyblue;">T1_Post: $x{0,0}</span>
          </div>";
        source1.data = data.testvscontrol.testgroup;
        source2.data = data.testvscontrol.controlgroup;
    }
    
    source1.change.emit();
    source2.change.emit();

)

如何在 callbackJS 中编辑布局？

注意：我希望这是一个独立的 html 页面，所以不愿意使用散景服务器。

解决方法

经过几次试验和错误后，我能够找出我的问题的答案： 下面是我更新的回调 customJS

callback = CustomJS(args=dict(source1=test_vs_control_source1,source2=test_vs_control_source2,data=data,legend=plot.legend.items,tooltip=plot.hover,arr=arrow,plot=plot,thead=thead,yaxis=plot.yaxis,formatter=formatter,label=label),code="""
switch(cb_obj.value) {
  case 'Actuals':
    // code block
    source1.data = data.actual.testgroup;
    source2.data = data.actual.controlgroup;
    legend[0].label.value = 'Test Group';
    legend[1].label.value = 'Control Group'
    tooltip[0].tooltips = "<div>
         <span style="font-size: 18px;color:deepskyblue;">T_Post: $x{0,0}</span><br/>
         <span style="font-size: 18px;color:orange;">C_Post: $y{0,0}</span>
      </div>";  
    formatter.format = '0';
    break;
  case 'Impact':
    // code block
    source1.data = data.impact;
    source2.data = {'x':[],'y':[]};
    legend[0].label.value = 'Impact';
    legend[1].label.value = '';
    tooltip[0].tooltips = "<div>
         <span style="font-size: 18px;color:deepskyblue;">Impact: $x{0,0}</span>
      </div>";    
    formatter.format = '0.000000';
    break;
  case 'Lift':
    // code block
    source1.data = data.lift;
    source2.data = {'x':[],'y':[]};
    legend[0].label.value = 'Lift';
    legend[1].label.value = '';
    tooltip[0].tooltips = "<div>
         <span style="font-size: 18px;color:deepskyblue;">Lift: $x{0,0}</span>
      </div>";
    formatter.format = '0.0000';
    break;
  default:
    // code block
    legend[0].label.value = 'Test Group';
    legend[1].label.value = 'Control Group';
    tooltip[0].tooltips = "<div>
         <span style="font-size: 18px;color:deepskyblue;">T_Post: $x{0,0}</span>
      </div>";
    formatter.format = '0';
    source1.data = data.testvscontrol.testgroup;
    source2.data = data.testvscontrol.controlgroup;        
}

 arr.x_start = 0;
 arr.x_end = 0;
 arr.y_start = Math.min.apply(null,source1.data['y']);
 arr.y_end = Math.max.apply(null,source1.data['y']);
 arr.line_dash = 'dashed';
 arr.end = thead;
 plot.add_layout(arr);
 
 label.text = 'Event';
 label.render_mode = 'css';
 label.border_line_alpha = 1.0;
 label.background_fill_color = 'white';
 label.background_fill_alpha = 1.0;
 label.angle = 300;
 label.x = 0;
 label.y = Math.max.apply(null,source1.data['y']);
 plot.add_layout(label);
 
 yaxis[0].formatter = formatter;     
 source1.change.emit();
 source2.change.emit();

""")