如何在Python Bokeh生成的HTML文件中添加文本

Question

如何在Python Bokeh生成的HTML文件中添加文本

bokeh

8

我该如何在bokeh生成的HTML文件中添加文本呢？我没有看到任何专门用于在文件上编写文本的API，您只能制作图表。

- systemsguy

3个回答

2

我想为我的图表添加一些描述，以便人们能够理解一些复杂的和特定领域的术语。将绘图/数据嵌入到HTML文档中似乎很复杂。

如果您只想向图表添加简单的文本，请继续进行。

文档说明如下：

警告

这些Bokeh模型的明确目的是嵌入原始的HTML文本以供浏览器执行。如果任何部分的文本源自不受信任的用户输入，则必须在传递给Bokeh之前采取适当的措施对用户输入进行消毒。

从上面的链接中复制示例以快速参考，并在链接失效的情况下使用。


    from bokeh.io import output_file, show
    from bokeh.layouts import widgetbox
    from bokeh.models.widgets import Div
    from bokeh.models.widgets import Paragraph
    from bokeh.models.widgets import PreText
    
    output_file("div.html")
    
    pre = PreText(text="""Your text is initialized with the 'text' argument. The remaining Paragraph arguments are 'width' and 'height'.""",width=500, height=100)
    
    p = Paragraph(text="""Your text is initialized with the 'text' argument. The remaining Paragraph arguments are 'width' and 'height'""", width=200, height=100)
    
    div = Div(text="""Your <a href="https://en.wikipedia.org/wiki/HTML">HTML</a>-supported text is initialized with the <b>text</b> argument.  The remaining div arguments are <b>width</b> and <b>height</b>. For this example, those values are <i>200</i> and <i>100</i> respectively.""", width=200, height=100)
    
    show(widgetbox(pre, p, div))

- Shrikant Shete

我认为这应该被标记为这个问题的答案。 - tintinve

0

这是一个生成包含pandas DataFrame和Bokeh Plot的单个HTML文件的示例。（灵感来自https://github.com/bokeh/bokeh/blob/master/examples/embed/embed_multiple.py）

import io
import pandas as pd
from bokeh.embed import components
from bokeh.models import HoverTool
from bokeh.models import LinearAxis, Range1d
from bokeh.plotting import figure
from bokeh.resources import CDN
from jinja2 import Template


template = Template(
    '''<!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>Overview</title>
                {{ resources }}
                {{ script }}
                <style>
                    .embed-wrapper {
                        display: flex;
                        justify-content: space-evenly;
                    }
                </style>
            </head>
            <body>
                <div>
                    {{ table }}
                </div>                    
                <div class="embed-wrapper">
                    {{ div }}
                </div>
            </body>
        </html>
        ''')

df: pd.DataFrame = get_data_frame()
table_html = df.to_html()

plot = figure(x_axis_label='time', y_axis_label='value', x_axis_type='datetime',
                plot_width=1600, plot_height=800,
                tools='pan,wheel_zoom,zoom_in,zoom_out,box_zoom,reset,save,hover,tap')
plot.sizing_mode = 'scale_width'
# now continue setup your plot 
# ...
#

# get bokeh parts
script_bokeh, div_bokeh = components(plot)
resources_bokeh = CDN.render()

# render everything together
html = template.render(resources=resources_bokeh,
                       script=script_bokeh,
                       table=table_html,
                       div=div_bokeh)

# save to file
out_file_path = "test.html"
with io.open(out_file_path, mode='w') as f:
    f.write(html)

- dux2

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bigreddot · Accepted Answer

有许多方法可以将 Bokeh 图表嵌入到其他文档中。对于静态文档，您可以让 Bokeh 创建其标准默认文档，或者使用您提供的模板。您还可以仅生成 div 和 script 标签，然后以任何您喜欢的方式将它们嵌入到自己的静态页面或 Web 应用程序中。以上任何一种方法都可以在文档中包含数据、在附带的 .js 文件中包含数据，或从 Bokeh 服务器加载数据。所有这些选项都在用户指南中关于嵌入的部分进行了描述：

http://docs.bokeh.org/en/latest/docs/user_guide/embed.html

在参考指南中：

https://docs.bokeh.org/en/latest/docs/reference/resources.html

请告知我们是否有更多或更好的信息可以添加在那里。