使用pygal 做chart图的经验分享
=================
pygal的特点
=================
Web中显示chart, 现在的主流做法是使用javascript chart包, 比如highcharts和ECharts, 交互性很好. 另外还有server端生成图片, 然后在浏览器端加载图片, 显然交互性差了很多.
这里介绍第3种做法, 使用 pygal(一个 python 包)在web server 端生成svg矢量图(其实是xml格式), 然后在flask中, 我们可将svg图和普通jinja2参数一样传到html模板中, 最后 web 浏览器就得到图文并茂的结果了.
还有一个方法其实更好, 将svg以文件形式保存下来, 然后在以iframe方式将svg文件引入. 好处是, iframe有滚动条, 浏览大的svg就不吃力了. 代码如下,
和 highcharts 等js chart包相比, pygal优势有:
1. 使用highcharts, server端除了一般的endpoint接口外, 还需要写一套api接口, 来返回json格式数据. 使用pygal, 只需要实现普通的endpoint接口.
2. 使用pygal, 使用的数据格式是python原生的tuple和list.
3. 避免了写javascript 代码.
当然, pygal的缺点也很明显:
1. 浏览器兼容性还不是很好, 尤其IE, IE 9以下干脆不支持svg
2. 交互性还不够丰富
=================
经验总结:
=================
1. svg对象应该直接输出到html的figure标签之下, 而不是在figure/embed属性中
2. svg对象在输出时, 应该加上jinja2的 safe 这个filter
3. view 函数返回的response, 不能设置Content-Type='image/svg+xml'
4. chart.disable_xml_declaration应该设置为True
5. 在server端创建chart对象后, 可以紧接着为chart指定js属性, 来加载本地的svg.jquery.js和pygal-tooltips.js 文件. 如果不指定这个属性, 默认将从 http://kozea.github.com/pygal.js 下载js, 速度较慢. 当然在html端, 仍须再次声明加载这两个js文件.
6. 如果对每个serial的颜色有特别的要求, 可以为chart定制一个style,在sytle中指定serial 的颜色序列. pygal的style.py其实已经预定义了14种style, 也叫theme, 可以作为参考.
from pygal.style import Style
custom_style=Style(colors=(
'#b6e354' #green
,'#fd971f' #yellow
,'#DC3912' #red
))
chart = pygal.Line(legend_at_bottom=True,style=custom_style) ;
7. 可以为chart指定height和width, 但是值不能太小(比如50), 太小了将导致pygal进入死循环, 最终报MemoryError内存不足错误.
8. 一般不需要为chart 指定width, 它自动会撑满上层html容器. 如果需要显示很宽幅度的图, 可以将 chart 的width/height设置的大一些, 比如2000, 这时相当于将图像做了zoom out, 图像上的字体会变小的.
chart.width=2000
chart.height=400
9. 接前一点, 如果你还不想让字体变小, 应该将chart放在一个带滚动条的div中, div上可以加上滚动条(比如width为940).
同时, 为svg xml节点增加 width 属性(这个width相当于canvas的width), 设置它稍微大于chart的width(chart为2000, svg width为2100), 这样的效果即是1:1输出, 没有缩放.
演示: http://www.w3schools.com/svg/tryit.asp?filename=trysvg_rect
当前的pygal没有办法做到这个, 等我有空的时候, fork一下pygal项目, 增加这个feature, 即为pygal的chart对象增加一个svg_width和svg_height属性, 在做render时, 直接为svg xml的svg node加上 <svg style="width:2100px" > 这样的属性.
在pygal支持这个功能之前, 我们还是有2个办法为svg增加width属性:
第1个方法是, 增加一个css文件, 在里面为svg 设置style, 然后在html中引用这个css文件, 这个方法仅仅适合于html有一个svg对象, 或者有多个svg, 但size都一样的情形.
=======large_svg.css file
svg{
width:2100px;
}
=======html 文件部分内容
<link rel="stylesheet" href="/static/css/large_svg.css" >
<div id="svg_scrollable_div" style="width:940px;overflow-x:auto;overflow-y:hidden;">
<figure>
<!-- the following safe filter is must -->
{{svg_xml|safe}}
</figure>
</div>
第2个方法是, 在chart做完render之后, 直接修改svg的xml字符串,为 svg xml节点增加 style="width:2100px" 属性. 这个方法的适应性很好.
svg_xml = chart.render()
svg_xml='<svg style="width:2100px" '+svg_xml[4:]
=================
示例
=================
本示例演示了, 如何将svg以jinja2参数的形式传递到html中.
#--------------------------------------
# flask view 函数
#--------------------------------------
@mod.route("/svg")
def raw_svgs():
chart = pygal.Line(legend_at_bottom=True,legend_box_size=18)
##--------------------------------------
##Declare the location of svg.jquery.js and pygal-tooltips.js in server side.
##--------------------------------------
#It must be declare in server side, not html file
#if not declare in server, by default it will load the two js files located in http://kozea.github.com/pygal.js. And it will slow down the page loading
#1, It works, load local js files
SITE_ROOT = os.path.realpath(os.path.dirname(__file__))
chart.js = [os.path.join(SITE_ROOT, "static/js/", "svg.jquery.js"),
os.path.join(SITE_ROOT, "static/js/", "pygal-tooltips.js")]
#2.a, It Works, but it is ugly because it use local absolute http url
#chart.js =['http://127.0.0.1:5000/static/js/svg.jquery.js',
# 'http://127.0.0.1:5000/static/js/pygal-tooltips.js']
#2.b, works, use local CDN absolute http url
#chart.js =['http://another_server/pygal-tooltips.js',
# 'http://another_server/svg.jquery.js']
#3, Does not work, error raised at visiting, IOError: [Errno 2] No such file
#chart.js = [url_for('static', filename='js/svg.jquery.js'),
# url_for('static', filename='js/pygal-tooltips.js')]
#disable xml root node
chart.disable_xml_declaration = True
chart.title = 'Browser usage evolution (in %)'
chart.x_labels = map(str, range(2002, 2013))
chart.add('Firefox', [None, None, 0, 16.6, 25, 31, 36.4, 45.5, 46.3, 42.8, 37.1])
chart.add('Chrome', [None, None, None, None, None, None, 0, 3.9, 10.8, 23.8, 35.3])
chart.add('IE', [85.8, 84.6, 84.7, 74.5,66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1])
chart.add('Others', [14.2, 15.4, 15.3, 8.9, 9, 10.4, 8.9, 5.8, 6.7, 6.8, 7.5])
svg_xml = chart.render()
response=make_response(render_template('test_svg.html', title="Hello pygal" , svg_xml=svg_xml))
#response.headers['Content-Type']='image/svg+xml' 不能设置Content-Type为svg模式
return response
#--------------------------------------
# test_svg.html 文件
#--------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<!-- 这里也要说明要加载svg.jquery.js和pygal-tooltips.js, 否则不显示tooltips -->
<script type="text/javascript" src="/static/js/svg.jquery.js"></script>
<script type="text/javascript" src="/static/js/pygal-tooltips.js"></script>
</head>
<body>
<figure>
<!-- the following safe filter is must -->
{{svg_xml|safe}}
</figure>
</body>
</html>
