如何在烧瓶应用程序中嵌入 pygal 图表？答案

【问题标题】：How to embedding a pygal chart on a flask app?如何在烧瓶应用程序中嵌入 pygal 图表？
【发布时间】：2020-12-24 22:45:08
【问题描述】：

我正在使用 pygal，我想在烧瓶应用程序中嵌入一个 pygal 图表。

但是，我想在烧瓶应用程序上放置一个顶栏。我没有收到任何错误，但只显示了顶部栏。没有显示其他内容。 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()

【问题讨论】：

标签： python flask embed pygal

【解决方案1】：

请参阅Output section of the docs。

render_response 方法返回一个响应对象，该对象旨在直接从 Flask 路由返回，而不是根据您的代码手动添加到模板中。要坚持您自己的方法，您可以使用 render_data_uri 方法执行此操作。例如，通过将 __main__ 函数的结尾改为：

        # Mixed

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

【讨论】：