Bokeh - JavaScript ile Geliştirme
Bokeh Python kitaplığı ve R, Scala ve Julia gibi Diğer Diller için kitaplıklar, öncelikle BokehJS ile yüksek düzeyde etkileşim kurar. Bir Python programcısının JavaScript veya web geliştirme konusunda endişelenmesine gerek yoktur. Bununla birlikte, doğrudan BokehJS kullanarak saf JavaScript geliştirme yapmak için BokehJS API kullanılabilir.
Glifler ve widget'lar gibi BokehJS nesneleri, Bokeh Python API'de olduğu gibi aşağı yukarı benzer şekilde oluşturulur. Tipik olarak, herhangi bir Python SınıfAdı şu şekilde mevcuttur:Bokeh.ClassNameJavaScript'ten. Örneğin, Python'da elde edildiği şekliyle bir Range1d nesnesi.
xrange = Range1d(start=-0.5, end=20.5)BokehJS ile eşdeğer olarak şu şekilde elde edilir:
var xrange = new Bokeh.Range1d({ start: -0.5, end: 20.5 });Bir HTML dosyasına katıştırıldığında JavaScript kodunu izlemek, tarayıcıda basit bir çizgi grafiği oluşturur.
Öncelikle aşağıdaki gibi web sayfasının <head> .. </head> bölümüne tüm BokehJS kitaplıklarını ekleyin
<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>JavaScript parçacıklarını takip eden gövde bölümünde bir Bokeh Grafiğinin çeşitli kısımlarını oluşturur.
<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>Yukarıdaki kodu bir web sayfası olarak kaydedin ve seçtiğiniz bir tarayıcıda açın.
