=================
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 ></script>
</head>
<body>
<figure>
<!-- the following safe filter is must -->
{{svg_xml|safe}}
</figure>
</body>
</html>