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!