Question

我写了一些javascript来在BokehJS中创建一个关联图（一切都发生在客户端，我不能使用Python Bokeh包）。

现在，我想添加一个HoverTool，当用户将鼠标悬停在方块上时显示工具提示，但我找不到有关如何执行此操作的文档或示例。我开始查看coffeescript源代码并找到relavant pieces，但我真的不明白如何整合它们。

任何帮助查找有关如何在纯BokehJS中使用HoverTool的文档或示例都会很棒。

Answer 1

首先在散景中使用悬停，您必须将其添加为工具，然后对其进行个性化设置以显示悬停时显示的内容。从散景文档中查看此US Unemployment example

TOOLS = "hover,save"

p = figure(title="US Unemployment (1948 - 2013)",
    x_range=years, y_range=list(reversed(months)),
    x_axis_location="above", plot_width=900, plot_height=400,
    toolbar_location="left", tools=TOOLS)

hover = p.select(dict(type=HoverTool))
hover.tooltips = OrderedDict([
    ('date', '@month @year'),
    ('rate', '@rate'),
])

Answer 2

这是一个纯粹的JavaScript版本，适用于Bokeh 0.12.4。它显示了如何使用网格图，在每组数据上单独悬停。悬停对象中的{0.01}用于将值格式化为2个小数位。

＆＃13;

var plt = Bokeh.Plotting;

var colors = [
  '#ee82ee', '#523ebf', '#9bc500', '#ffb600', '#f50019', '#511150',
  '#8b38fa', '#2e792a', '#ffef00', '#ff7400', '#a90064', '#000000'
]

function circlePlots(xyDict, plot_width, plot_height, title) {
  // make the plot and add some tools
  var tools = "pan,crosshair,wheel_zoom,box_zoom,reset";
  var p = plt.figure({
    title: title,
    plot_width: plot_width,
    plot_height: plot_height,
    tools: tools
  });

  // call the circle glyph method to add some circle glyphs
  var renderers = [];
  for (var i = 0; i <= 3; i += 1) {
    // create a data source
    var thisDict = {
      'x': xyDict['x'],
      'y': xyDict['y'][i],
      'color': xyDict['color'][i]
    }
    var source = new Bokeh.ColumnDataSource({
      data: thisDict
    });
    var r = p.circle({
      field: "x"
    }, {
      field: 'y'
    }, {
      source: source,
      fill_color: colors[i],
      fill_alpha: 0.6,
      radius: 0.2 + 0.05 * i,
      line_color: null
    });
    renderers.push(r);
  }
  var tooltip = ("<div>x: @x{0.01}</div>" +
    "<div>y: @y{0.01}</div>" +
    "<div>color: @color</div>");
  var hover = new Bokeh.HoverTool({
    renderers: renderers,
    tooltips: tooltip
  });
  p.add_tools(hover);
  return p
}

var pageWidth = 450;
var plotCols = 2;
var plots = [];
var plotWidth = Math.floor(pageWidth / plotCols)
if (plotWidth > 600) {
  plotWidth = 600
}
var plotHeight = Math.floor(0.85 * plotWidth)
for (var i = 0; i < plotCols; i += 1) {
  // set up some data
  var M = 20;
  var xyDict = {
    y: [],
    color: []
  };
  for (var j = 0; j <= 4; j += 1) {
    xyDict['x'] = [];
    xyDict['y'].push([]);
    xyDict['color'].push([]);
    for (var x = 0; x <= M; x += 0.5) {
      xyDict['x'].push(x);
      xyDict['y'][j].push(Math.sin(x) * (j + 1) * (i + 1));
      xyDict['color'][j].push(colors[j]);
    }
  }
  var title = "Sin(x) Plot " + (i + 1).toString();
  var p = circlePlots(xyDict, plotWidth, plotHeight, title);
  plots.push(p)
};
plt.show(plt.gridplot([plots], sizing_mode = "stretch_both"));

＆＃13;

<link href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.css" rel="stylesheet" />
<script src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.4.min.js"></script>

＆＃13;

使用BokehJS中的HoverTool

2 个答案: