如何将工具栏添加到 BokehJS 图中？

Question

My goal is to add a toolbar to a BokehJS plot. According to the plot tools documention this should be possible by doing (translating the Python example to Javascript):

plot.add_tools(new Bokeh.BoxZoomTool());
plot.add_tools(new Bokeh.ResetTool());
plot.toolbar_location = "right";

I have added these lines to the basic BokehJS example from the documentation, and they don't produce errors/warnings. However, the toolbar does not show up (properly) and the tools don't really seem to work.

I have prepared a minimal JSFiddle to demonstrate the problem: When using the rectangle select tool the plot moves around strangely, which uncovers an unstyled version of the toolbar rendered underneath the plot.

So the question is how can I get a properly working toolbar in BokehJS?

Answer 1

1. Add bk-root to the root element. <div id="plot" class="mybokehplot bk-root"></div>
2. Add corresponding css files (bokeh-0.12.0.min.css and bokeh-widgets-0.12.0.min.css).

JSFiddle here: https://jsfiddle.net/blackmiaool/xzvgrqLj/

Snippet here:

 // create some data and a ColumnDataSource var x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10); var y = x.map(function(v) { return v * 0.5 + 3.0; }); var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } }); // create some ranges for the plot var xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 }); var ydr = Bokeh.Range1d(-0.5, 20.5); // make the plot var plot = new Bokeh.Plot({ title: "BokehJS Plot", x_range: xdr, y_range: ydr, plot_width: 400, plot_height: 400, background_fill_color: "#F2F2F7" }); // add axes to the plot var xaxis = new Bokeh.LinearAxis({ axis_line_color: null }); var yaxis = new Bokeh.LinearAxis({ axis_line_color: null }); plot.add_layout(xaxis, "below"); plot.add_layout(yaxis, "left"); // add grids to the plot var xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 }); var ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 }); plot.add_layout(xgrid); plot.add_layout(ygrid); // add a Line glyph var line = new Bokeh.Line({ x: { field: "x" }, y: { field: "y" }, line_color: "#666699", line_width: 2 }); plot.add_glyph(line, source); // now add the tools plot.add_tools(new Bokeh.BoxZoomTool()); plot.add_tools(new Bokeh.ResetTool()); plot.toolbar_location = "right"; // add the plot to a document and display it var doc = new Bokeh.Document(); doc.add_root(plot); var div = document.getElementById("plot"); Bokeh.embed.add_document_standalone(doc, div);

 .mybokehplot { position: relative; width: 100%; height: 100%; border: 1px dashed #ccc; }

 <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.0.min.js"></script> <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.0.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.0.min.css"> <div id="plot" class="mybokehplot bk-root"></div>

PS I found that the edition of bokeh's css files and js files must be same, or you would get lots of bugs.