【问题标题】:Bokeh:: Grid/TABS plots embed in flaskBokeh:: Grid/TABS 图嵌入烧瓶
【发布时间】:2019-05-09 18:50:08
【问题描述】:

亲爱的,

我有一个包含三个或更多选项卡的情节。我真的很抱歉代码太长,但我无法让它工作。

下面是散景脚本文件。

导入散景嵌入库

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”文件都保存在“templates”文件夹中。

最后,它只是说“这是新页面”并且图表不可见。还有什么需要我做的吗?

最好的问候。

【问题讨论】:

    标签: python bokeh


    【解决方案1】:

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

    由于我的散景应用有 TABS,我想我可以直接导入它们,但找不到如何导入的解决方案。

    正如我之前提到的,该代码非常适合单个图形,例如,TAB1 有网格图,我能够将它完美地嵌入到烧瓶中。所以我做了什么

    我为每个 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>
    

    注意:: 代码不完整,仅供参考。如果有人 需要一个完整的代码,他可以给我发消息。


    最好的问候

    【讨论】:

      【解决方案2】:

      @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)
      

      我还在做webapp,我在这里分部工作,就像一个连环杀手哈哈哈

      .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下,以防有人想看看

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-05-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-06-16
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多