为了账号安全,请及时绑定邮箱和手机立即绑定

从带有布局的图表创建独立的 HTML

从带有布局的图表创建独立的 HTML

慕莱坞森 2022-01-18 15:47:24
我想创建一个独立的 HTML,其中包含几个基于布局的 Bokeh 交互式图形(如果可能)。我已经成功地将每个图表创建为自己的 HTML 或 PNG。我的图表是从函数单独生成的。这是一个例子。from bokeh.plotting import figure, output_file, showdef create_scatter():    # output to static HTML file    output_file("test_scatter.html")    p = figure(plot_width=400, plot_height=400, title='This is a Scatter chart')    # add a circle renderer with a size, color, and alpha    p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)    p.title.text_font_style = "italic"    # show the results    show(p)    # Attemp to return the chart    return pdef create_line():    # output to static HTML file    output_file("line.html")    p = figure(plot_width=400, plot_height=400, title='This is a Line chart')    # add a line renderer    p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=2)    p.title.text_color = "olive"    p.toolbar.logo = None # Hide Bokeh Logo    # show the results    show(p)    # Attemp to return the chart    return pdef create_HTML(f1, f2):    passdef main():    f1 = create_scatter()    f2 = create_line()    create_HTML(f1, f2)if __name__ == '__main__':    main()但是,我找不到将它们全部放在一个 HTML 文件中的方法。每个图表都有自己独特的标题、属性、图例和工具。我的预期结果是基于布局创建一个独立的 HTML,可能可以修改其背景等。这是我的预期结果。先感谢您更新我想我需要返回图表的组件script, div = components(p, CDN)return script, div然后我需要将它们放入 HTML 字符串中。最后,输出文件。
查看完整描述

1 回答

?
天涯尽头无女友

TA贡献1831条经验 获得超9个赞

你已经给自己答案了。使用components是实现它的一种方式。请查看Bokeh 嵌入文档以了解所有选项。


如果您想要一个可以使用此方法的单个文件实现(使用 Bokeh 1.1.0 测试):


from jinja2 import Template

from bokeh.plotting import figure

from bokeh.embed import file_html

from bokeh.models import Div, Paragraph, Row, Column

from bokeh.resources import CDN

from bokeh.util.browser import view


template = Template("""

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>{{ title if title else "Bokeh Plot" }}</title>

        {{ bokeh_css | safe }}

        {{ bokeh_js | safe }}

    </head>

    <body>

        {{ plot_div | safe }}

        {{ plot_script | safe }}

    </body>

</html> """)


p1 = figure(plot_width = 400, plot_height = 400)

p2 = figure(plot_width = 400, plot_height = 400)

p3 = figure(plot_width = 800, plot_height = 400)

p1.circle([1, 2, 3], [4, 5, 6])

p2.line([1, 2, 3], [4, 5, 6])

p3.line([1, 2, 3], [4, 5, 6])


html = file_html(Column(Row(p1, p2), Row(p3)), template = template, resources = CDN)


output_file = 'css_classes.html'

with open(output_file, 'w') as f:

    f.write(html)

view(output_file)

结果:


//img1.sycdn.imooc.com//61e670bd000149e412981278.jpg

查看完整回答
反对 回复 2022-01-18
  • 1 回答
  • 0 关注
  • 164 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信