Question

我正在尝试使用Bokeh JS实现，即尝试使用bokeh的JS API来显示字形。我按照散景文档中提供的说明进行操作，但页面错误消失了。例如var plt = Bokeh。绘图未定义。出了什么问题？

我已经包含了文档中指出的所有CSS / JS文件。下面是从文档中复制的代码 - 试图让它正常工作

拥有bokehjs的人可以获得帮助吗？

$(function() {

  var plt = Bokeh.Plotting;
  console.log(Bokeh.Plotting);

  // set up some data
  var M = 100;
  var xx = [];
  var yy = [];
  var colors = [];
  var radii = [];
  for (var y = 0; y <= M; y += 4) {
    for (var x = 0; x <= M; x += 4) {
      xx.push(x);
      yy.push(y);
      colors.push(plt.color(50 + 2 * x, 30 + 2 * y, 150));
      radii.push(Math.random() * 0.4 + 1.7)
    }
  }

  // create a data source
  var source = new Bokeh.ColumnDataSource({
    data: {
      x: xx,
      y: yy,
      radius: radii,
      colors: colors
    }
  });

  // make the plot and add some tools
  var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
  var p = plt.figure({
    title: "Colorful Scatter",
    tools: tools
  });

  // call the circle glyph method to add some circle glyphs
  var circles = p.circle({
    field: "x"
  }, {
    field: "y"
  }, {
    source: source,
    radius: radii,
    fill_color: colors,
    fill_alpha: 0.6,
    line_color: null
  });

  // add the plot to a document and display it
  // var doc = new Bokeh.Document();
  // doc.add_root(plt);
  // var div = $("#plot");
  // cosole.log(div);
  // Bokeh.embed.add_document_standalone(doc, div);

  plt.show(p);



});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.js"></script>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.css">

<div id="plot">

</div>

Answer 1

事实证明，自从0.12.1以来，Bokeh已经改变了JS API所以上面的代码适用于＆lt; = 0.12.1但是对于更新的版本，JS代码会中断。但文档没有改变。希望文档尽快更新

Answer 2

最后，我能够让BokehJS 0.12.4工作。 release notes of 0.12.2包含一个小注释，即BokehJS API已拆分为自己的包。因此，当从0.12.2之前版本迁移到最新版本时，需要添加以下javascript

https://cdn.pydata.org/bokeh/release/bokeh-api-0.12.4.min.js

除了现有的bokeh-0.12.4.min.js和bokeh-widgets-0.12.4.min.js之外。将此文件添加到您的示例后，它可以工作。不幸的是，这些信息尚未成为官方的BokehJS文档。

$(function() {
  var plt = Bokeh.Plotting;

  // set up some data
  var M = 100;
  var xx = [];
  var yy = [];
  var colors = [];
  var radii = [];
  for (var y = 0; y <= M; y += 4) {
    for (var x = 0; x <= M; x += 4) {
      xx.push(x);
      yy.push(y);
      colors.push(plt.color(50 + 2 * x, 30 + 2 * y, 150));
      radii.push(Math.random() * 0.4 + 1.7)
    }
  }

  // create a data source
  var source = new Bokeh.ColumnDataSource({
    data: {
      x: xx,
      y: yy,
      radius: radii,
      colors: colors
    }
  });

  // make the plot and add some tools
  var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
  var p = plt.figure({
    title: "Colorful Scatter",
    tools: tools
  });

  // call the circle glyph method to add some circle glyphs
  var circles = p.circle({
    field: "x"
  }, {
    field: "y"
  }, {
    source: source,
    radius: radii,
    fill_color: colors,
    fill_alpha: 0.6,
    line_color: null
  });

  plt.show(p);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<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>
<script src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.pydata.org/bokeh/release/bokeh-0.12.4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.12.4.min.css">

<div id="plot"></div>

在javascript模型中使用散景的错误

2 个答案: