How python uses Pygal to generate beautiful SVG images

Source: Internet
Author: User
This article describes how to use Pygal to generate beautiful SVG charts and use the Flask framework in python to display your SVG images. For more information, see the following. Preface

SVG can be regarded as the most popular image file format at present. its English name is Scalable Vector Graphics, which means a scaled Vector image. It is based on XML (Extensible Markup Language) and developed by the World Wide Web Consortium (W3C. Strictly speaking, it should be an open standard vector graphics language that allows you to design exciting, high-resolution Web graphics pages. Users can use code to describe images directly. they can use any text processing tool to open SVG images and change some code to make images Interactive, and can be inserted into HTML at any time for viewing through a browser.

First Head in Pygal

Install pygal first:

pip install pygal

If you want to set the generated format to a format other than svg, such as png and jpg, install the following libraries:

pip install lxml

Follow the prompts below to install Ubuntu:

sudo apt-get install libxml2-dev libxslt1-dev python-devsudo apt-get install python-lxmlpip install cairosvg

Install the library in the same way as follows:

sudo apt-get install python-cairosvg

For the following two libraries, you only need to properly install pip:

pip install tinycsspip 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')

The generated file is a black Hello. svg file. because it is in svg format, it cannot be opened directly. select the default browser to open it. The following figure shows the file:

A more cool chart:

import pygalline_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')

The generated graph is like this:

Sometimes, we don't need svg. we only need a graph in png format. it doesn't matter. pygal can do the following:

Import pygalbar_chart = pygal. bar () bar_chart.add ('pythonacci', [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]) bar_chart.render_to_file ('Bar _ chart. svg ') # generate a png format table bar_chart.render_to_png(filename+'bar_chart.png ')

Pay attention to the Green Mark and generate an image in png format:

Let the svg format image generated by Pygal be displayed on your webpage. we choose flask to provide web support:

pip install flask

The core code is as follows:

import pygalfrom flask import Flask, Responseapp = Flask(__name__)@app.route('/')def index(): return """    hello pygal and flask  
   
    
   '"""@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()

Open 127.0.0.1: 5000 and you will see the following:

For more details about how to generate beautiful SVG images using Pygal in python, refer to the PHP Chinese website!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.