如何在 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 section of the docs。

render_response 方法 returns 一个响应对象，旨在直接从 Flask 路由返回，而不是根据您的代码手动添加到模板。要坚持您自己的方法，您可以使用 render_data_uri 方法来实现。例如，将 __main__ 函数的末尾更改为：

        # Mixed

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

如何在 Flask 应用程序中嵌入 pygal 图表？

How to embedding a pygal chart on a flask app?

python

embed

flask

pygal