将多个散景 HTML 图嵌入到 Flask 中

2024-04-08

我在 bokeh 网站和 stack Overflow 上搜索了过去 3 个小时,但没有一个是我真正想要的。

我已经生成了我的图,并将它们放在 html 文件中。我想要做的就是将绘图嵌入到仪表板中,形成下图白色区域中的多网格状结构。然而,仅添加 2 个图就会导致它们重叠并且非常奇怪。

我使用 {{ include }} 方法以这种方式包含图表:

任何人都可以指导我如何很好地对齐它们?理想情况下,我想要在那个空间里有 6 个小地块。我不想每次加载仪表板时都重新生成绘图,所以我不想要嵌入方式。

请帮忙:(非常感谢!

编辑:按照big的建议,使用responsive = True有效,但我无法控制css样式和图表的大小。我怀疑这与使用 include 标签有关。有人可以帮忙吗? :)


为什么你不尝试用水平布局来制作它水平布局 http://docs.bokeh.org/en/0.11.1/docs/user_guide/layout.html#horizontal-layout

按照你的方式( {% include %} ),我找不到解决方案,所以可能必须使用标准烧瓶方式。 Python 文件:

#Your imports
from flask import Flask, render_template
from bokeh.embed import components
from bokeh.plotting import figure



@app.route('/')
def homepage():
    title = 'home'
    from bokeh.plotting import figure

    #First Plot
    p = figure(plot_width=400, plot_height=400, responsive = True)
    p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)

    #Second Plot
    p2 = figure(plot_width=400, plot_height=400,responsive = True)        
    p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5)


    script, div = components(p)
    script2, div2 = components(p)

    return render_template('index.html', title = title, script = script,
    div = div, script2 = script2, div2 = div2)

您的 HTML 文件:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link
    href="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.css"
    rel="stylesheet" type="text/css">
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.11.1.min.js"></script>

    <meta charset="UTF-8">
    <title>{{title}}</title>


</head>


<body>


    <div style="width: 20%; display: inline-block;">

        {{ div | safe }}
        {{ script | safe }}

    </div>

    <div style="width: 20%; display: inline-block;">

        {{ div2 | safe }}
        {{ script2 | safe }}


    </div>



</body>
</html>

另一个技巧是制作一个像 my_plots.py 这样的 python 文件 并在那里添加你的图,然后导入到你的 main.py 中,它会让你的代码更干净。 (我不知道 100% 这是否会影响你的速度,但到目前为止我还没有看到任何问题)例如。

my_plots.py:

from bokeh.plotting import figure

def first_plot():

    p = figure(plot_width=400, plot_height=400, responsive = True)
    p.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
    return p

def second_plot():

    p2 = figure(plot_width=400, plot_height=400, responsive = True)
    p2.square([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="olive", alpha=0.5)
    return p2

main.py:

@app.route('/')
def homepage():
    title = 'home'

    #First Plot
    from my_plots import first_plot
    p = first_plot()

    #Second Plot
    from my_plots import second_plot
    p2 = second_plot()

    script, div = components(p)
    script2, div2 = components(p)

    return render_template('index.html', title = title, script = script,
    div = div, script2 = script2, div2 = div2)

希望我有帮助,祝你好运!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将多个散景 HTML 图嵌入到 Flask 中 的相关文章

随机推荐

  • SQL查询6度分离用于网络分析

    我正在使用 D3 js 构建网络分析 以在我的应用程序中显示连接的电话号码 分隔度可达六度 用于查找初始连接的 SQL postgres 如下 相当简单 然而 我对如何修改它以遍历六个级别的连接然后停止感到困惑 SELECT player
  • 更改输入焦点上的 div 颜色

    我正在尝试改变的颜色div带信s div class search container div
  • 将多个同名资源添加到 Xcode for iPhone

    是否可以在资源组中使用图像的双重名称 谢谢 您可以拥有多个同名资源 只要 1 它们不在同一目录中 并且 2 您已通过引用将资源添加到您的 Xcode 项目中 1 因为任何目录都不能包含两个同名的文件 2 因为 Xcode 尊重通过引用添加的
  • 如何检查数组中的所有元素是否为零? [复制]

    这个问题在这里已经有答案了 我想知道除了nil数组中的值 arr nil nil nil nil gt true arr nil 45 nil nil gt false 可以有任何类型的任何值 不仅45 Use the Enumerable
  • win-7 cmd 上的 GNU awk,不会将输出重定向到文件

    如果相关的话 我直接从sourceforge中的GNU指向源下载了GNU awk V 3 1 6 我正在使用 Windows 版 wget 获取 URL 页面 处理传入的文件后 我将其减少为单行 我必须从中提取一个键值 这是一个相当长的字符
  • 在起订量中重置模拟验证?

    设置如下 public interface IFoo void Fizz Test public void A var foo new Mock
  • C 字符串文字所需的转义字符

    我有一个以零结尾的字符串 char s 我正在生成 C 源代码 在运行时 并且我想输出一个表示 s 的字符串文字 它将在生成的 C 程序中生成与 s 相同的字符串 我使用的算法是 Output Foreach char c in s if
  • 使用 ASP.Net,是否有一种编程方式来截取浏览器内容的屏幕截图?

    我有一个 ASP Net 应用程序 根据需要的功能 用户希望能够截取屏幕截图 虽然我知道这可以模拟 但如果有一种方法可以获取 URL 或当前呈现的页面 并将其转换为可以存储在服务器上的图像 那就太好了 这疯了吗 有办法做到吗 如果有的话 有
  • 创建/渲染 scene2d 舞台后重置视口

    在我的游戏中 我正在绘制一个 scene2dStage使用自定义世界坐标系 然后 我想绘制一个调试 UI 上面包含一些文本 例如 FPS 但只需使用屏幕坐标 即文本位于屏幕右上角的位置 我的主要渲染方法如下所示 Override publi
  • 为什么在 Firefox 开发工具中传输的字节大于 size 字节?

    我正在衡量网站的性能 当查看 firefox developer tools 时 我注意到一个奇怪的行为 有一个特定的JS文件 传输的大小为2 831 54 KB 但实际大小为1280kb 根据 Mozilla 的说法 https deve
  • 设置 HTML 文本框的最大字数

    我想设置一个最大数量用户可以在文本框中输入的单词数 not字符数但是words 这个有可能 我做了一些挖掘 发现如何获取用户使用正则表达式输入的单词数 但我不确定如何阻止用户在达到最大值后输入更多字母 var jobValue docume
  • 使用 JSP 时如何使用 Struts 2 ModelDriven 接口访问 POJO 中的属性?

    我有一个实现的动作类ModelDriven界面 这ModelDriven是一个常规 POJO 问题在于它的属性之一是另一个对象 想象一下我的模型驱动is a object calledPersonand my person has an a
  • 如何声明一个返回函数指针的函数?

    想象一个带有参数 double 和 int 的函数 myFunctionA myFunctionA double int 这个函数应该返回一个函数指针 char myPointer 如何在 C 中声明这个函数 typedef是你的朋友 ty
  • jQuery DataTables:如何按自定义参数值而不是单元格内容排序?

    我有一个非常常见的用例 我在价格列中显示格式化的价格 例如 20 000 00 因此 当我尝试对它进行排序时 它会将其视为字符串并且排序效果不佳 10 00 20 000 00 5 000 00 我可以使它按数据参数值 非格式化浮点数 排序
  • mail() 超时问题

    当我通过浏览器执行电子邮件脚本时 会返回超时致命错误 除非我大幅增加执行时间 否则它将正常运行 而不是我正在寻找的解决方案 电子邮件已发送 但需要很长时间 平均 5 分钟 才能到达 我的收件箱 考虑到通过命令行它可以完美地工作 我认为 ph
  • 反应本机视频类型错误:未定义不是对象

    所以我尝试使用 npm 中的 React native video 包来播放 YouTube 视频 export default class App extends Component render return
  • 如何让 NSTextField 在自动布局中随着文本增长?

    Lion 中的自动布局应该可以非常简单地让文本字段 以及标签 随其包含的文本一起增长 文本字段在 Interface Builder 中设置为换行 有什么简单而可靠的方法可以做到这一点 方法intrinsicContentSize in N
  • 如何在 ASP.NET Core 5 中使用 IdentityUser 和 IdentityRole 之间的隐式多对多

    我有这两个实体 public class ApplicationUser IdentityUser
  • AF网络。检查所有操作队列的下载进度

    我有一个使用 AFNetworking 制作的 iOS 应用程序 我有一个单例自定义 httpclient 子类 我用它来使用我的 api 并从服务器下载二进制文件 我需要下载大约 100 个文件 迭代我的 url 数组并为每个 url 创
  • 将多个散景 HTML 图嵌入到 Flask 中

    我在 bokeh 网站和 stack Overflow 上搜索了过去 3 个小时 但没有一个是我真正想要的 我已经生成了我的图 并将它们放在 html 文件中 我想要做的就是将绘图嵌入到仪表板中 形成下图白色区域中的多网格状结构 然而 仅添