Bokeh 简明教程

Bokeh - Developing with JavaScript

Bokeh Python 库和 R、Scala 和 Julia 等其他语言的库主要在高级别与 BokehJS 交互。Python 程序员不必担心 JavaScript 或 web 开发。但是，有人可以使用 BokehJS API 直接使用 BokehJS 进行纯 JavaScript 开发。

The Bokeh Python library, and libraries for Other Languages such as R, Scala, and Julia, primarily interacts with BokehJS at a high level. A Python programmer does not have to worry about JavaScript or web development. However, one can use BokehJS API, to do pure JavaScript development using BokehJS directly.

内置于 Bokeh Python API 中的字形和窗口小部件等 BokehJS 对象的构建方式或多或少类似。通常，任何 Python ClassName 都可以在 JavaScript 中作为 Bokeh.ClassName 使用。例如，在 Python 中获得的 Range1d 对象。

BokehJS objects such as glyphs and widgets are built more or less similarly as in Bokeh Python API. Typically, any Python ClassName is available as Bokeh.ClassName from JavaScript. For example, a Range1d object as obtained in Python.

xrange = Range1d(start=-0.5, end=20.5)

它通过 BokehJS 以如下方式等效获得 -

It is equivalently obtained with BokehJS as −

var xrange = new Bokeh.Range1d({ start: -0.5, end: 20.5 });

当以下 JavaScript 代码嵌入 HTML 文件中时，会在浏览器中呈现一个简单的折线图。

Following JavaScript code when embedded in a HTML file renders a simple line plot in the browser.

首先在网页的 <head>..</head> 部分中包含所有 BokehJS 库，如下所示

First include all BokehJS libraries in <head>..</head> secion of web page as below

<head>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-widgets-1.3.4.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-tables-1.3.4.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-gl-1.3.4.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.3.4.min.js"></script>
<script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-api-1.3.4.min.js"></script>
</head>

在 body 部分中，以下 JavaScript 片段构建 Bokeh Plot 的各个部分。

In the body section following snippets of JavaScript construct various parts of a Bokeh Plot.

<script>
// 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 } });
// make the plot
var plot = new Bokeh.Plot({
   title: "BokehJS Plot",
   plot_width: 400,
   plot_height: 400
});

// 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 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);

Bokeh.Plotting.show(plot);
</script>

将以上代码保存为网页，然后在选定的浏览器中打开它。

Save above code as a web page and open it in a browser of your choice.

bokehjs libraries