我正在开始使用 BokehJS。希望这对第一次尝试使用 BokehJS 的其他人有用。
作为第一次尝试，我简单地复制了 Bokeh online documentation 中的基本示例放入以下 html 文件中。
然而，当加载它时，没有显示任何绘图，我在第 15 行收到一条错误消息:Uncaught TypeError: Cannot read property 'linspace' of undefined at window.onload
你能发现这里有什么明显的错误吗？ 谢谢!
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.9.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.9.min.css">
<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.js"></script>
<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.9.min.js"></script>
<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.9.min.js"></script>
<script type="text/javascript">
window.onload=function(){
// create some data and a ColumnDataSource
var x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
var y = x.map(function (v) { return v * 0.5 + 3.0; });
var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });
// create some ranges for the plot
var xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
var ydr = Bokeh.Range1d(-0.5, 20.5);
// make the plot
var plot = new Bokeh.Plot({
title: "BokehJS Plot",
x_range: xdr,
y_range: ydr,
plot_width: 400,
plot_height: 400,
background_fill_color: "#F2F2F7"
});
// add axes to the plot
var xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
var yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
plot.add_layout(xaxis, "below");
plot.add_layout(yaxis, "left");
// add grids to the plot
var xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
var ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
plot.add_layout(xgrid);
plot.add_layout(ygrid);
// add a Line glyph
var line = new Bokeh.Line({
x: { field: "x" },
y: { field: "y" },
line_color: "#666699",
line_width: 2
});
plot.add_glyph(line, source);
// add the plot to a document and display it
var doc = new Bokeh.Document();
doc.add_root(plot);
var div = document.getElementById("myPlot");
Bokeh.embed.add_document_standalone(doc, div);
};
</script>
</head>
<body>
<div id="myPlot"></div>
</body>
</html>
最佳答案
您很可能缺少 api 库。试试下面的例子。
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.9.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.bokeh.org/bokeh/release/bokeh-tables-0.12.9.min.css">
<script type="text/javascript" src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.9.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-0.12.9.min.js"></script>
<script type="text/javascript">
window.onload=function(){
// create some data and a ColumnDataSource
var x = Bokeh.LinAlg.linspace(-0.5, 20.5, 10);
var y = x.map(function (v) { return v * 0.5 + 3.0; });
var source = new Bokeh.ColumnDataSource({ data: { x: x, y: y } });
// create some ranges for the plot
var xdr = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
var ydr = Bokeh.Range1d(-0.5, 20.5);
// make the plot
var plot = new Bokeh.Plot({
title: "BokehJS Plot",
x_range: xdr,
y_range: ydr,
plot_width: 400,
plot_height: 400,
background_fill_color: "#F2F2F7"
});
// add axes to the plot
var xaxis = new Bokeh.LinearAxis({ axis_line_color: null });
var yaxis = new Bokeh.LinearAxis({ axis_line_color: null });
plot.add_layout(xaxis, "below");
plot.add_layout(yaxis, "left");
// add grids to the plot
var xgrid = new Bokeh.Grid({ ticker: xaxis.ticker, dimension: 0 });
var ygrid = new Bokeh.Grid({ ticker: yaxis.ticker, dimension: 1 });
plot.add_layout(xgrid);
plot.add_layout(ygrid);
// add a Line glyph
var line = new Bokeh.Line({
x: { field: "x" },
y: { field: "y" },
line_color: "#666699",
line_width: 2
});
plot.add_glyph(line, source);
// add the plot to a document and display it
var doc = new Bokeh.Document();
doc.add_root(plot);
var div = document.getElementById("myPlot");
Bokeh.embed.add_document_standalone(doc, div);
};
</script>
</head>
<body>
<div id="myPlot"></div>
</body>
</html>
关于javascript - BokehJS 基本示例错误 - 无法读取未定义的属性 'linspace'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46935288/