0

我是新手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"))

下面是callback我写的自定义js：

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

)

如何在 中编辑布局callbackJS？

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

4

1 回答 1

0

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

""")

于 2021-07-22T08:22:39.333 回答