Bokeh＆＃39;单值＆＃39;小部件

Question

是否可以在Bokeh中创建类似下面的内容，或者这需要customJS？看起来像一个相当简单的请求（至少在其他类似的库提供的方面），但在文档中找不到任何东西。

Answer 1

要使用的核心Bokeh组件是Div对象。

template=("""
      <div class='content'>
       <div class='name'> {stock_name} </div>
        <span class='number'>{price}<small>{price_unit}</small> </span>
        <span class='percentage' style='color: {colour};'> {percentage}<small>%</small> </span>
      </div>
      """)
# initial text
text = template.format(stock_name = stock_name,
                   price=price,
                   price_unit='k',
                   percentage=percentage,
                   colour='#97D389')
div = Div(text=text, height=300)

然后可以将其添加到文档中，并显示给用户。

作为一个完整的例子，我创建了一个示例gist，其数字定期更新 -  见https://gist.github.com/anthonydouc/c8571f0a2f9aa8415bd566e1ac2ba237。在要点底部的注释中有关于如何构建应用程序的说明 - 创建一个名为＆＃34; stocktext＆＃34;的文件夹。并按照指示构造子文件夹，然后运行'bokeh serve -- show stocktext'

示例输出：

大量使用流媒体示例（https://demo.bokehplots.com/apps/surface3d），让数字自动更新。

整个内容只包含在一个简单的html div元素中，这里解释了Bokeh的用法：https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/widgets.html#div。

最后，要启用基于python的回调，您需要运行散景服务器 - 有关详细信息，请参阅https://bokeh.pydata.org/en/latest/docs/user_guide/server.html。