99999久久久久久亚洲,欧美人与禽猛交狂配,高清日韩av在线影院,一个人在线高清免费观看,啦啦啦在线视频免费观看www

熱線電話：13121318867

登錄
首頁(yè)精彩閱讀python用Pygal如何生成漂亮的SVG圖像詳解
python用Pygal如何生成漂亮的SVG圖像詳解
2018-01-26
收藏

python用Pygal如何生成漂亮的SVG圖像詳解

本篇文章講述python如何用 Pygal 來(lái)生成漂亮的 SVG 圖表，并能夠利用 Python 中的 Flask 框架來(lái)顯示你的 SVG 圖像

SVG可以算是目前最最火熱的圖像文件格式了，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯(lián)盟進(jìn)行開(kāi)發(fā)的。嚴(yán)格來(lái)說(shuō)應(yīng)該是一種開(kāi)放標(biāo)準(zhǔn)的矢量圖形語(yǔ)言，可讓你設(shè)計(jì)激動(dòng)人心的、高分辨率的Web圖形頁(yè)面。用戶可以直接用代碼來(lái)描繪圖像，可以用任何文字處理工具打開(kāi)SVG圖像，通過(guò)改變部分代碼來(lái)使圖像具有交互功能，并可以隨時(shí)插入到HTML中通過(guò)瀏覽器來(lái)觀看。
First Head in Pygal
首先安裝 pygal 啦：    
pip install pygal
如果你要把生成格式設(shè)為除了 svg 之外的格式，如 png，jpg 之類(lèi)，就要安裝底下幾個(gè)庫(kù)了：    
pip install lxml
在 Ubuntu 中按照如下提示安裝即可：    
sudo apt-get install libxml2-dev libxslt1-dev python-dev
sudo apt-get install python-lxml
pip install cairosvg
安裝該庫(kù)原理同上：    
sudo apt-get install python-cairosvg
如下兩個(gè)庫(kù)，只需正常 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 文件，因?yàn)槭?svg 格式的，一般的話直接是不能打開(kāi)的，選擇默認(rèn)的瀏覽器打開(kāi)吧，看到就是底下這個(gè)樣子：

更加炫酷點(diǎn)的圖：    
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')

生成的圖就是下面這個(gè)樣子：

Hello PNG
有時(shí)候，我們不需要 svg，只需要 png 格式的圖表，沒(méi)關(guān)系，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')
注意綠色的標(biāo)示，成功生成 png 格式的圖片啦：

Hello Flask and Pygal

讓 Pygal 生成的 svg 格式圖片中，顯示在你的網(wǎng)頁(yè)上唄，我們選擇 flask 來(lái)提供 web 支持：    
pip install flask

核心代碼如下，沒(méi)錯(cuò)就是這么短：    
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()
打開(kāi) 127.0.0.1:5000 就能看到下面的樣子咯：

當(dāng)然咯，你還可以做出如下更為炫酷的 svg 圖像，不過(guò)這一切都是 pygal 的用法啦：
總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助。


數(shù)據(jù)分析咨詢請(qǐng)掃描二維碼

若不方便掃碼，搜微信號(hào)：CDAshujufenxi

數(shù)據(jù)分析師資訊
更多

OK
客服在線
立即咨詢
客服在線
立即咨詢
') } function initGt() { var handler = function (captchaObj) { captchaObj.appendTo('#captcha'); captchaObj.onReady(function () { $("#wait").hide(); }).onSuccess(function(){ $('.getcheckcode').removeClass('dis'); $('.getcheckcode').trigger('click'); }); window.captchaObj = captchaObj; }; $('#captcha').show(); $.ajax({ url: "/login/gtstart?t=" + (new Date()).getTime(), // 加隨機(jī)數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 調(diào)用 initGeetest 進(jìn)行初始化 // 參數(shù)1：配置參數(shù) // 參數(shù)2：回調(diào)，回調(diào)的第一個(gè)參數(shù)驗(yàn)證碼對(duì)象，之后可以使用它調(diào)用相應(yīng)的接口 initGeetest({ // 以下 4 個(gè)配置參數(shù)為必須，不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用戶后臺(tái)檢測(cè)極驗(yàn)服務(wù)器是否宕機(jī) new_captcha: data.new_captcha, // 用于宕機(jī)時(shí)表示是新驗(yàn)證碼的宕機(jī) product: "float", // 產(chǎn)品形式，包括：float，popup width: "280px", https: true // 更多配置參數(shù)說(shuō)明請(qǐng)參見(jiàn)：http://docs.geetest.com/install/client/web-front/ }, handler); } }); } function codeCutdown() { if(_wait == 0){ //倒計(jì)時(shí)完成 $(".getcheckcode").removeClass('dis').html("重新獲取"); }else{ $(".getcheckcode").addClass('dis').html("重新獲取("+_wait+"s)"); _wait--; setTimeout(function () { codeCutdown(); },1000); } } function inputValidate(ele,telInput) { var oInput = ele; var inputVal = oInput.val(); var oType = ele.attr('data-type'); var oEtag = $('#etag').val(); var oErr = oInput.closest('.form_box').next('.err_txt'); var empTxt = '請(qǐng)輸入'+oInput.attr('placeholder')+'！'; var errTxt = '請(qǐng)輸入正確的'+oInput.attr('placeholder')+'！'; var pattern; if(inputVal==""){ if(!telInput){ errFun(oErr,empTxt); } return false; }else { switch (oType){ case 'login_mobile': pattern = /^1[3456789]\d{9}$/; if(inputVal.length==11) { $.ajax({ url: '/login/checkmobile', type: "post", dataType: "json", data: { mobile: inputVal, etag: oEtag, page_ur: window.location.href, page_referer: document.referrer }, success: function (data) { } }); } break; case 'login_yzm': pattern = /^\d{6}$/; break; } if(oType=='login_mobile'){ } if(!!validateFun(pattern,inputVal)){ errFun(oErr,'') if(telInput){ $('.getcheckcode').removeClass('dis'); } }else { if(!telInput) { errFun(oErr, errTxt); }else { $('.getcheckcode').addClass('dis'); } return false; } } return true; } function errFun(obj,msg) { obj.html(msg); if(msg==''){ $('.login_submit').removeClass('dis'); }else { $('.login_submit').addClass('dis'); } } function validateFun(pat,val) { return pat.test(val); }