Question

这是一个通常有效的烧瓶应用程序。

我用散景生成的图根本没有显示在页面上。当我使用工具查看时，我可以看到它们已添加到 html 中，但它们不可见。该页面不会中断，我可以正常访问它。我已经尝试了他们页面上的所有内容，但现在我只想让最简单的示例工作。当应用 json 变体时，我只是在应该是情节的页面上打印了一个 json。

我错过了什么？

编辑：一个最低限度的工作示例也值得赞赏。

我的路线

from flask import Blueprint, render_template, redirect, url_for, flash
import json

from bokeh.embed import json_item, server_document, components
from bokeh.plotting import figure, curdoc
from bokeh.resources import CDN
from bokeh.sampledata.iris import flowers

from bokeh.layouts import gridplot
from bokeh.models import BoxSelectTool, LassoSelectTool
from bokeh.client import pull_session

test_bp = Blueprint(
    'test_bp', __name__,
    template_folder='templates',
    static_folder='static'
)


@test_bp.route('/test_site', methods=['GET', 'POST'])
def test_site_view():
    plot = figure()
    plot.circle([1, 2], [3, 4])
    script, div = components(plot)
    
    return render_template(
        'test.html',
        script=script,
        div=div
    )

我的 test.html

{% extends "base.html" %}

<header>
  {{ script|safe }}
</header>

{% block content %}
<h1>Plot</h1>
<div>
  {{ div|safe }}
</div>
{% endblock %}

base.html 包含

<head>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.1.0.min.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.0.min.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.1.0.min.js"
        crossorigin="anonymous"></script>
<link href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.1.0.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
</head>

Answer 1

对于初学者来说，您正在尝试加载实际上并不存在的 CDN 资源。 Bokeh 在 2.0 版本停止发布单独的 CSS 文件。由于 CDN 和 Python 版本匹配很重要，因此最好始终让 Bokeh 自己格式化必要的资源：

@test_bp.route('/test_site', methods=['GET', 'POST'])
def test_site_view():
    plot = figure()
    plot.circle([1, 2], [3, 4], size=40)
    script, div = components(plot)

    return render_template(
        'test.html',
        script=script,
        div=div,
        resources=CDN.render()
    )

使用此模板：

<head>
  {{ resources|safe }}
</head>

<header>
  {{ script|safe }}
</header>

{% block content %}
<h1>Plot</h1>
<div>
  {{ div|safe }}
</div>
{% endblock %}

散景图在烧瓶应用程序中不可见

1 个答案: