如何在 flask 應用程序中嵌入 pygal 圖表？

Question

我正在使用 pygal，我想在 flask 應用程序中嵌入一個 pygal 圖表。

但是，我想在 flask 應用程序上放置一個頂部欄。 我沒有收到任何錯誤，但只顯示了頂部欄。 沒有顯示其他內容。 pygal 圖表甚至不呈現。

這是我的代碼供您參考：

import pygal
from flask import Flask
import webbrowser as web
import socket

def test(name=None):
    def top_bar():
        return('''
               <style>
                
               .top_bar {
                 position: fixed;
                 top: 0px;
                 left: 0px;
                 right: 0px;
                 width: 100%;
                 background-color: #4CAF50;
                 color: white;
                 text-align: center;
                }
                
             </style>
             
             <div class="top_bar">
                 <h1 style="font-size:25px"><p style="font-family:verdana">Test!</p></h1>
             </div>
             
             ''')        
               
    
    app = Flask(__name__)
    
    def __info__():
        hostname = socket.gethostname()
        ip = socket.gethostbyname(hostname)
        port = int(5969)
        all_val = [str(ip),port]
        return all_val

    all_val = __info__()
    
    
    
    @app.route('/')
    def __main__():
        line_chart = pygal.Line(width=550, height=350,explicit_size=True)
        line_chart.add('Firefox', [None, None,    0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1])
        line_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3])
        line_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
        line_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5])
        #line_chart.render()
        # Mixed
        return(f'''
               {line_chart.render_response()}
               {top_bar()}
               '''
               )
               
    __main__()
    url=(f'http://{all_val[0]}:{all_val[1]}')
    web.open(url)
    app.run(all_val[0],all_val[1])
        
test()

Answer 1

請參閱文檔的Output 部分。

render_response方法返回一個響應 object，該響應旨在直接從 Flask 路由返回，而不是根據您的代碼手動添加到模板。 要堅持使用您自己的方法，您可以使用render_data_uri方法執行此操作。 例如，通過將__main__ function 的末尾更改為：

        # Mixed

        output = f'''{top_bar()}
               <img src="{line_chart.render_data_uri()}" />'''
        return output