创建 jinja 小部件答案

【问题标题】：Creating jinja widget创建 jinja 小部件
【发布时间】：2021-07-19 01:28:51
【问题描述】：

我需要一些帮助才能找到有关 jinja 模板的正确方向。假设我已经成功地使用散景创建了一个路线和模板，如下所示：

import flask_bcrypt
from bokeh.models import HoverTool
from flask import Blueprint, render_template, request, redirect, url_for
from app import db
from sqlalchemy.sql import text
from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.resources import INLINE


bokeh = Blueprint('bokeh', __name__, template_folder="templates")


@bokeh.route('/bokeh', methods=['GET', 'POST'])
def bokeh_main():

   

    fig = figure(plot_width=800,
                 plot_height=600,

                 x_axis_label='x',
                 y_axis_label='y')
    hover = fig.select(dict(type=HoverTool))

    # tooltips =
    fig.line(
        legend_label="Random numbers.",
        x=[1, 2, 3, 10],
        y=[1.7, 2.2, 4.6, 3.9],

    )
    hover = HoverTool(mode="vline")
    hover.tooltips=[
        ('random-number', '@x'),
        ('random-result', '@y')
    ]
    fig.tools.append(hover)

    # grab the static resources
    js_resources = INLINE.render_js()
    css_resources = INLINE.render_css()




    script, div = components(fig)

    return render_template(
        'index.html',
        plot_script=script,
        plot_div=div,
        js_resources=js_resources,
        css_resources=css_resources,
    )

但是，我想在销售报告路径或任何其他路径上重复使用此图表路径结果。

我该怎么做？

【问题讨论】：

标签： python jinja2

【解决方案1】：

您可以将图形资源创建抽象为一个辅助函数，如下所示：

def create_figure_resources():
    fig = figure(plot_width=800,
                 plot_height=600,

                 x_axis_label='x',
                 y_axis_label='y')
    hover = fig.select(dict(type=HoverTool))

    # tooltips =
    fig.line(
        legend_label="Random numbers.",
        x=[1, 2, 3, 10],
        y=[1.7, 2.2, 4.6, 3.9],

    )
    hover = HoverTool(mode="vline")
    hover.tooltips=[
        ('random-number', '@x'),
        ('random-result', '@y')
    ]
    fig.tools.append(hover)

    js_resources = INLINE.render_js()
    css_resources = INLINE.render_css()
    script, div = components(fig)

    return {
        "js_resources": js_resources,
        "css_resources": css_resources,
        "script": script,
        "div": div,
    }

然后，您可以从不同的路由调用该函数来生成图形资源：

@bokeh.route('/bokeh', methods=['GET', 'POST'])
def bokeh_main():
    figure_resources = create_figure_resources()
    return render_template(
        'index.html',
        plot_script=figure_resources["script"],
        plot_div=figure_resources["div"],
        js_resources=figure_resources["js_resources"],
        css_resources=figure_resources["css_resources"],
    )


@bokeh.route('/sales', methods=['GET', 'POST'])
def bokeh_sales():
    figure_resources = create_figure_resources()
    return render_template(
        'sales.html',
        plot_script=figure_resources["script"],
        plot_div=figure_resources["div"],
        js_resources=figure_resources["js_resources"],
        css_resources=figure_resources["css_resources"],
    )

【讨论】：