Question

亲爱的

我有一个带有三个或更多选项卡的情节。我为很长的代码感到非常抱歉，但无法正常工作。

下面是bokeh脚本文件。

导入bokeh嵌入库

from bokeh. embed import components
 from bokeh.resources import CDN

合并制表符的代码的最后几行。

############### TABS 1 ############
grid = gridplot([[V_Traffic, D_Traffic]])

tab1 = Panel(child=grid, title="LTE")

############### TABS 2 ############
p2 = figure(plot_width=300, plot_height=300)
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)
tab2 = Panel(child=p2, title="line")

############### TABS 3 ############

p3 = figure(plot_width=300, plot_height=300)
p2.triangle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="pink", alpha=0.5)
tab3 = Panel(child=p3, title="triangle")


tabs = Tabs(tabs=[tab1, tab2, tab3])  

## even with three tabs when I checked the length of len(components(tabs)) the answer was 2
## base on that I follow the lecture as is.

js, div = components(tabs)
cdn_js = CDN.js_files[0]
cdn_css = CDN.css_files[0]
below is my flask app code

from flask import Flask, render_template, cli
from stack_plot_grid_TAB_1 import js, div, cdn_js, cdn_css

app = Flask(__name__)

@app.route("/") 

def home():
    return render_template("index.html")

@app.route('/execute')
def execute_grid_tab():
    return render_template("stack_plot_grid_TAB_1.html", js=js, div=div, cdn_js=cdn_js, cdn_css=cdn_css)

if __name__ == "__main__":
    app.run(debug=True)

在索引文件中，一旦用户   选择相应的仪表板。

下面是index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#" onclick="window.open('/execute');
    window.open('C:\py\programs\bokeh\flask\templates\stack_plot_grid_TAB_1.html');">
    <button>execute python script for tabs</button></a>

</body>
</html>

下面是我的最终情节应该显示的代码。

stack_plot_grid_TAB_1.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel='stylesheet' href={‌{cdn_css|safe}} type="text/css"/>
        <script type="text/javascript" src={‌{cdn_js|safe}}></script>
    </head>
    <body>
        <button>this is the new page.</button>
        {‌{js|safe}}
        {‌{div|safe}}


    </body>
    </html>

所有“ html”文件都保存在“模板”文件夹中。

最后，它仅显示“这是新页面”，并且该图形不可见。我还有什么需要做的吗？

最好的问候。

Answer 1

@ Riz.Khan，您的解决方案有点让我失望了。如果您创建一个包含所有绘图的def并返回选项卡，则绘图将正常工作。

plot.py文件

def nonOccupiers():
    dfn = pd.read_csv('BokehApp/Data/TT_nonOccupier.csv', delimiter='\t', index_col='Years')
    dfnt = dfn[['Total Transactions', 'Total Non-Occupiers']]
    rowX = '2010', '2011','2012','2013','2014','2015','2016', '2017', '2018'
    ....................
    t1 = Panel(child=pn, title='Overview')
    t2 = Panel(child=pne, title='Type of sale')
    t3 = Panel(child=pn3, title='Type of buyer')
    tabs = Tabs(tabs=[t1,t2,t3])
    return tabs

.app.py文件

from flask import Flask, render_template, request
from bokeh.embed import components
from plots import houseStockPlot, vacantPlot, Transactions, NewRegistered, nonOccupiers
from flask_bootstrap import Bootstrap

app = Flask(__name__)
Bootstrap(app)

@app.route('/')
def bokeh():
    script, div = components(houseStockPlot())
    script1, div1 = components(vacantPlot())
    script2, div2 = components(Transactions())
    script3, div3 = components(NewRegistered())
    script4, div4 = components(nonOccupiers())


    return render_template('bokeh.html', script=script, div=div, script1=script1,
    div1=div1, script2=script2, div2=div2, script3= script3, div3=div3, script4=script4, div4=div4)

我仍在使用Web应用程序，我在这里按部分工作，就像一个连环杀手哈哈哈

.html文件

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
       <!-- Bootstrap includes-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
       <!-- Bokeh includes-->
    <script type="text/javascript" src="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.pydata.org/bokeh/release/bokeh-1.3.4.min.js" type="text/css" />
    <link rel="stylesheet" href="{{ url_for('static', filename='css/article.css') }}"  type="text/css" >
    {{ script|safe }}
    {{ script1|safe }}
    {{ script2|safe }}
    {{ script3|safe}}
    {{ script4|safe}}
    ..............................
<center>
<div class='bokeh'>
    {{ div4|safe }}

</div>
</center>

只需在此处添加代码的相关部分即可。如果有人想看看，在此webapp链接下的webapp项目

Answer 2

对于那些仍然感兴趣的人，我找到了一种解决方法。

由于我的bokeh应用程序具有TABS，因此我认为我可以直接导入它们，但找不到如何导入的解决方案。

正如我之前提到的，该代码对于单个图形是完美的，例如，TAB1具有网格图，我能够将其完美地嵌入到flask中。所以我做了

我为每个TAB创建了单独的组件

js_TAB1, div_TAB1 = components(TAB1)
js_TAB2, div_TAB2 = components(TAB2)
js_TAB3, div_TAB3 = components(TAB3)

cdn_js = CDN.js_files[0]
cdn_css = CDN.css_files[0]

然后用HTML创建TABS。

在每个TAB中，我分别称呼我的组件

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'TAB1')">TAB1</button>
  <button class="tablinks" onclick="openCity(event, 'TAB2')">TAB2</button>
  <button class="tablinks" onclick="openCity(event, 'TAB3')">TAB3</button>

</div>

<div id="TAB1" class="tabcontent">

  {{div_TAB1|safe}}
  {{js_TAB1|safe}}
</div>

<div id="TAB2" class="tabcontent">

  {{div_TAB2|safe}}
  {{js_TAB2|safe}}
</div>

<div id="TAB3" class="tabcontent">

  {{div_TAB3|safe}}
  {{js_TAB3|safe}}

</div>

注意：:代码不完整，仅用于说明。如果有人需要一个完整的代码，他可以给我发消息。

最好的问候

散景::网格/ TABS图嵌入烧瓶中

2 个答案: