与BokehJS条形图重叠的酒吧

Question

I'd like to make a plot like the one shown below using BokehJS.

Specifically, I have two data series that share x-labels and I want to make a bar graph showing each in a different color (simple enough). But style-wise, I would like one bar to be narrower than the other, while they both share the same centers on the x-axis. For visibility's sake, the wider bars should be shown "behind" the narrower bars.

Moreover, I'd like to make it using purely BokehJS, rather than using the Python interface. I can't find any examples with this styling. Any help would be much appreciated!

Oh! One last thing: ideally, I'd like to be able to update this graph on the fly using javascript. So say at the beginning of the exercise, my data is in a javascript variable, but I have alternate data in another javascript variable (with the same structure). I'd like to be able to update the data and have the graph re-render on the client side. Worst case, I know how to write enough JS to totally tear-down the Bokeh plot and redraw it from scratch when I need to update. But I have to imagine there is a way to simply inject the new numerical data and tell the Bokeh plot to update itself. But perhaps I'm too optimistic?

Answer 1

使用bokeh.plotting.vbar并在绘制第二个数据集时将宽度设置为较小的值。