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

Question

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

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

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


<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-tables-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-gl-1.4.0.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.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源代码

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1