尝试运行用户指南中的最小示例时禁止访问 bokehJS 源代码

Question

我正在尝试运行 BokehJS 用户指南中的 minimal example。

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

<!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源代码？

Answer 1

实际添加BokehJS内容的JS代码需要在<body>中运行而不是在<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>

尝试运行用户指南中的最小示例时禁止访问 bokehJS 源代码

Access to bokehJS source code is forbidden when trying to run minimal example from user guide

bokeh

bokehjs

尝试 运行 用户指南中的最小示例时禁止访问 bokehJS 源代码

Access to bokehJS source code is forbidden when trying to run minimal example from user guide

bokeh

bokehjs

尝试运行用户指南中的最小示例时禁止访问 bokehJS 源代码