如何在Bokeh JavaScript版本中隐藏工具栏？

在Bokeh JS版本中隐藏工具栏的逻辑和Python版本一致，通过设置toolbar_location为null即可实现，具体有两种操作方式：

方法一：创建图表时直接配置 #

调用Bokeh.Charts.pie创建饼图时，将toolbar_location: null加入配置参数：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-2.4.3.min.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-mathjax-2.4.3.min.js"></script>
  <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-api-2.4.3.min.js"></script>
  <script type="text/javascript">
    const plt = Bokeh.Plotting;
    const pie_data = {
      labels: ['Work', 'Eat', 'Commute', 'Sport', 'Watch TV', 'Sleep'],
      values: [8, 2, 2, 4, 0, 8],
    };
    // 创建饼图时直接配置隐藏工具栏
    const p = Bokeh.Charts.pie({
      labels: pie_data.labels,
      values: pie_data.values,
      toolbar_location: null
    });

    window.onload = function () {
      plt.show(p, '#bokeh');
    };
  </script>
</head>
<body>
  <div id="bokeh"></div>
</body>
</html>

方法二：创建图表后修改属性 #

如果已经生成图表实例，可直接修改其toolbar_location属性为null再渲染：

const p = Bokeh.Charts.pie(pie_data);
// 创建后修改工具栏配置
p.toolbar_location = null;

window.onload = function () {
  plt.show(p, '#bokeh');
};

另外你提供的原始代码存在两处小问题：

• 重复引入了bokeh-api-2.4.3.min.js
• 末尾错误重复了<!DOCTYPE html>和<html>标签，已在示例中修正

内容的提问来源于stack exchange，提问作者Lucas Almeida Carotta