JavaScriptを用いた開発¶

ブラウザにインタラクティブな描画およびアプリケーションを作成するために、Bokehには、ブラウザにおいて描画およびレンダリングおよびイベント処理のすべての作業を完了するためのクライアントライブラリBokehJSがある。Bokeh Pythonライブラリ(およびR，ScalaやJuliaなどの他の言語のライブラリ)は，JavaScriptやWeb開発を明示的に心配することなく，高レベルでBokehJSと容易にインタラクションする方法である.

しかし，BokehJSは独自のAPIを持ち，BokehJSを直接用いて純JavaScript開発を行うことができる.また、 Bokehを伸ばすカスタムモデルに対しては，通常，BokehJSと直接インタラクションする必要がある.

警告

BokehJS APIはまだ実験的とされており、将来のバージョンで変更される可能性があります。

BokehJSを取得する¶

BokehJSはCDNと npm それがそうです。ご参照ください BokehJS 部分取り付けるページはより詳細な情報を取得するために使用される。

低級モデル.¶

描画やアプリケーション(例えば、ウィザード、字形、ウィジェットなど)を構築するための低レベルなモデル通常Bokeh Pythonモデルと完全に一致していますだから、参考にする Pythonの観点から提示されているにもかかわらず、BoehJSモデルに関する質問に答える主な資源です。

Pythonライブラリの階層組織とは異なり、すべてのJavaScriptモデルは1つのプレーンにあります Bokeh モジュールです。通常はどんなPythonでも ClassName 次のような形で提供する Bokeh.ClassName JavaScriptからですJavaScriptから入手可能な完全モデルリストは、以下の場所で見ることができます。 bokehjs/src/lib/api/models.ts それがそうです。

JavaScriptからモデルを作成する際には，Pythonオブジェクト初期化式に渡されるすべてのキーワードパラメータをJavaScriptオブジェクトとして渡す.次はどうやって Range1d モデルです。まずPythonでは

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

JavaScriptバージョンに対応しています

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

このモデルはおおむね成り立つ.作成後，Bokehモデル属性の両言語での設定方式はまったく同じである.設定します end 値は30に設定した. Range1d 上から使う xdr.end = 30 PythonやJavaScriptで書かれています

一例として、以下の例は、軸、グリッド、および線の字形を含む描画を最初から作成する。中の例と比較する examples/models このレベルでPythonからJavaScriptへの変換はほぼ1対1に表示されます

// 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 = new Bokeh.Range1d({ start: -0.5, end: 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);

Bokeh.Plotting.show(plot);

The code above generates the following plot:

界面¶

BokehJSは、Python Bokehライブラリと同様に、低レベルモデルオブジェクトと対話し、低レベルモデルオブジェクトを構成するための様々な高度なインタフェースを提供する。これらのより高いレベルのインターフェースは現在 Bokeh.Plotting そして Bokeh.Charts それがそうです。

注釈

自.自.起 0.12.2 以下に紹介するAPIはBokehJS APIに分割されており，位置している. bokeh-api.js ファイルは，そのファイルを導入するほか，そのファイルを導入しなければならない. bokeh.js それがそうです。

`Bokeh.Plotting`¶

JavaScript Bokeh.Plotting APIはPythonのポートです bokeh.plotting 界面したがって、ファイル中の情報は基本字を使って印刷するここでの材料に加えて、“ユーザガイド”の部分は、有用な参考とすることができる。

次はPythonの例と非常に似た例です examples/plotting/file/color_scatter.py ：

var plt = Bokeh.Plotting;

// set up some data
var M = 100;
var xx = [];
var yy = [];
var colors = [];
var radii = [];
for (var y = 0; y <= M; y += 4) {
    for (var x = 0; x <= M; x += 4) {
        xx.push(x);
        yy.push(y);
        colors.push(plt.color(50+2*x, 30+2*y, 150));
        radii.push(Math.random() * 0.4 + 1.7)
    }
}

// create a data source
var source = new Bokeh.ColumnDataSource({
    data: { x: xx, y: yy, radius: radii, colors: colors }
});

// make the plot and add some tools
var tools = "pan,crosshair,wheel_zoom,box_zoom,reset,save";
var p = plt.figure({ title: "Colorful Scatter", tools: tools });

// call the circle glyph method to add some circle glyphs
var circles = p.circle({ field: "x" }, { field: "y" }, {
    source: source,
    radius: radii,
    fill_color: colors,
    fill_alpha: 0.6,
    line_color: null
});

// show the plot
plt.show(p);

The code above generates the following plot:

`Bokeh.Charts`¶

JavaScript Bokeh.Charts APIはBokehJS独自の高度なグラフインタフェースである.現在は2つの高度なグラフをサポートしています pie そして bar それがそうです。

`Bokeh.Charts.pie`¶

円グラフの作成には、以下の操作を行ってください Bokeh.Charts.pie 基本的な使い方は

Bokeh.Charts.pie(data, { options })

どこへ行くのか. data JavaScriptオブジェクトです labels そして values 鍵と options 以下のいずれかのオプションキーを有するオブジェクト：

width: 番号をつける -グラフ幅(画素単位)
height: 番号をつける -グラフの高さ(ピクセル)
inner_radius: 番号をつける -楔形内半径(画素単位)
outer_radius: 番号をつける -楔形の外側半径、画素単位
start_angle: 番号をつける -楔形開始角(アーク)
end_angle: 番号をつける -楔形の端角(アーク)
center: [[番号、番号]] - (x, y) 円グラフの中心の位置(画素単位)
palette: Palette | Array<Color> -値を配色するためのパレットまたはカラーリストを指定
slice_labels: “ラベル”|“値”|“パーセント” -ツールは、表示すべき内容を提示します。

デフォルトで作成されたブロック Bokeh.Charts.pie ツール提示とホバリングポリシーを自動的に追加します。次はいくつかの例示的なコードです pie 関数，その生成グラフを以下に示す.

var plt = Bokeh.Plotting;

var pie_data = {
    labels: ['Work', 'Eat', 'Commute', 'Sport', 'Watch TV', 'Sleep'],
    values: [8, 2, 2, 4, 0, 8],
};

var p1 = Bokeh.Charts.pie(pie_data);
var p2 = Bokeh.Charts.pie(pie_data, {
    inner_radius: 0.2,
    start_angle: Math.PI / 2
});
var p3 = Bokeh.Charts.pie(pie_data, {
    inner_radius: 0.2,
    start_angle: Math.PI / 6,
    end_angle: 5 * Math.PI / 6
});
var p4 = Bokeh.Charts.pie(pie_data, {
    inner_radius: 0.2,
    palette: "Oranges9",
    slice_labels: "percentages"
});

// add the plot to a document and display it
var doc = new Bokeh.Document();
doc.add_root(plt.gridplot(
                 [[p1, p2], [p3, p4]],
                 {plot_width:250, plot_height:250}));
Bokeh.embed.add_document_standalone(doc, document.currentScript.parentElement);

The code above generates the following plot:

`Bokeh.Charts.bar`¶

棒グラフを作成するには、以下の操作を実行してください Bokeh.Charts.bar 基本的な使い方は

Bokeh.Charts.bar(data, { options })

どこへ行くのか. data JavaScript配列であり、その要素リストはデータテーブルの“行”から来ています。最初の“行”は列タイトルを含むべきである。以下は、異なる地域の異なる年の販売データを表すことができる例である。

var data = [
    ['Region', 'Year', 'Sales'],
    ['East',   2015,    23000 ],
    ['East',   2016,    35000 ],
    ['West',   2015,    16000 ],
    ['West',   2016,    34000 ],
    ['North',  2016,    12000 ],
];

似たような pie vt.的 options パラメータは、以下のいずれかのオプションキーを有するオブジェクトである。

width: 番号をつける -グラフ幅(画素単位)
height: 番号をつける -グラフの高さ(ピクセル)
stacked: ブル型. -手すりは積むべきか？
orientation: “水平”|“垂直” -バーはどうすればいい？
bar_width: 番号をつける -各ストリップの幅(画素単位)
palette: Palette | Array<Color> -値を配色するためのパレットまたはカラーリストを指定
axis_number_format: ひも. -軸目盛り用のフォーマット文字列

デフォルトでは、作成されたブロックを使用します Bokeh.Charts.bar ツール提示とホバリングポリシーを自動的に追加します。次はいくつかの例示的なコードです bar 関数，その生成グラフを以下に示す.

var plt = Bokeh.Plotting;

var bar_data = [
    ['City', '2010 Population', '2000 Population'],
    ['NYC', 8175000, 8008000],
    ['LA', 3792000, 3694000],
    ['Chicago', 2695000, 2896000],
    ['Houston', 2099000, 1953000],
    ['Philadelphia', 1526000, 1517000],
];

var p1 = Bokeh.Charts.bar(bar_data, {
    axis_number_format: "0.[00]a"
});
var p2 = Bokeh.Charts.bar(bar_data, {
    axis_number_format: "0.[00]a",
    stacked: true
});
var p3 = Bokeh.Charts.bar(bar_data, {
    axis_number_format: "0.[00]a",
    orientation: "vertical"
});
var p4 = Bokeh.Charts.bar(bar_data, {
    axis_number_format: "0.[00]a",
    orientation: "vertical",
    stacked: true
});

plt.show(plt.gridplot([[p1, p2], [p3, p4]], {plot_width:350, plot_height:350}));

The code above generates the following plot:

最小例¶

以下は，ライブラリの正しい導入および描画の動的作成と修正を示す最小例である.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Complete Example</title>

<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.3.min.js" integrity="sha384-T2yuo9Oe71Cz/I4X9Ac5+gpEa5a8PpJCDlqKYO0CfAuEszu1JrXLl8YugMqYe3sM" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.3.min.js" integrity="sha384-98GDGJ0kOMCUMUePhksaQ/GYgB3+NH9h996V88sh3aOiUNX3N+fLXAtry6xctSZ6" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.3.min.js" integrity="sha384-89bArO+nlbP3sgakeHjCo1JYxYR5wufVgA3IbUvDY+K7w4zyxJqssu7wVnfeKCq8" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.2.3.min.js" integrity="sha384-eT3dNscgjXmsGsM0ZO+nTwoL2BpJeNQnXH8gmXJmnEjqTb0ZV7c3jJ27FFe/oh1N" crossorigin="anonymous"></script>

<script>
//The order of CSS and JS imports above is important.
</script>
<script>
// create a data source to hold data
var source = new Bokeh.ColumnDataSource({
    data: { x: [], y: [] }
});

// make a plot with some tools
var plot = Bokeh.Plotting.figure({
    title:'Example of Random data',
    tools: "pan,wheel_zoom,box_zoom,reset,save",
    height: 300,
    width: 300
});

// add a line with data from the source
plot.line({ field: "x" }, { field: "y" }, {
    source: source,
    line_width: 2
});

// show the plot, appending it to the end of the current section
Bokeh.Plotting.show(plot);

function addPoint() {
    // add data --- all fields must be the same length.
    source.data.x.push(Math.random())
    source.data.y.push(Math.random())

    // notify the DataSource of "in-place" changes
    source.change.emit()
}

var addDataButton = document.createElement("Button");
addDataButton.appendChild(document.createTextNode("Add Some Data!!!"));
document.currentScript.parentElement.appendChild(addDataButton);
addDataButton.addEventListener("click", addPoint);

addPoint();
addPoint();
</script>
</head>

<body>
</body>

</html>

The code above generates the following plot:

JavaScriptを用いた開発¶

BokehJSを取得する¶

低級モデル.¶

界面¶

Bokeh.Plotting¶

Bokeh.Charts¶

Bokeh.Charts.pie¶

Bokeh.Charts.bar¶

最小例¶

`Bokeh.Plotting`¶

`Bokeh.Charts`¶

`Bokeh.Charts.pie`¶

`Bokeh.Charts.bar`¶