我使用烧瓶和pygal制作网站。
为了绘制图表,我已将其放入我的网页:
<div class="graph-area">
<div align="center">
<embed type="image/svg+xml" src={{graph_data|safe}} />
</div>
</div>
.graph-area{
margin-left:255px;
height:500px;
margin-bottom: 5px;
border-radius: 10px;
}
@app.route("/test")
def test():
custom_style = Style(
background='transparent',
plot_background='transparent',
foreground='#53E89B',
foreground_strong='#53A0E8',
foreground_subtle='#630C0D',
opacity='.6',
opacity_hover='.9',
transition='400ms ease-in')
graph = pygal.Line(width=500, height=400, style=custom_style)
graph.title = 'Food intake'
graph.x_labels = ['lundi','mardi','mercredi','jeudi','vendredi','samedi']
graph.add('Proteins', [15, 16, 17, 15, 10, 15])
graph.add('Lipids', [40, 45, 40, 42, 45, 42])
graph.add('Carbs', [21, 22, 22, 20, 18, 16])
graph.add('Net carbs', [12, 11, 11, 11, 10, 13])
graph_data = graph.render_data_uri()
return render_template("test.html", graph_data = graph_data)
宽度和高度参数不作用于图形(图形很大,超过1500x1500)。我在HTML中做错了吗?
我知道我可以在图表上应用CSS样式,但我想使用本机pygal解决方案。
答案 0 :(得分:2)
如果我在图构造函数
中添加explicit_size=True
,它就有效
所以你得到:
graph = pygal.Line(width=500, height=400, explicit_size=True, style=custom_style)
请注意,图表大小将覆盖任何css缩放尝试,而网页的其他部分不会根据图表进行缩放。
我不明白为什么必须添加它(explicit_size),文档没有在大小调整示例中讨论它,但是如果没有它,大小调整示例就不起作用。