0

我正在尝试运行 BokehJS 用户指南中的最小示例。

我使用以下代码（从上面的链接粘贴）创建了一个 html 文件：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Complete Example</title>


<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-1.4.0.min.js"></script>

<script>
//The order of CSS and JS imports above is important.
</script>
<script>
// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
    data: { x: [], y: [] }
});

// make a plot with some tools
var plot = Bokeh.Plotting.figure({
    title:'Example of Random data',
    tools: "pan,wheel_zoom,box_zoom,reset,save",
    height: 300,
    width: 300
});

// add a line with data from the source
plot.line({ field: "x" }, { field: "y" }, {
    source: source,
    line_width: 2
});

// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot);

function addPoint() {
    // add data --- all fields must be the same length.
    source.data.x.push(Math.random())
    source.data.y.push(Math.random())

    // notify the DataSource of "in-place" changes
    source.change.emit()
}

var addDataButton = document.createElement("Button");
addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
document.currentScript.parentElement.appendChild(addDataButton);
addDataButton.addEventListener("click", addPoint);

addPoint();
addPoint();
</script>
</head>

<body>
</body>

</html>

那应该创建一个带有情节的页面。相反，在浏览器中打开文件后，我得到一个空页面。

这是控制台输出： 控制台输出

这里发生了什么？为什么禁止访问 bokehJS 源代码？

4

1 回答 1

1

实际添加 BokehJS 内容的 JS 代码需要运行在<body>not in <head>. 此外，如果您不使用这些功能，则不需要包含小部件、表格或 webgl 的 JS 文件。这是一个完整的版本，更新：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Complete Example</title>

  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-1.4.0.min.js"></script>
</head>

<body>
<script>
  // create a data source to hold data
  var source = new Bokeh.ColumnDataSource({
    data: { x: [], y: [] }
  });

  // make a plot with some tools
  var plot = Bokeh.Plotting.figure({
    title:'Example of Random data',
    tools: "pan,wheel_zoom,box_zoom,reset,save",
    height: 300,
    width: 300
  });

  // add a line with data from the source
  plot.line({ field: "x" }, { field: "y" }, {
    source: source,
    line_width: 2
  });

  // show the plot, appending it to the end of the current section
  Bokeh.Plotting.show(plot);

  function addPoint() {
    // add data --- all fields must be the same length.
    source.data.x.push(Math.random())
    source.data.y.push(Math.random())

    // notify the DataSource of "in-place" changes
    source.change.emit()
  }

  var addDataButton = document.createElement("Button");
  addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
  document.currentScript.parentElement.appendChild(addDataButton);
  addDataButton.addEventListener("click", addPoint);

  addPoint();
  addPoint();
</script>
</body>

</html>
于 2020-01-02T06:25:47.837 回答