时间戳

首页 > 解决方案 > 为什么 BokehJS 示例在浏览器中失败？

javascript - 为什么 BokehJS 示例在浏览器中失败？

问题描述

我试图弄清楚 BokehJS 是否可以满足我对小型开发项目的绘图需求。当我尝试复制在https://docs.bokeh.org/en/latest/docs/user_guide/bokehjs.html上找到的最后一个示例时，它在 Chrome 中出现此回溯失败：

Uncaught TypeError: Cannot read property 'classList' of null
    at c (bokeh-1.3.4.min.js:31)
    at Object.n.add_document_standalone (bokeh-1.3.4.min.js:31)
    at Object.t.show (bokeh-api-1.3.4.min.js:31)
    at bokeh.html:58

该示例被逐字复制到文件 bokeh.html 中，并直接在浏览器中打开。bokeh.html:58 是行

      Bokeh.Plotting.show(plot);

该示例应该是一个完整的独立 html 文件，所以我必须在这里遗漏一些明显的东西。我的示例副本可以在这里找到https://pastebin.com/VizzJbH4

非常感谢任何提示。

标签： javascriptbokehjs

解决方案

移动带有代码的脚本标签而不是头部标签。

<!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-2.1.1.min.js" integrity="sha384-kLr4fYcqcSpbuI95brIH3vnnYCquzzSxHPU6XGQCIkQRGJwhg0StNbj1eegrHs12" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.1.min.js" integrity="sha384-xIGPmVtaOm+z0BqfSOMn4lOR6ciex448GIKG4eE61LsAvmGj48XcMQZtKcE/UXZe" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.1.min.js" integrity="sha384-Dc9u1wF/0zApGIWoBbH77iWEHtdmkuYWG839Uzmv8y8yBLXebjO9ZnERsde5Ln/P" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.1.1.min.js" integrity="sha384-cT9JaBz7GiRXdENrJLZNSC6eMNF3nh3fa5fTF51Svp+ukxPdwcU5kGXGPBgDCa2j" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.1.1.min.js" integrity="sha384-i2RsfqLVG6PTrWCD55m8pYN9N2XZRkYVASzqjzp79o0OpPmcp+APyuwCfItW7Kn2" crossorigin="anonymous"></script>

<script>
//The order of CSS and JS imports above is important.
</script>
</head>

<body>
</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>
</html>

推荐阅读