javascript - 如何将工具栏添加到 BokehJS 绘图？

Question

我的目标是向 BokehJS 绘图添加工具栏。根据plot tools documention这应该可以通过做(将 Python 示例翻译成 Javascript):

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

我已将这些行添加到 basic BokehJS example来自文档，它们不会产生错误/警告。但是，工具栏没有(正确)显示，而且这些工具似乎也不起作用。

我准备了一个最小的JSFiddle演示问题:当使用矩形选择工具时，绘图会奇怪地四处移动，这会发现在绘图下方呈现的工具栏的无样式版本。

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

Answer 1

1. 将bk-root 添加到根元素。 <div id="plot" class="mybokehplot bk-root"></div>
2. 添加相应的 css 文件(bokeh-0.12.0.min.css 和 bokeh-widgets-0.12.0.min.css)。

JSFiddle 在这里: https://jsfiddle.net/blackmiaool/xzvgrqLj/

片段在这里:

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

附言我发现 bokeh 的 css 文件和 js 文件的版本必须相同，否则你会得到很多错误。