Bokeh - Phát triển với JavaScript
Thư viện Bokeh Python và các thư viện dành cho các Ngôn ngữ khác như R, Scala và Julia, chủ yếu tương tác với BokehJS ở cấp độ cao. Một lập trình viên Python không phải lo lắng về JavaScript hoặc phát triển web. Tuy nhiên, người ta có thể sử dụng BokehJS API, để thực hiện phát triển JavaScript thuần túy bằng cách sử dụng BokehJS trực tiếp.
Các đối tượng BokehJS như glyphs và widget được xây dựng ít nhiều tương tự như trong Bokeh Python API. Thông thường, bất kỳ Tên lớp Python nào đều có sẵn dưới dạngBokeh.ClassNametừ JavaScript. Ví dụ, một đối tượng Range1d được lấy trong Python.
xrange = Range1d(start=-0.5, end=20.5)
Nó thu được tương đương với BokehJS là -
var xrange = new Bokeh.Range1d({ start: -0.5, end: 20.5 });
Mã JavaScript sau khi được nhúng trong tệp HTML sẽ hiển thị một biểu đồ dòng đơn giản trong trình duyệt.
Đầu tiên hãy bao gồm tất cả các thư viện BokehJS trong phần <head> .. </head> của trang web như bên dưới
<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>
Trong phần nội dung sau các đoạn mã JavaScript xây dựng các phần khác nhau của Biểu đồ Bokeh.
<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>
Lưu mã trên dưới dạng trang web và mở nó trong trình duyệt bạn chọn.