如何在散景小部件之间添加间距答案

【问题标题】：How to add spacing between Bokeh widgets如何在散景小部件之间添加间距
【发布时间】：2020-04-15 21:18:26
【问题描述】：

我想知道在 Bokeh 中添加小部件之间间距的最佳方法是什么？现在我正在使用空的 Divs 来获得一些间距，但这真的很笨拙，因此提出了问题。

import pandas as pd

from bokeh.plotting import figure,show
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import DataTable, TableColumn, Div
from bokeh.layouts import row, column
from bokeh.models.widgets import MultiSelect, Button, RadioGroup


def test_view(request):
    # Quick data
    original_data = dict(length=[2, 10, 20, 40, 60, 80, 70, 50, 15, 36, 76, 74, 72, 44, 36, 18, 40, 64, 40, 64, 40, 30, 120],
                         weight=[2, 100, 150, 200, 420, 700, 600, 300, 200, 200, 620, 610, 601, 610, 601, 80, 205, 80, 800, 700, 240, 160, 800])

    original_data = pd.DataFrame(original_data)
    source = ColumnDataSource(original_data)

    # Quick plot
    plot = figure(title = 'title')
    plot.circle(x='length', y='weight', source=source)

    # Quick table
    columns = [TableColumn(field="length", title="length", width=100),
               TableColumn(field="weight", title="weight", width=100)]
    data_table = DataTable(source=source, columns=columns)

    # Quick widgets
    some_button = Button(label="button", button_type="success")
    some_radiogroup = RadioGroup(labels=["1", "2"], active=0)
    some_multiselect = MultiSelect(title='multiselect:', value=[], options=[])

    # Spacing
    dumdiv1 = Div(text='', width=10)
    dumdiv2 = Div(text='', width=10)

    widgets_layout = column(some_button, dumdiv1, some_radiogroup, dumdiv2, some_multiselect)
    figures_layout = row(plot, data_table)
    page_layout = row(widgets_layout, figures_layout)

    show(page_layout)

谢谢，

【问题讨论】：

标签： bokeh

【解决方案1】：

Widget 类扩展了具有margin 属性的LayoutDOM 类。

from bokeh.io import show
from bokeh.layouts import gridplot
from bokeh.models import Div


def mk_div(**kwargs):
    return Div(text='<div style="background-color: green; width: 100px; height: 100px;">DIV</div>', **kwargs)


divs = [mk_div(), mk_div(), mk_div(),
        mk_div(), mk_div(margin=(10, 20, 30, 40)), mk_div(),
        mk_div(), mk_div(), mk_div()]

show(gridplot(divs, ncols=3))

【讨论】：