視覚属性スタイルの設定¶

パレットを使用する¶

パレットは、カラーマッピングテーブルのRGB(A)16進数文字列を定義するシーケンス(リストまたはタプル)であり、設定することができる color 中の複数のブロックオブジェクトの属性 bokeh.plotting それがそうです。Bokehは多くの標準的なBrewerパレットを提供しています。これらのパレットは bokeh.palettes モジュールです。例えば、“Spectral 6”を導入すると、Brewer“Spectral”カラーマッピングテーブルからRGB(A)16進文字列の6要素リストが得られる。

>>> from bokeh.palettes import Spectral6
>>> Spectral6
['#3288bd', '#99d594', '#e6f598', '#fee08b', '#fc8d59', '#d53e4f']

Bokehに含まれるすべての標準パレットは bokeh.palettes それがそうです。カスタムパレットは、RGB(A)16進文字列を作成することによって作成することができる。

マッパーを使用する¶

カラーマッパーは、シーケンス中の値に基づいて、いくつかのデータシーケンスをパレットに符号化することができます。そしてマッパーを color オブジェクト上の属性をマークする.Bokehは、色を符号化するためのいくつかのタイプのマッパーを含む。

bokeh.transform.factor_cmap ：色を特定のカテゴリ要素にマッピングします(参照分類データを処理するもっと細かいことを知っています。
bokeh.transform.linear_cmap ：使用可能な色の数値範囲を高から低へマッピングします。例えば範囲は [0,99] 色が与えられた場合 ['red', 'green', 'blue'] 以下のようにマッピングされます。
```
    x < 0  : 'red'     # values < low are clamped
0 >= x < 33 : 'red'
33 >= x < 66 : 'green'
66 >= x < 99 : 'blue'
99 >= x      : 'blue'    # values > high are clamped
```
bokeh.transform.log_cmap ：似たように linear_cmap 自然対数目盛りを使って色を描くのです

これらのマッパー関数は1つに戻ります DataSpec 属性は，その属性を字形の色属性に渡すことができる.戻りDatpecは1つを含みます bokeh.transform マッピングを作成するために別のコンテキストで使用するためにアクセスすることができます ColorBar 以下の例を示す.

from bokeh.models import ColorBar, ColumnDataSource
from bokeh.palettes import Spectral6
from bokeh.plotting import figure, output_file, show
from bokeh.transform import linear_cmap

output_file("styling_linear_mappers.html", title="styling_linear_mappers.py example")

x = [1,2,3,4,5,7,8,9,10]
y = [1,2,3,4,5,7,8,9,10]

#Use the field name of the column source
mapper = linear_cmap(field_name='y', palette=Spectral6 ,low=min(y) ,high=max(y))

source = ColumnDataSource(dict(x=x,y=y))

p = figure(plot_width=300, plot_height=300, title="Linear Color Map Based on Y")

p.circle(x='x', y='y', line_color=mapper,color=mapper, fill_alpha=1, size=12, source=source)

color_bar = ColorBar(color_mapper=mapper['transform'], width=8,  location=(0,0))

p.add_layout(color_bar, 'right')

show(p)

視覚属性¶

Bokehグラフの視覚属性のスタイルを設定するためには、利用可能な属性が何であるかを知る必要があります。完全な参考にするよく表示される属性には3つのグループがあるにもかかわらず，各オブジェクトのすべての属性を個別に列挙する.これらは

線属性 線の色、幅など。
充填属性 色やAlphaなどを充填する。
テキスト属性 フォントスタイル、色などです。

以下にこれらの内容についてより詳細な情報を示す.

線属性¶

line_color

エッジラインを描くための色

line_width

線画幅(画素単位)

line_alpha

0(透明)と1(不透明)の間の浮動小数点数

line_join

経路セグメントはどのように接続されますか

'miter'
'round'
'bevel'

line_cap

パスセグメントはどのように終了しますか

'butt'
'round'
'square'

line_dash

使用するラインスタイル

'solid'
'dashed'
'dotted'
'dotdash'
'dashdot'
使用する破折番号のスイッチングモードを記述する整数画素距離配列
正規表現‘^(\d+(\s+\d+)*)と？$‘一致したスペース整数文字列は、使用する破折記号のスイッチモードを記述するために使用されます。

line_dash_offset

の距離(画素単位)である. line_dash パターンは

充填属性¶

fill_color: 経路を充填するための色
fill_alpha: 0(透明)と1(不透明)の間の浮動小数点数

パターン充填特性¶

hatch_color

エッジ充填パターンのための色

hatch_alpha

0(透明)と1(不透明)の間の浮動小数点数

hatch_weight

線画幅(画素単位)

hatch_scale

パターンの“大きさ”の大まかな測定。この値はパターンによって異なる特定の意味を持つ.

hatch_pattern

内蔵モードの文字列名(または略語)、または提供されるモードの文字列名 hatch_extra それがそうです。内蔵モードには：

内蔵充填パターン¶
FullName	略語.	例を引く
`blank`	`" "`
`dot`	`"."`
`ring`	`"o"`
`horizontal_line`	`"-"`
`vertical_line`	`"\|"`
`cross`	`"+"`
`horizontal_dash`	`'"'`
`vertical_dash`	`":"`
`spiral`	`"@"`
`right_diagonal_line`	`"/"`
`left_diagonal_line`	`"\\"`
`diagonal_cross`	`"x"`
`right_diagonal_dash`	`","`
`left_diagonal_dash`	"`"
`horizontal_wave`	`"v"`
`vertical_wave`	`">"`
`criss_cross`	`"*"`

hatch_extra

文字列名をカスタムモードで実現されたDICTにマッピングする.この名前は使えます hatch_pattern それがそうです。例えば、次の値が設定されている場合 hatch_extra ：

hatch_extra={ 'mycustom': ImageURLTexture(url=...) }

そして名前です "mycustom" 設定することができます hatch_pattern それがそうです。

テキスト属性¶

text_font

font name, e.g., 'times', 'helvetica'

text_font_size

font size in px, em, or pt, e.g., '16px', '1.5em'

text_font_style

使用するフォントスタイル

'normal' 普通のテキスト
'italic' italic text
'bold' bold text

text_color

テキストを表現するための色

text_alpha

0(透明)と1(不透明)の間の浮動小数点数

text_align

horizontal anchor point for text: 'left', 'right', 'center'

text_baseline

テキストの垂直アンカー

'top'
'middle'
'bottom'
'alphabetic'
'hanging'

注釈

現在は充填テキストのみがサポートされています。テキストの輪郭を描画するためのインタフェースは公開されていない.

可視属性.¶

字形のレンダラー、軸、グリッド、書き込みはすべて1つあります visible 属性、この属性は、それらをオンおよびオフに使用することができる。

from bokeh.io import output_file, show
from bokeh.plotting import figure

# We set-up a standard figure with two lines
p = figure(plot_width=500, plot_height=200, tools='')
visible_line = p.line([1, 2, 3], [1, 2, 1], line_color="blue")
invisible_line = p.line([1, 2, 3], [2, 1, 2], line_color="pink")

# We hide the xaxis, the xgrid lines, and the pink line
invisible_line.visible = False
p.xaxis.visible = False
p.xgrid.visible = False

output_file("styling_visible_property.html")

show(p)

これは、BokehサーバまたはCustomJSを使用した相互作用例において特に有用である。

from bokeh.io import output_file, show
from bokeh.layouts import layout
from bokeh.models import BoxAnnotation, Toggle
from bokeh.plotting import figure

output_file("styling_visible_annotation_with_interaction.html")

p = figure(plot_width=600, plot_height=200, tools='')
p.line([1, 2, 3], [1, 2, 1], line_color="blue")
pink_line = p.line([1, 2, 3], [2, 1, 2], line_color="pink")

green_box = BoxAnnotation(left=1.5, right=2.5, fill_color='green', fill_alpha=0.1)
p.add_layout(green_box)

# Use js_link to connect button active property to glyph visible property

toggle1 = Toggle(label="Green Box", button_type="success", active=True)
toggle1.js_link('active', green_box, 'visible')

toggle2 = Toggle(label="Pink Line", button_type="success", active=True)
toggle2.js_link('active', pink_line, 'visible')

show(layout([p], [toggle1, toggle2]))

色を指定する¶

色属性は、線、充填、またはテキストのための色を指定するために、Bokehの多くの場所に使用される。色値は、以下のいずれかの方法で提供することができる。

any of the 147 named CSS colors, e.g 'green', 'indigo'
an RGB(A) hex value, e.g., '#FF0000', '#44444444'
整数の3元グループ (r，g，b) 0と255の間です
a 4-tuple of (r,g,b,a) where r, g, b are integers between 0 and 255 and a is a floating point value between 0 and 1

警告

色パラメータ(直接またはDataSource列参照として)としてRGBまたはRGBA色タプルリストを提供することは機能しない。あなたは私たちのプロジェクトでこの問題に関する討論を読むことができます。 GitHub ペイジ。提案された解決策は、以下のリストを使用することを含む。

RGB 16進数値
bokeh.colors.RGB 対象(すなわち [RGB(255, 0, 0), RGB(0, 255, 0)"] ）
CSSフォーマットのRGB/RGBA文字列(すなわち、 ["rgb(255, 0, 0)", "rgb(0, 255, 0)"] ）

視覚属性には様々な方法で色Alphaを指定することができる.これは指定されたAlphaを直接用いることで実現できる line|fill_alpha RGBA 4タプルで line|fill_color それがそうです。

また，両者を自由に組み合わせて使用したり，Alphaをまったく使用しないことも可能である.次の図は、LINEとFILL文字の各可能な入力の組み合わせを示しています。

注釈

|boke.ploting|インタフェースを使用する場合、もう1つのオプションは指定です color and/or alpha as a keyword, as well as the demonstrated color properties. These inputs work by applying the provided value to both of the corresponding line and fill properties. However, you can still provide fill|line_alpha or fill|line_color in combination with the color/alpha キーワードは，前者を優先する.

矢印の注釈スタイルの設定¶

いくつありますか ArrowHead 矢印書き込みのサブタイプに適用可能である.設ける start あるいは…。 end 属性をNoneに設定すると、指定された矢印の末端に矢印が適用されません。2つの矢印を同時に設定することで両面矢印を作成することができる start そして end スタイルです。設ける visible 矢印にFalseを設定すると，対応する矢印が見えなくなる.

スクリーン単位とデータ空間単位¶

スクリーン単位は、元の画素数を用いて高さまたは幅を指定し、データ空間単位は、データおよび描画の軸に対して指定される。例えば、x軸とy軸の範囲が0から10までの400画素パターンでは、図形の5分の1幅と高さの字形は80スクリーン単位または2つのデータ空間単位となる。

ブロックオブジェクトの選択¶

As described in 重要な概念を定義する, Bokeh plots comprise graphs of objects that represent all the different parts of the plot: grids, axes, glyphs, etc. In order to style Bokeh plots, it is necessary to first find the right object, then set its various attributes. Some objects have convenience methods to help find the objects of interest (see Axes, Grids, and Legends). But there is also a select() method on Plot that can be used to query for Bokeh plot objects more generally.

例えば、タイプ別にオブジェクトを調べることができます。次のコード断片はすべて返します PanTool 印刷が持つオブジェクト：

>>> p.select(type=PanTool)
[<bokeh.models.tools.PanTool at 0x106608b90>]

♪the select() 方法はまた、他の属性を調べることができます：

>>> p.circle(0, 0, name="mycircle")
<bokeh.plotting.Figure at 0x106608810>

>>> p.select(name="mycircle")
[<bokeh.models.renderers.GlyphRenderer at 0x106a4c810>]

このようなクエリは、設定された視覚属性のスタイルに特に有用である Glyphs それがそうです。

土地の塊.¶

Plot オブジェクト自体には，描画のサイズ，背景，枠，輪郭など，設定可能なパターンの視覚的特徴が多い.本節では，Bokeh描画のこれらの属性をどのように変更するかについて述べる.サンプルコードは、主に|boke.ploting|インタフェースを使用して描画を作成します。ただし，Bokehグラフがどのように作成されているかにかかわらず，説明は適用可能である.

次元数.¶

コントロールのサイズ(幅と高さ) Plot 以下の者がコントロールする plot_width そして plot_height 属性です。これらの値はスクリーン単位であり，任意の軸やタイトル(ただしツールバーではない)を含むキャンバス領域全体の大きさを制御する.|boke.ploting|インタフェースを使用していれば、これらの値を渡すことができます figure() 便宜上、以下の操作を実行してください。

from bokeh.plotting import figure, output_file, show

output_file("dimensions.html")

# create a new plot with specific dimensions
p = figure(plot_width=700)
p.plot_height = 300

p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

応答性次元¶

コンテナを充填するために描画をスケーリングする制御について、参照されている文書 bokeh.models.layouts 特に、特に sizing_mode 財産 LayoutDOM それがそうです。

もしあなたが設定したら sizing_mode vt.的 plot_width そして plot_height コンテナを充填するために描画をレンダリングする際にすぐに変更される可能性があります。しかしながら、これらのパラメータは、描画の初期アスペクト比を計算するために使用されるので、これらを保持したい場合がある。印刷は、描画表示時に問題が生じることを防止するために、最小100 px(高さまたは幅)にのみ調整される。

タイトル¶

ブロックタイトルのパターンは属性によって制御される. Title 書き込みであれば，その書き込みは使用することができる. .title 属性上の Plot それがそうです。ほとんどの基準は Text Properties 利用可能ですが text_align そして text_baseline これは適用されません。描画全体に対してタイトルを位置付けるには、属性を使用してください align そして offset それがそうです。

例えば、タイトルテキストの色やフォントスタイルを設定するには、ご利用ください plot.title.text_color ：

from bokeh.plotting import figure, output_file, show

output_file("title.html")

p = figure(plot_width=400, plot_height=400, title="Some Title")
p.title.text_color = "olive"
p.title.text_font = "times"
p.title.text_font_style = "italic"

p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

背景¶

背景充填様式は background_fill_color そして background_fill_alpha の属性 Plot 目標：

from bokeh.plotting import figure, output_file, show

output_file("background.html")

p = figure(plot_width=400, plot_height=400)
p.background_fill_color = "beige"
p.background_fill_alpha = 0.5

p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

国境線.¶

枠充填様式は border_fill_color そして border_fill_alpha の属性 Plot 物体です。属性を使用して、各辺の最小枠を設定することもできます(画面単位を使用してください

min_border_left

min_border_right

min_border_top

min_border_bottom

また、設定 min_border 便宜上、すべての態様に最小枠設定を適用する。♪the min_border デフォルト値は40 pxである.

from bokeh.plotting import figure, output_file, show

output_file("border.html")

p = figure(plot_width=400, plot_height=400)
p.border_fill_color = "whitesmoke"
p.min_border_left = 80

p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

show(p)

要綱.¶

描画領域の輪郭のパターンは1組からなる. Line Properties 論 Plot 前に書かれています outline_ それがそうです。例えば、輪郭の色を設定するには、お使いください outline_line_color ：

from bokeh.plotting import figure, output_file, show

output_file("outline.html")

p = figure(plot_width=400, plot_height=400)
p.outline_line_width = 7
p.outline_line_alpha = 0.3
p.outline_line_color = "navy"

p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

show(p)

象形文字¶

字形のフィラー，ライン，テキスト属性のスタイルを設定するためには，まず特定のものを取得する必要がある GlyphRenderer それがそうです。|boke.ploting|インタフェースを使用する場合、フォント関数はレンダラーに戻ります。

>>> r = p.circle([1,2,3,4,5], [2,5,8,2,7])
>>> r
<bokeh.models.renderers.GlyphRenderer at 0x106a4c810>

そして字形自体は .glyph 対象の属性 GlyphRenderer ：

>>> r.glyph
<bokeh.models.markers.Circle at 0x10799ba10>

これは、フィラー、ライン、またはテキスト属性値を設定するオブジェクトです。

from bokeh.plotting import figure, output_file, show

output_file("axes.html")

p = figure(plot_width=400, plot_height=400)
r = p.circle([1,2,3,4,5], [2,5,8,2,7])

glyph = r.glyph
glyph.size = 60
glyph.fill_alpha = 0.2
glyph.line_color = "firebrick"
glyph.line_dash = [6, 3]
glyph.line_width = 2

show(p)

選定された字形の選定と取り消し¶

属性は，選定された字形と未選定の字形のスタイルをカスタマイズすることができる. selection_glyph および/または nonselection_glyph の属性 GlyphRenderer 手動でまたはそれを伝達することで add_glyph() それがそうです。

次の図では，|boke.ploting|インタフェースを用いてこれらの属性を設定する方法を示す.描画上の円をクリックまたはタッチすることで、選択されたフォントおよび選択されていないフォントへの影響を見ることができます選択をクリアして元の状態に戻すには、描画中の任意の位置をクリックしてください外円です。

from bokeh.io import output_file, show
from bokeh.models import Circle
from bokeh.plotting import figure

output_file("styling_selections.html")

plot = figure(plot_width=400, plot_height=400, tools="tap", title="Select a circle")
renderer = plot.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=50)

selected_circle = Circle(fill_alpha=1, fill_color="firebrick", line_color=None)
nonselected_circle = Circle(fill_alpha=0.2, fill_color="blue", line_color="firebrick")

renderer.selection_glyph = selected_circle
renderer.nonselection_glyph = nonselected_circle

show(plot)

選択された字形または選択されていないフォントの色またはAlphaパラメータを設定するだけでよい場合、色およびAlphaパラメータ(プレフィックスはglyph関数に提供することによって "selection_" あるいは…。 "nonselection_" それがそうです。次の図はこの技術を示しています

from bokeh.io import output_file, show
from bokeh.plotting import figure

output_file("styling_selections.html")

plot = figure(plot_width=400, plot_height=400, tools="tap", title="Select a circle")
renderer = plot.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=50,

                       # set visual properties for selected glyphs
                       selection_color="firebrick",

                       # set visual properties for non-selected glyphs
                       nonselection_fill_alpha=0.2,
                       nonselection_fill_color="blue",
                       nonselection_line_color="firebrick",
                       nonselection_line_alpha=1.0)

show(plot)

Modelsインタフェースを用いても同様の目的を実現することができ，以下のようになる.

p = Plot()
source = ColumnDataSource(dict(x=[1, 2, 3], y=[1, 2, 3]))

initial_circle = Circle(x='x', y='y', fill_color='blue', size=50)
selected_circle = Circle(fill_alpha=1, fill_color="firebrick", line_color=None)
nonselected_circle = Circle(fill_alpha=0.2, fill_color="blue", line_color="firebrick")

p.add_glyph(source,
            initial_circle,
            selection_glyph=selected_circle,
            nonselection_glyph=nonselected_circle)

注釈

唯 目視する. の属性 selection_glyph そして nonselection_glyph レンダリングする時に考える。位置、大きさなどを変更するのは役に立ちません。

ホバリング検査.¶

上にジャンプするための凸状の表示ポリシーは、設定と完全に類似しています selection_glyph あるいは…。 nonselection_glyph 接頭辞を持つ色やAlphaパラメータを渡すことで "hover_" それがそうです。次の例は、後者の方法を示す。

from bokeh.models import HoverTool
from bokeh.plotting import figure, output_file, show
from bokeh.sampledata.glucose import data

output_file("styling_hover.html")

subset = data.loc['2010-10-06']

x, y = subset.index.to_series(), subset['glucose']

# Basic plot setup
plot = figure(plot_width=600, plot_height=300, x_axis_type="datetime", tools="",
              toolbar_location=None, title='Hover over points')

plot.line(x, y, line_dash="4 4", line_width=1, color='gray')

cr = plot.circle(x, y, size=20,
                fill_color="grey", hover_fill_color="firebrick",
                fill_alpha=0.05, hover_alpha=0.3,
                line_color=None, hover_line_color="white")

plot.add_tools(HoverTool(tooltips=None, renderers=[cr], mode='hline'))

show(plot)

注釈

唯 目視する. の属性 hover_glyph レンダリングする時に考える。位置、大きさなどを変更するのは役に立ちません。

工具被覆¶

いくつかのBokehツールはまた、構成可能な視覚属性を有する。例えば、様々な領域選択ツールや枠縮小ツールがあります overlay そのラインとフィラー属性を設定することができます：

import numpy as np

from bokeh.models import BoxSelectTool, BoxZoomTool, LassoSelectTool
from bokeh.plotting import figure, output_file, show

output_file("styling_tool_overlays.html")

x = np.random.random(size=200)
y = np.random.random(size=200)

# Basic plot setup
plot = figure(plot_width=400, plot_height=400, title='Select and Zoom',
              tools="box_select,box_zoom,lasso_select,reset")

plot.circle(x, y, size=5)

select_overlay = plot.select_one(BoxSelectTool).overlay

select_overlay.fill_color = "firebrick"
select_overlay.line_color = None

zoom_overlay = plot.select_one(BoxZoomTool).overlay

zoom_overlay.line_color = "olive"
zoom_overlay.line_width = 8
zoom_overlay.line_dash = "solid"
zoom_overlay.fill_color = None

plot.select_one(LassoSelectTool).overlay.line_dash = [10, 10]

show(plot)

軸心.¶

本節では、Bokeh描画軸の様々な視覚属性を変更する方法を学習します。

To set style attributes on Axis objects, use the xaxis, yaxis, and axis methods on Plot to first obtain a plot's Axis objects:

>>> p.xaxis
[<bokeh.models.axes.LinearAxis at 0x106fa2390>]

これは、(複数の軸オブジェクトがある可能性があるので)1つの軸オブジェクトリストを返す。しかし、便宜上、これらのリストは 飛び散ることができる これは、リスト内のすべての軸に適用される属性をこの結果に直接設定することができることを意味します。

p.xaxis.axis_label = "Temperature"

変更します axis_label X軸ごとに(いくつあっても).

以下に軸のいくつかの属性を設定するコードを示す.このコードを実行し、他の属性を設定しようと試みることができます。

from bokeh.plotting import figure, output_file, show

output_file("axes.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

# change just some things about the x-axis
p.xaxis.axis_label = "Temp"
p.xaxis.axis_line_width = 3
p.xaxis.axis_line_color = "red"

# change just some things about the y-axis
p.yaxis.axis_label = "Pressure"
p.yaxis.major_label_text_color = "orange"
p.yaxis.major_label_orientation = "vertical"

# change things on all axes
p.axis.minor_tick_in = -3
p.axis.minor_tick_out = 6

show(p)

ラベル¶

軸の全体ラベルのテキストは axis_label 財産です。他にも Text Properties 接頭辞は axis_label_ タグの視覚的な外観を制御しています例えば、ラベルの色を設定するには、設定してください axis_label_text_color それがそうです。最後に、軸ラベルと主目盛りラベルの間の距離を変更しますので、設定してください axis_label_standoff 財産：

from bokeh.plotting import figure, output_file, show

output_file("bounds.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

p.xaxis.axis_label = "Lot Number"
p.xaxis.axis_label_text_color = "#aa6666"
p.xaxis.axis_label_standoff = 30

p.yaxis.axis_label = "Bin Count"
p.yaxis.axis_label_text_font_style = "italic"

show(p)

界¶

場合によっては，描画軸の境界を制限することが有用である.これは設定することで bounds 属性は二元グループに設定します (開始、終了) ：

from bokeh.plotting import figure, output_file, show

output_file("bounds.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

p.xaxis.bounds = (2, 4)

show(p)

目盛り線位置¶

Bokehにはいくつかの“自動価格器”モデルがあり，ダニのために適切な位置を選択することができる。これらの配置は .ticker 軸の属性。|boke.ploting|インタフェースを用いて，適切な自動受信機タイプ(分類，日時，インクカートリッジ，線形または対数目盛り)を自動的に選択するのが一般的である.しかし、場合によっては、より明確な制御が有用である。

`FixedTicker`¶

この自動受信機モデルは、例えば、ユーザが正確な自動受信機位置を明示的に指定することを可能にする。

from bokeh.plotting import figure
from bokeh.models.tickers import FixedTicker

p = figure()

# no additional tick locations will be displayed on the x-axis
p.xaxis.ticker = FixedTicker(ticks=[10, 20, 37.4])

しかし、ショートカット方式として、例えば、フックリストを直接提供するようにしてもよい。 p.xaxis.ticker = [10, 20, 37.4] それがそうです。以下の例にこの方法を示す.

from bokeh.plotting import figure, output_file, show

output_file("fixed_ticks.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

p.xaxis.ticker = [2, 3.5, 4]

show(p)

目盛り線.¶

メイン目盛りとサブスケールの視覚的外観は Line Properties 接頭辞は major_tick_ and minor_tick_, respectively. For instance, to set the color of the major ticks, use major_tick_line_color. To hide either set of ticks, set the color to None. Additionally, you can control how far in and out of the plotting area the ticks extend with the properties major_tick_in/major_tick_out そして minor_tick_in/minor_tick_out それがそうです。これらの値は画面単位で表され，負の値は受け入れられる.

from bokeh.plotting import figure, output_file, show

output_file("axes.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

p.xaxis.major_tick_line_color = "firebrick"
p.xaxis.major_tick_line_width = 3
p.xaxis.minor_tick_line_color = "orange"

p.yaxis.minor_tick_line_color = None

p.axis.major_tick_out = 10
p.axis.minor_tick_in = -3
p.axis.minor_tick_out = 8

show(p)

記号ラベル形式¶

軸ラベルのテキストスタイルは TickFormatter 軸上に配置された対象 formatter 財産です。Bokehは、様々な場合、多くの自動受信機を使用してプログラムをデフォルトでフォーマットします：

BasicTickFormatter -線形軸のデフォルトフォーマット手順。
CategoricalTickFormatter -分類軸のデフォルトフォーマットプログラム。
DatetimeTickFormatter -日時軸のデフォルトフォーマット手順。
LogTickFormatter -対数軸のデフォルトフォーマット手順。

これらのデフォルトスケールフォーマットプログラムは、多くの構成可能な属性を開示しない。より細粒度のレベルで目盛り線フォーマットを制御する場合は、ご利用ください NumeralTickFormatter あるいは…。 PrintfTickFormatter 以下に述べる.

注釈

軸上のスケールフォーマットプログラムを置き換えるには formatter 属性は実際のものに設定する Axis オブジェクトは，展開可能リストにはない.だから p.yaxis[0].formatter ちょっと待って(下書き付き) [0] )が使用される。

`NumeralTickFormatter`¶

♪the NumeralTickFormatter Vbl.ある format 軸スケールを制御するテキストフォーマットに使用することができる属性。

from bokeh.models import NumeralTickFormatter
from bokeh.plotting import figure, output_file, show

output_file("gridlines.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

p.xaxis[0].formatter = NumeralTickFormatter(format="0.0%")
p.yaxis[0].formatter = NumeralTickFormatter(format="$0.00")

show(p)

他にも利用可能なフォーマットがたくさんあります。完全な内容を表示する NumeralTickFormatter 中の文書参考にするそれがそうです。

`PrintfTickFormatter`¶

♪the PrintfTickFormatter Vbl.ある format 軸スケールを制御するテキストフォーマットに使用することができる属性。 printf スタイル形式文字列。

from bokeh.models import PrintfTickFormatter
from bokeh.plotting import figure, output_file, show

output_file("gridlines.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

p.xaxis[0].formatter = PrintfTickFormatter(format="%4.1e")
p.yaxis[0].formatter = PrintfTickFormatter(format="%5.3f mu")

show(p)

フォーマットの完全な詳細については、完全なものを参照してください PrintfTickFormatter 中の文書参考にするそれがそうです。

`FuncTickFormatter`¶

♪the FuncTickFormatter 任意のスケール形式の実行を許可する方法は，JavaScriptコードセグメントを提供することである. code 財産です。変数 tick フォーマットされていない刻み値が含まれ、レンダリング時にコードセグメントまたは関数命名空間に現れることが予想される。以下の例はどのように構成されるかを示す. FuncTickFormatter 純粋なJavaScriptから：

from bokeh.models import FuncTickFormatter
from bokeh.plotting import figure, output_file, show

output_file("formatter.html")

p = figure(plot_width=500, plot_height=500)
p.circle([0, 2, 4, 6, 8, 10], [6, 2, 4, 10, 8, 0], size=30)

p.yaxis.formatter = FuncTickFormatter(code="""
    return Math.floor(tick) + " + " + (tick % 1).toFixed(2)
""")

show(p)

記号ラベル方向¶

メイン目盛線ラベルの方向はご利用いただけます major_label_orientation 財産です。この属性は以下の値を受け取る "horizontal" あるいは…。 "vertical" または水平方向から回転する角度(アークで表される)の浮動小数点数を与える：

from math import pi

from bokeh.plotting import figure, output_file, show

output_file("gridlines.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

p.xaxis.major_label_orientation = pi/4
p.yaxis.major_label_orientation = "vertical"

show(p)

Bokeh軸は、より多くの属性を構成することをサポートします。様々なタイプのBokeh軸上に設定可能なすべての属性の完全リストについては、参照されたい bokeh.models.axes 部分参考にするそれがそうです。

ゲート？ゲート¶

本節では、Bokehブロックのネットグリッド線とグリッドバンドの視覚的属性を設定する方法を学習します。

Similar to the convenience methods for axes, there are xgrid, ygrid, and grid methods on Plot that can be used to obtain a plot's Grid objects:

>>> p.grid
[<bokeh.models.grids.Grid at 0x106fa2278>,
 <bokeh.models.grids.Grid at 0x106fa22e8>]

これらの方法はまた、展開可能リストを返して、単一のオブジェクトを設定するようにリスト上の属性を設定することができ、リスト内の各要素の属性は変更されます。

p.grid.line_dash = [4 2]

注釈

♪the xgrid 属性提供メッシュオブジェクト 交わって X軸(すなわち垂直)である。それに応じて ygrid Y軸と交差する(すなわち、水平方向)グリッドオブジェクトを提供する。

線.線¶

グリッド線の視覚的な外観は Line Properties 接頭辞は grid_ それがそうです。例えば、グリッド線の色を設定する場合は、ご利用ください grid_line_color それがそうです。グリッド線を隠すには、その線の色を設定してください None それがそうです。

from bokeh.plotting import figure, output_file, show

output_file("gridlines.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

# change just some things about the x-grid
p.xgrid.grid_line_color = None

# change just some things about the y-grid
p.ygrid.grid_line_alpha = 0.5
p.ygrid.grid_line_dash = [6, 4]

show(p)

副次的な回線.¶

サブグリッド線の視覚的な外観は Line Properties 接頭辞は minor_grid_ それがそうです。例えば、グリッド線の色を設定する場合は、ご利用ください minor_grid_line_color それがそうです。デフォルトの場合、サブ格メッシュラインは隠れ状態にあります(すなわち、それらのライン色は設定されています None ）。

from bokeh.plotting import figure, output_file, show

output_file("minorgridlines.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

# change just some things about the y-grid
p.ygrid.minor_grid_line_color = 'navy'
p.ygrid.minor_grid_line_alpha = 0.1

show(p)

バンド.バンド¶

隣接する格子線の間に充填された斜線を表示することができる。これらのゾーンの視覚的な外観は Fill Properties そして、 Hatch Properties 接頭辞は band_ それがそうです。例えば、グリッドバンドの色を設定するには、ご利用ください band_fill_color それがそうです。メッシュバンド領域を隠すには、充填色を設定してください None (これはデフォルト設定です)。

以下の例は、無地色で充填されたバンド領域を示す。

from bokeh.plotting import figure, output_file, show

output_file("grid_band_fill.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

# change just some things about the x-grid
p.xgrid.grid_line_color = None

# change just some things about the y-grid
p.ygrid.band_fill_alpha = 0.1
p.ygrid.band_fill_color = "navy"

show(p)

次に、充填パターンを示す添字欄の一例を示す。

from bokeh.io import output_file, show
from bokeh.plotting import figure

output_file("grid_band_hatch.html")

p = figure(plot_height=250, plot_width=600, x_range=(0, 10), tools="", toolbar_location=None)
p.line(x=[0,1,2,3,4,5,6,7,8,9,10],
       y=[1,3,4,3,1,2,6,5,2,3,4])

p.ygrid.grid_line_color = None

ticks = [0, 2, 4, 6, 8, 10]
p.xaxis[0].ticker = ticks
p.xgrid[0].ticker = ticks

p.xgrid.band_hatch_pattern = "/"
p.xgrid.band_hatch_alpha = 0.6
p.xgrid.band_hatch_color = "lightgrey"
p.xgrid.band_hatch_weight = 0.5
p.xgrid.band_hatch_scale = 10

show(p)

界¶

グリッドはまた、グリッドを描画する明示的な境界を設定することをサポートする。2次元グループを持つ軸境界と同じように設定されています (開始、終了) ：

from bokeh.plotting import figure, output_file, show

output_file("bounds.html")

p = figure(plot_width=400, plot_height=400)
p.circle([1,2,3,4,5], [2,5,8,2,7], size=10)

p.grid.bounds = (2, 4)

show(p)

Bokeh Gridは他の属性の構成もサポートしています。Bokeh描画グリッド上に設定可能なすべての属性の完全リストについては、参照されたい bokeh.models.grids 部分参考にするそれがそうです。

伝説¶

軸やメッシュの便利な方法と似ています legend 開け方 Plot 1つのストーリーを手に入れることができます Legend 対象：

>>> p.legend
[<bokeh.models.annotations.Legend at 0x106fa2278>]

この方法はまた、単一のオブジェクトを設定するようにリスト上の属性を設定することができ、リスト内の各要素が属性を変更することができるように、映写可能リストを返します。

p.legend.label_text_font = "times"

位置決め¶

図例ラベルの位置は location 財産です。

絵図内の¶

中心レイアウト領域における図の例については、例えば、自動的に作成された図の例 bokeh.plotting 、値は location はい、そうです。

"top_left"

"top_center"

"top_right" (デフォルト設定)

"center_right"

"bottom_right"

"bottom_center"

"bottom_left"

"center_left"

"center"

あるいは1つ (x, y) 画面座標における絶対位置(左下から始まる画素)を示すタプル。

import numpy as np

from bokeh.plotting import figure, output_file, show

x = np.linspace(0, 4*np.pi, 100)
y = np.sin(x)

output_file("legend_labels.html")

p = figure()

p.circle(x, y, legend_label="sin(x)")
p.line(x, y, legend_label="sin(x)")

p.line(x, 2*y, legend_label="2*sin(x)",
       line_dash=[4, 4], line_color="orange", line_width=2)

p.square(x, 3*y, legend_label="3*sin(x)", fill_color=None, line_color="green")
p.line(x, 3*y, legend_label="3*sin(x)", line_color="green")

p.legend.location = "bottom_left"

show(p)

絵画エリアの外では¶

図例を中心領域の外に置くことも可能であり，方法は使用する. add_layout 方法ですが作成する必要があります Legend 直接対象：

import numpy as np

from bokeh.models import Legend
from bokeh.plotting import figure, output_file, show

x = np.linspace(0, 4*np.pi, 100)
y = np.sin(x)

output_file("legend_labels.html")

p = figure(toolbar_location="above")

r0 = p.circle(x, y)
r1 = p.line(x, y)

r2 = p.line(x, 2*y, line_dash=[4, 4], line_color="orange", line_width=2)

r3 = p.square(x, 3*y, fill_color=None, line_color="green")
r4 = p.line(x, 3*y, line_color="green")

legend = Legend(items=[
    ("sin(x)"   , [r0, r1]),
    ("2*sin(x)" , [r2]),
    ("3*sin(x)" , [r3, r4]),
], location="center")

p.add_layout(legend, 'right')

show(p)

この用例では，位置を絶対に指定しなければならない将来のバージョンには、図面のインスタンスの位置をレイアウトするための他のオプションが追加されます。

タイトル¶

図の例にはタイトルがあります title 財産：

plot.legend.title = "Division"

図例タイトルの視覚的外観は Text Properties 接頭辞は title_ それがそうです。例えば、図の例のフォントスタイルを設定するには、ご利用ください title_text_font_style それがそうです。

タイトルと図の例の残りの部分の分離距離(画素単位)は title_standoff 財産です。

import pandas as pd

from bokeh.palettes import Spectral4
from bokeh.plotting import figure, output_file, show
from bokeh.sampledata.stocks import AAPL, GOOG, IBM, MSFT

output_file("styling_legend_title.html", title="styling_legend_title.py example")

p = figure(plot_width=800, plot_height=250, x_axis_type="datetime")

for data, name, color in zip([AAPL, IBM, MSFT, GOOG], ["AAPL", "IBM", "MSFT", "GOOG"], Spectral4):
    df = pd.DataFrame(data)
    df['date'] = pd.to_datetime(df['date'])
    p.line(df['date'], df['close'], line_width=2, color=color, legend_label=name)

p.legend.location = "top_left"
p.legend.title = 'Stock'
p.legend.title_text_font_style = "bold"
p.legend.title_text_font_size = "20px"

show(p)

方向性.¶

図の例の方向は orientation 財産です。この属性の有効値は，

"vertical"

"horizontal"

デフォルト方向は "vertical" それがそうです。

import numpy as np

from bokeh.plotting import figure, output_file, show

x = np.linspace(0, 4*np.pi, 100)
y = np.sin(x)

output_file("legend_labels.html")

p = figure()

p.circle(x, y, legend_label="sin(x)")
p.line(x, y, legend_label="sin(x)")

p.line(x, 2*y, legend_label="2*sin(x)",
       line_dash=[4, 4], line_color="orange", line_width=2)

p.square(x, 3*y, legend_label="3*sin(x)", fill_color=None, line_color="green")
p.line(x, 3*y, legend_label="3*sin(x)", line_color="green")

p.legend.orientation = "horizontal"

show(p)

ラベルテキスト¶

図例ラベルの視覚的外観は Text Properties 接頭辞は label_ それがそうです。例えば、ラベルのフォントスタイルを設定するには、ご利用ください label_text_font_style それがそうです。

import numpy as np

from bokeh.plotting import figure, output_file, show

x = np.linspace(0, 4*np.pi, 100)
y = np.sin(x)

output_file("legend_labels.html")

p = figure()

p.circle(x, y, legend_label="sin(x)")
p.line(x, y, legend_label="sin(x)")

p.line(x, 2*y, legend_label="2*sin(x)",
       line_dash=[4, 4], line_color="orange", line_width=2)

p.square(x, 3*y, legend_label="3*sin(x)", fill_color=None, line_color="green")
p.line(x, 3*y, legend_label="3*sin(x)", line_color="green")

p.legend.label_text_font = "times"
p.legend.label_text_font_style = "italic"
p.legend.label_text_color = "navy"

show(p)

国境線.¶

図の枠の視覚的外観は Line Properties 接頭辞は border_ それがそうです。例えば、枠の色を設定する場合は、ご利用ください border_line_color それがそうです。枠が見えないように、枠の色を設定してください None それがそうです。

import numpy as np

from bokeh.plotting import figure, output_file, show

x = np.linspace(0, 4*np.pi, 100)
y = np.sin(x)

output_file("legend_border.html")

p = figure()

p.circle(x, y, legend_label="sin(x)")
p.line(x, y, legend_label="sin(x)")

p.line(x, 2*y, legend_label="2*sin(x)",
       line_dash=[4, 4], line_color="orange", line_width=2)

p.square(x, 3*y, legend_label="3*sin(x)", fill_color=None, line_color="green")
p.line(x, 3*y, legend_label="3*sin(x)", line_color="green")

p.legend.border_line_width = 3
p.legend.border_line_color = "navy"
p.legend.border_line_alpha = 0.5

show(p)

背景¶

図の背景の視覚的外観は Fill Properties 接頭辞は background_ それがそうです。例えば、背景色を設定する場合は、ご利用ください background_fill_color それがそうです。背景を透明にするには、 background_fill_alpha 至る 0 それがそうです。

import numpy as np

from bokeh.plotting import figure, output_file, show

x = np.linspace(0, 4*np.pi, 100)
y = np.sin(x)

output_file("legend_background.html")

p = figure()

p.circle(x, y, legend_label="sin(x)")
p.line(x, y, legend_label="sin(x)")

p.line(x, 2*y, legend_label="2*sin(x)",
       line_dash=[4, 4], line_color="orange", line_width=2)

p.square(x, 3*y, legend_label="3*sin(x)", fill_color=None, line_color="green")
p.line(x, 3*y, legend_label="3*sin(x)", line_color="green")

#  3*sin(x) curve should be under this legend at initial viewing, so
# we can see that the legend is transparent
p.legend.location = "bottom_right"
p.legend.background_fill_color = "navy"
p.legend.background_fill_alpha = 0.5

show(p)

次元数.¶

図の例の構成要素のレイアウト、間隔などを制御するために使用することができるいくつかの属性がある。

label_standoff¶

属性タイプ： Int

ラベルとその関連字形を区切る距離(画素単位)である.

label_width¶

属性タイプ： Int

図例ラベルが占めるべき領域の最小幅(画素単位)である.

label_height¶

属性タイプ： Int

図例タグが占めるべき領域の最小高さ(画素単位)である.

glyph_width¶

属性タイプ： Int

レンダリングされたインスタンスフラグ記号が占めるべき幅(画素単位)である.

glyph_height¶

属性タイプ： Int

レンダリングされたインスタンスフラグ記号が占めるべき高さ(画素単位)である.

padding¶

属性タイプ： Int

例の内容周囲の充填量を示す.枠が見える場合にのみ適用され、そうでなければ0に折り畳まれる。

spacing¶

属性タイプ： Int

図のエントリ間の間隔(画素単位)である。

margin¶

属性タイプ： Int

図例周囲のページ辺距離.

import numpy as np

from bokeh.plotting import figure, output_file, show

x = np.linspace(0, 4*np.pi, 100)
y = np.sin(x)

output_file("legend_labels.html")

p = figure()

p.circle(x, y, legend_label="sin(x)")
p.line(x, y, legend_label="sin(x)")

p.line(x, 2*y, legend_label="2*sin(x)",
       line_dash=[4, 4], line_color="orange", line_width=2)

p.square(x, 3*y, legend_label="3*sin(x)", fill_color=None, line_color="green")
p.line(x, 3*y, legend_label="3*sin(x)", line_color="green")

p.legend.label_standoff = 5
p.legend.glyph_width = 50
p.legend.spacing = 10
p.legend.padding = 50
p.legend.margin = 50

show(p)

レンダリングレベル.¶

Bokehには、描画オブジェクトの順序を指定するレンダリングレベルの概念がある。

影像.: “最低”レンダリングレベル、優先描画
底図を参考にする.: グリッドのデフォルトレンダリングレベル
字形になる.: すべての字形(すなわちメッシュの上)のデフォルトレンダリングレベル
注釈をつける.: レンダラのデフォルトレンダリングレベルを書き込みます
カバー層.: ツール·カバレッジに適した“最高”レンダリングレベル

所与のレベルで、レンダラは追加された順に描画されます。場合によっては、レンダリングレベルを明示的に指定することが有用である。これは設定することで level パラメータはレンダラに設定されています。例えば、画像を表示させるためには、以下の操作を実行してください因るグリッド線を呼んでください。

p.image(..., level="image")

出力付きの完全な例を節で見ることができますカラーマッピング画像それがそうです。

視覚属性スタイルの設定¶

パレットを使用する¶

マッパーを使用する¶

視覚属性¶

線属性¶

充填属性¶

パターン充填特性¶

テキスト属性¶

可視属性.¶

色を指定する¶

矢印の注釈スタイルの設定¶

スクリーン単位とデータ空間単位¶

ブロックオブジェクトの選択¶

土地の塊.¶

次元数.¶

応答性次元¶

タイトル¶

背景¶

国境線.¶

要綱.¶

象形文字¶

選定された字形の選定と取り消し¶

ホバリング検査.¶

工具被覆¶

ツールバーは自動的に隠されています¶

軸心.¶

ラベル¶

界¶

目盛り線位置¶

FixedTicker¶

目盛り線.¶

記号ラベル形式¶

NumeralTickFormatter¶

PrintfTickFormatter¶

FuncTickFormatter¶

記号ラベル方向¶

ゲート？ゲート¶

線.線¶

副次的な回線.¶

バンド.バンド¶

界¶

伝説¶

位置決め¶

絵図内の¶

絵画エリアの外では¶

タイトル¶

方向性.¶

ラベルテキスト¶

国境線.¶

背景¶

次元数.¶

レンダリングレベル.¶

`FixedTicker`¶

`NumeralTickFormatter`¶

`PrintfTickFormatter`¶

`FuncTickFormatter`¶