CustomJS 回调上的散景布局更新

Posted 2023-03-16

【中文标题】CustomJS 回调上的散景布局更新

【英文标题】：Bokeh layout update on CustomJS callback

【发布时间】：2021-09-29 09:17:43

【问题描述】：

我是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: $x0,0</span><br/>
             <span style="font-size: 18px;color:orange;">C_Post: $y0,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: $x0,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: $x0,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: $x0,0</span><br/>
             <span style="font-size: 18px;color:orange;">C_Post: $y0,0</span>
          </div>";
        source1.data = data.testvscontrol.testgroup;
        source2.data = data.testvscontrol.controlgroup;
    
    
    source1.change.emit();
    source2.change.emit();

)

如何在callbackJS 中编辑布局？

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

【问题讨论】：

请编辑您的帖子以使用正确的代码块格式，目前无法理解。

@bigreddot 编辑完成。你能看看吗？

更好地展示我们可以运行和测试想法的最少工作代码。

【参考方案1】：

经过几次尝试和错误，我能够找到我的问题的答案： 下面是我更新的回调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: $x0,0</span><br/>
         <span style="font-size: 18px;color:orange;">C_Post: $y0,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: $x0,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: $x0,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: $x0,0</span><br/>
         <span style="font-size: 18px;color:orange;">C_Post: $y0,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();

""")