Bokeh - Berkembang dengan JavaScript
Pustaka Bokeh Python, dan pustaka untuk Bahasa Lain seperti R, Scala, dan Julia, terutama berinteraksi dengan BokehJS pada tingkat tinggi. Seorang programmer Python tidak perlu khawatir tentang JavaScript atau pengembangan web. Namun, seseorang dapat menggunakan BokehJS API, untuk melakukan pengembangan JavaScript murni menggunakan BokehJS secara langsung.
Objek BokehJS seperti mesin terbang dan widget dibuat kurang lebih mirip dengan Bokeh Python API. Biasanya, Nama Kelas Python apa pun tersedia sebagaiBokeh.ClassNamedari JavaScript. Misalnya, objek Range1d seperti yang diperoleh dengan Python.
xrange = Range1d(start=-0.5, end=20.5)Ini secara setara diperoleh dengan BokehJS sebagai -
var xrange = new Bokeh.Range1d({ start: -0.5, end: 20.5 });Mengikuti kode JavaScript saat disematkan dalam file HTML membuat plot garis sederhana di browser.
Pertama, sertakan semua pustaka BokehJS di bagian <head> .. </head> halaman web seperti di bawah ini
<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>Di bagian body berikut cuplikan JavaScript menyusun berbagai bagian 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>Simpan kode di atas sebagai halaman web dan buka di browser pilihan Anda.
