Bokeh 如何使用bokeh serve设置自定义css

在本文中，我们将介绍如何使用bokeh serve设置自定义css。

阅读更多：Bokeh 教程

什么是Bokeh？

Bokeh是一个用于数据可视化的Python库，它可以帮助我们创建交互式的、具有美观效果的图表和图形。它提供了一种简单而灵活的方式来展示数据，使得数据分析变得更加有趣和直观。

Bokeh Serve

Bokeh Serve是Bokeh的一个功能强大的工具，可以用于在Web浏览器中动态地展示Bokeh图表和应用。使用bokeh serve可以将Bokeh图表和应用部署到本地服务器上，并在浏览器中进行交互。

自定义CSS

除了Bokeh的默认样式外，我们还可以使用自定义CSS来美化我们的Bokeh图表和应用。自定义CSS允许我们根据自己的需求调整图表的样式和外观。

步骤1：创建CSS文件

首先，我们需要创建一个CSS文件来定义我们想要的样式。在文件中，我们可以使用CSS选择器来为特定的元素应用样式。

例如，我们可以创建一个名为”custom.css”的CSS文件，并在其中定义以下样式：

/* 给图表容器应用样式 */
.bk-root {
    background-color: #F1F1F1;
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 10px;
}

/* 给图表标题应用样式 */
.bk-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 给图表轴标签应用样式 */
.bk-axis-label {
    font-size: 12px;
}

步骤2：设置自定义CSS

一旦我们创建了自定义CSS文件，我们就可以将其与Bokeh图表和应用一起使用了。在使用bokeh serve命令启动应用时，我们可以通过--css选项指定我们的自定义CSS文件。

bokeh serve --css custom.css app.py

在上面的命令中，custom.css是我们刚刚创建的自定义CSS文件的路径，app.py是我们要启动的Bokeh应用的主文件。

示例应用

让我们通过一个简单的示例来演示如何设置自定义CSS。

首先，我们需要创建一个名为app.py的Python文件，并在其中编写以下代码：

from bokeh.io import curdoc
from bokeh.plotting import figure
from bokeh.models import RangeSlider

# 创建一个图表
p = figure(title="Bokeh Custom CSS", sizing_mode="stretch_width")
p.xaxis.axis_label = "X Axis"
p.yaxis.axis_label = "Y Axis"

# 添加一个范围滑块
slider = RangeSlider(start=0, end=10, value=(2, 8), step=0.1)
p.add_layout(slider, 'below')

# 在应用中添加图表
curdoc().add_root(p)

在上面的代码中，我们创建了一个简单的Bokeh图表，并添加了一个范围滑块。我们将在应用中使用这个图表。

接下来，我们可以使用bokeh serve命令来启动应用，并指定我们的自定义CSS文件：