python用Pygal如何生成漂亮的SVG图像详解


Posted in Python onFebruary 10, 2017

前言

SVG可以算是目前最最火热的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。

First Head in Pygal

首先安装 pygal 啦:

pip install pygal

如果你要把生成格式设为除了 svg 之外的格式,如 png,jpg 之类,就要安装底下几个库了:

pip install lxml

在 Ubuntu 中按照如下提示安装即可:

sudo apt-get install libxml2-dev libxslt1-dev python-dev
sudo apt-get install python-lxml
pip install cairosvg

安装该库原理同上:

sudo apt-get install python-cairosvg

如下两个库,只需正常 pip 安装即可:

pip install tinycss

pip install cssselect

Hello SVG

import pygal              
bar_chart = pygal.Bar()           
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]) 
bar_chart.render_to_file('Hello.svg')

生成的是黑色的 Hello.svg 文件,因为是 svg 格式的,一般的话直接是不能打开的,选择默认的浏览器打开吧,看到就是底下这个样子:

python用Pygal如何生成漂亮的SVG图像详解

更加炫酷点的图:

import pygal
line_chart = pygal.Line()
line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013))
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_to_file('Hello_line_chart.svg')

生成的图就是下面这个样子:

python用Pygal如何生成漂亮的SVG图像详解

Hello PNG

有时候,我们不需要 svg,只需要 png 格式的图表,没关系,pygal 也能够做到:

import pygal
bar_chart = pygal.Bar()
bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
bar_chart.render_to_file('bar_chart.svg')
# 生成 png 格式图表
bar_chart.render_to_png(filename='bar_chart.png')

注意绿色的标示,成功生成 png 格式的图片啦:

python用Pygal如何生成漂亮的SVG图像详解

Hello Flask and Pygal

让 Pygal 生成的 svg 格式图片中,显示在你的网页上呗,我们选择 flask 来提供 web 支持:

pip install flask

核心代码如下,没错就是这么短:

import pygal
from flask import Flask, Response

app = Flask(__name__)

@app.route('/')
def index():
 return 
"""
 <html>
 <body>
  <h1>hello pygal and flask</h1>
  <figure>
  <embed type="image/svg+xml" src="/hellosvg/" />
  </figure>
 </body>
 </html>'
"""

@app.route('/hellosvg/')
def graph():
 """ render svg graph """
 bar_chart = pygal.Bar()
 bar_chart.add('Fibonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])
 return Response(response=bar_chart.render(), content_type='image/svg+xml')

if __name__ == '__main__':
 app.run()

打开 127.0.0.1:5000 就能看到下面的样子咯:

python用Pygal如何生成漂亮的SVG图像详解

当然咯,你还可以做出如下更为炫酷的 svg 图像,不过这一切都是 pygal 的用法啦:

python用Pygal如何生成漂亮的SVG图像详解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果想学习更多内容还请移步 pygal 官方文档吧。希望本文的内容对大家能有一定的帮助。

Python 相关文章推荐
python实现simhash算法实例
Apr 25 Python
Python Json序列化与反序列化的示例
Jan 31 Python
Python爬虫实战:分析《战狼2》豆瓣影评
Mar 26 Python
python读取中文txt文本的方法
Apr 12 Python
Python get获取页面cookie代码实例
Sep 12 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
Dec 30 Python
Python基础之变量基本用法与进阶详解
Jan 03 Python
Python异步编程之协程任务的调度操作实例分析
Feb 01 Python
Pandas实现一列数据分隔为两列
May 18 Python
Softmax函数原理及Python实现过程解析
May 22 Python
python编写一个会算账的脚本的示例代码
Jun 02 Python
python基础之类方法和静态方法
Oct 24 Python
Ubuntu下创建虚拟独立的Python环境全过程
Feb 10 #Python
简单谈谈Python中的几种常见的数据类型
Feb 10 #Python
Python使用QQ邮箱发送Email的方法实例
Feb 09 #Python
python3中bytes和string之间的互相转换
Feb 09 #Python
python实现下载文件的三种方法
Feb 09 #Python
Python如何实现守护进程的方法示例
Feb 08 #Python
详解Python中表达式i += x与i = i + x是否等价
Feb 08 #Python
You might like
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
javascript控制swfObject应用介绍
2012/11/29 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
JavaScript中的this到底是什么(一)
2015/12/09 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python机器学习之决策树分类详解
2017/12/20 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
html5 canvas 实现光线沿不规则路径运动
2020/04/20 HTML / CSS
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
幼儿园大班新学期寄语
2014/01/18 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
师范生见习自我总结
2015/06/23 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS