如何在BokehJS图中添加工具栏？

Question

我的目标是为BokehJS图添加工具栏。根据{{​​3}}，这应该是可行的（将Python示例转换为Javascript）：

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

我已将这些行添加到文档中的plot tools documention，并且他们不会产生错误/警告。但是，工具栏没有显示（正确），工具似乎不起作用。

我准备了一个最小的basic BokehJS example来演示这个问题：当使用矩形选择工具时，情节奇怪地移动，这揭示了在情节下面渲染的工具栏的无样式版本。

所以问题是如何在BokehJS中获得正确工作的工具栏？

Answer 1

1. 您应该将 bk-root 添加到根元素。 expo
2. 你应该添加相应的css文件（bokeh-0.12.0.min.css和bokeh-widgets-0.12.0.min.css）。

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

这里的代码段：

<div id="plot" class="mybokehplot bk-root"></div>

// 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;
}



P.S。我发现bokeh的css文件和js文件的版本必须相同，否则你会遇到很多错误。