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

【问题标题】：Bokeh plot not visible in flask application在烧瓶应用程序中不可见散景图
【发布时间】：2021-04-14 15:57:54
【问题描述】：

这是一个通常可以工作的烧瓶应用程序。

我用散景生成的图根本没有显示在页面上。当我使用工具查看时，我可以看到它们已添加到 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>

【问题讨论】：

你真的安装了 2.1 版的 Python 库吗？ CDN 版本必须与 Python 版本匹配。浏览器 JS 控制台是否有任何错误或消息？
如何检查是否安装了正确的py库？
我看到的唯一错误是“加载资源失败：服务器响应状态为 403 ()”

标签： python nginx flask jinja2 bokeh

【解决方案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 %}

【讨论】：