如何将文本添加到Python Bokeh生成的html文件中

如何将文本添加到bokeh生成的绘图的HTML文件中。我没有看到任何API专门在文件上写文本。你所能做的就是制作情节。

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

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

在参考指南中：

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

如果有更多或更好的信息可以添加，请告诉我们。

我想在我的图中添加一些描述，这样人们就可以理解一些复杂的、特定于领域的术语，而将绘图/数据嵌入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))

这里有一个生成一个HTML文件的示例，该文件同时包含panads DataFrame和Bokeh Plot。（灵感来自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)

相关内容

最新更新

热门标签：