Fatal编程技术网
  • javascript/
  • Javascript 为什么BokehJS示例在浏览器中失败？

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

javascript

Javascript 为什么BokehJS示例在浏览器中失败？,javascript,bokehjs,Javascript,Bokehjs,我想知道BokehJS是否能满足我在小型开发项目中的绘图需求。当我尝试复制在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-ap

我想知道BokehJS是否能满足我在小型开发项目中的绘图需求。当我尝试复制在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文件，所以我这里肯定遗漏了一些明显的东西。我的示例副本可以在这里找到

非常感谢您的任何提示。

移动脚本标记，并在末尾添加代码，而不是头标记

<!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>


完整示例
//上面CSS和JS导入的顺序很重要。
//创建用于保存数据的数据源
var source=new Bokeh.ColumnDataSource({
数据：{x:[]，y:[]}
});
//用一些工具画一个图
变量图=Bokeh.Plotting.figure({
标题：“随机数据示例”，
工具：“平移、滚轮缩放、框缩放、重置、保存”，
身高：300，
宽度：300
});
//添加包含源中数据的行
plot.line（{field:x}，{field:y}{
资料来源：资料来源，
线宽：2
});
//显示绘图，并将其附加到当前节的末尾
Bokeh.Plotting.show（plot）；
函数addPoint（）{
//添加数据---所有字段的长度必须相同。
source.data.x.push（Math.random（））
source.data.y.push（Math.random（））
//通知数据源“就地”更改
source.change.emit（）
}
var addDataButton=document.createElement（“按钮”）；
addDataButton.appendChild（document.createTextNode（“添加一些数据！！！”））；
document.currentScript.parentElement.appendChild（addDataButton）；
addDataButton.addEventListener（“单击”，addPoint）；
addPoint（）；
addPoint（）；
移动脚本标记，将代码放在末尾，而不是头标记

<!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>


完整示例
//上面CSS和JS导入的顺序很重要。
//创建用于保存数据的数据源
var source=new Bokeh.ColumnDataSource({
数据：{x:[]，y:[]}
});
//用一些工具画一个图
变量图=Bokeh.Plotting.figure({
标题：“随机数据示例”，
工具：“平移、滚轮缩放、框缩放、重置、保存”，
身高：300，
宽度：300
});
//添加包含源中数据的行
plot.line（{field:x}，{field:y}{
资料来源：资料来源，
线宽：2
});
//显示绘图，并将其附加到当前节的末尾
Bokeh.Plotting.show（plot）；
函数addPoint（）{
//添加数据---所有字段的长度必须相同。
source.data.x.push（Math.random（））
source.data.y.push（Math.random（））
//通知数据源“就地”更改
source.change.emit（）
}
var addDataButton=document.createElement（“按钮”）；
addDataButton.appendChild（document.createTextNode（“添加一些数据！！！”））；
document.currentScript.parentElement.appendChild（addDataButton）；
addDataButton.addEventListener（“单击”，addPoint）；
addPoint（）；
addPoint（）；