可视化-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="/xiazai/code/10380" title="装修公司企业网站源码2.0"><img
                                                                                src="https://img.php.cn/upload/webcode/000/000/002/176175180679310.jpg" alt="装修公司企业网站源码2.0"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/code/10380" title="装修公司企业网站源码2.0">装修公司企业网站源码2.0</a>
                                                                        <p>装修公司源码，采用DIV+CSS布局，首页顶部采用了超大宽屏banner焦点图切换，带伸缩功能的导航条。首页信息展示量大，有利于SEO优化，首页版块包括，导航，焦点图切换，案例，行业动态，装修经验，装修知识。源码支持伪静态，后台开启即可，服务器必须支持rewrite功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。</p>
                                                                </div>
                                                                <a href="/xiazai/code/10380" title="装修公司企业网站源码2.0" 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：整体操作相当简单。对于这类图形，一个常见的需求是鼠标移动时显示数值，敬请期待下期分享。