介绍
buche-bokeh 是一个用于在 buche 中嵌入 Bokeh 绘图库图形的 npm 包。buche-bokeh 提供了与 Bokeh 交互的函数和 API，让开发人员可以在 buche 的 web 界面上显示和交互 Bokeh 图形。
安装
要安装 buche-bokeh 库，我们可以使用 npm：
npm install buche-bokeh
该包由以下几部分组成：
buche-bokeh.js- 包含 buche-bokeh 库的主要代码Bokeh- Bokeh 库的引用
基本用法
在使用 buche-bokeh 进行 Bokeh 图形交互之前，我们需要先引用 buche-bokeh.js 和 Bokeh 库：
<script src="./node_modules/buche-bokeh/dist/buche-bokeh.min.js"></script> <script src="./node_modules/bokehjs/build/js/bokeh.min.js"></script>
然后，我们需要在 buche 代码中创建一个 buche-bokeh 对象：
const bokeh = new window.BucheBokeh();
接着，我们可以使用 bokeh 对象中提供的 API 来创建，更新和删除 Bokeh 图形。下面是一个简单的示例，它使用 bokeh 对象创建一个简单的折线图：
-- -------------------- ---- -------
-- -------
----- ------ - --- ------------------------
----- -
-- --- -- -- -- ---
-- --- -- -- -- ---
-
---
-- -------
----- ---- - --- ------------
-- ------- -----
-- ------- -----
----------- -
---
-- ---- ------ --
----- --- - --- ------------
------ --- ------
-------- --- --------------------- -- ---- -----
-------- --- --------------------- -- ---- -----
----------------- --------
------ --------------------------------
---
-- ---------- ------ ---
--------------------- ------
-- -- ------ -------- ----- -
------------------高级用法
除了基本用法，buche-bokeh 还提供了很多高级功能，比如在 Bokeh 图形中添加回调函数以及用于修改其他 Bokeh 图形的函数。下面是一些高级示例：
添加回调函数
我们可以在 Bokeh 图形中添加 JavaScript 回调函数，使图形可以对用户的交互做出响应。下面的例子演示了如何在按钮被单击时修改图形中的文本：
-- -------------------- ---- -------
-- ------
----- ------ - --- --------------
------ ------ -----
---
-- --------
----- ---- - --- -----------
----- ------ --------
---
-- ---- ------ --
----- --- - --- ------------
----------------- --------
------ ---------------------
---
-- ---------- ------ ---
-----------------------
---------------------
-- ------------
------------------ -- -
--------- - ------- ----------
-------------------
---
-- -- ------ -------- ----- -
------------------修改其他图形
我们也可以在 Bokeh 图形中添加按钮，并在单击按钮时修改其他图形。下面的例子演示了如何在两个折线图之间切换：
-- -------------------- ---- -------
-- -------
----- ------- - --- ------------------------
----- -
-- --- -- -- -- ---
-- --- -- -- -- ---
-
---
----- ------- - --- ------------------------
----- -
-- --- -- -- -- ---
-- --- -- -- -- ---
-
---
-- -------
----- ----- - --- ------------
-- ------- -----
-- ------- -----
----------- --
----------- ------
---
----- ----- - --- ------------
-- ------- -----
-- ------- -----
----------- --
----------- -------
---
-- ------
----- ------ - --- --------------
------ ---------
---
-- ---- ------ --
----- --- - --- ------------
-------- --- --------------------- -- ---- -----
-------- --- --------------------- -- ---- -----
----------------- --------
------ --------------------------------
---
-- ---------- ------ ---
---------------------- -------
---------------------- -------
-- ----- ------ ---
-----------------------
-- ------------
------------------ -- -
-- ----------------------------- -- -------- -
------------- - ------
------------- - -----
- ---- -
------------- - -----
------------- - ------
-
--------------------
--------------------
---
-- -- ------ -------- ----- -
------------------结论
通过本文，我们了解了如何使用 buche-bokeh 包解决在 buche 中嵌入 Bokeh 图形的问题。通过基本示例和高级示例，我们可以掌握 buche-bokeh 的主要功能，并学会如何在 buche 中使用 Bokeh 图形进行交互。希望本篇文章能对您的技术学习和开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726a81e8991b448e89db