[英]How to embedding a pygal chart on a flask app?
I'm working with pygal and I want to embed a pygal chart in a flask app.我正在使用 pygal,我想在 flask 应用程序中嵌入一个 pygal 图表。
However, I want to put a top-bar on the flask app.但是,我想在 flask 应用程序上放置一个顶部栏。 I don't get any errors, but only the top bar is shown.
我没有收到任何错误,但只显示了顶部栏。 Nothing else is shown.
没有显示其他内容。 The pygal chart does not even render.
pygal 图表甚至不呈现。
Here's my code for your reference:这是我的代码供您参考:
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()
See the Output section of the docs .请参阅文档的Output 部分。
The render_response
method returns a response object which is designed to be returned directly from a Flask route, not manually added to a template as per your code. render_response
方法返回一个响应 object,该响应旨在直接从 Flask 路由返回,而不是根据您的代码手动添加到模板。 To stick with your own approach, you could do this with the render_data_uri
method.要坚持使用您自己的方法,您可以使用
render_data_uri
方法执行此操作。 For example, by changing the end of your __main__
function to instead:例如,通过将
__main__
function 的末尾更改为:
# Mixed
output = f'''{top_bar()}
<img src="{line_chart.render_data_uri()}" />'''
return output
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.