可视化-bokeh-01-初识

在本系列中，我们将深入探讨可视化库bokeh，旨在通过网站展示其功能。本文将根据官方文档，初步介绍bokeh的基本使用。

目前，我正在使用django开发网站，图表显示是其中一个常见需求。之前主要使用echarts，效果不错。然而，我决定尝试bokeh，一方面是为了学习新技术，另一方面是因为我更熟悉Python而非JavaScript。虽然有pyecharts，但我尚未深入研究。经过一番寻找，我发现bokeh非常适合后端实现。

Part 2：示例

下面展示的是从1号到15号的排班情况，1表示上班，0表示放假。生成的图表是一个HTML文件，提供了多种交互工具，如移动和放大等。

生成的HTML文件如下：

Part 3：代码

以下是生成上述图表的代码，编程语言为Python：

from bokeh.plotting import figure, output_file, show
<h1>准备数据</h1><p>x = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
y = [1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1]</p><h1>输出到静态HTML文件</h1><p>output_file("排班情况.html")</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/2143" title="ImgGood"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175680175245875.png" alt="ImgGood"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/2143" title="ImgGood">ImgGood</a>
                                                                        <p>免费在线AI照片编辑器</p>
                                                                </div>
                                                                <a href="/ai/2143" title="ImgGood" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div><h1>创建一个带标题和坐标轴标签的新图表</h1><p>p = figure(title="第一个示例", x_axis_label='几号', y_axis_label='1：上班；0：不用上班')</p><h1>添加带图例和线宽的线渲染器</h1><p>p.line(x, y, legend="上班排班", line_width=2)</p><h1>显示结果</h1><p>show(p)

代码截图如下：

Part 3：部分代码解读

以上代码源自官方文档，稍作修改。详细信息请参考：

<a href="https://www.php.cn/link/48c6cf7451166d5100957505b28a45b8">https://www.php.cn/link/48c6cf7451166d5100957505b28a45b8</a>

output_file("排班情况.html")

show(p)

p.line(x, y, legend="上班排班", line_width=2)

Ps：整体操作相当简单。对于这类图形，一个常见的需求是鼠标移动时显示数值，敬请期待下期分享。