SVG (масштабируемая векторная графика) — это формат изображения, который определяет векторную графику в формате XML. В этом руководстве вы узнаете, как начать работу с Pygal, библиотекой построения графиков SVG Python.
Начиная
Нет никаких зависимостей для установки Pygal. Это доступно для Python 2.7+. Предполагая, что в вашей системе установлены Python и pip, установите Pygal с помощью pip.
|
1
|
pip install pygal
|
Если вы хотите использовать последнюю версию Pygal, взгляните на репозиторий Pygal GitHub и клонируйте его.
Создание гистограммы
Визуализация данных объясняет информацию, которую мы имеем в виде диаграмм или графиков. В этом руководстве вы узнаете, как создать гистограмму с помощью библиотеки Pygal в веб-приложении Python Flask. Давайте начнем с создания простого веб-приложения для колб. Сначала установите колбу, если она еще не установлена:
|
1
|
pip install flask
|
Создайте файл с именем app.py и добавьте следующий код:
|
1
2
3
4
5
6
7
8
9
|
from flask import Flask
app = Flask(__name__)
@app.route(«/»)
def home():
return «Tutsplus : Welcome to PyGal Charting Library !! «
if __name__ == «__main__»:
app.run()
|
Предположим, что у нас есть некоторые данные для ежегодного списка марок за определенные годы. Данные будут в формате JSON. Вот пример данных JSON:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
[{
«year»: 2000,
«mark»: 85
}, {
«year»: 2001,
«mark»: 75
}, {
«year»: 2002,
«mark»: 65
}, {
«year»: 2003,
«mark»: 95
}, {
«year»: 2004,
«mark»: 85
}, {
«year»: 2005,
«mark»: 55
}]
|
Вы будете отображать Year вдоль оси X и Mark вдоль оси Y. Итак, начнем с создания нового маршрута для нашего приложения Python:
|
1
2
3
|
@app.route(«/bar»)
def bar():
# Charting code will be here
|
Вы будете загружать данные из файла JSON, поэтому вам нужно будет импортировать библиотеку json вместе с библиотекой pygal .
|
1
2
|
import pygal
import json
|
Прочитайте данные JSON, открыв файл в режиме чтения, и загрузите данные JSON.
|
1
2
|
with open(‘bar.json’,’r’) as bar_file:
data = json.load(bar_file)
|
Создайте объект pygal диаграммы из библиотеки pygal .
|
1
|
chart = pygal.Bar()
|
Когда у вас есть объект диаграммы, вам нужно установить ось X и Y. Чтобы добавить метки на оси Y, мы будем читать метки в виде списка из объекта данных JSON.
|
1
|
mark_list = [x[‘mark’] for x in data]
|
Аналогичным образом считайте год из объекта данных JSON в виде списка.
|
1
|
[x[‘year’] for x in data]
|
Присвойте данные оси X и оси Y объекту диаграммы.
|
1
2
|
chart.add(‘Annual Mark List’,mark_list)
chart.x_labels = [x[‘year’] for x in data]
|
Теперь вам нужно визуализировать SVG изображение гистограммы в файл. В Python Flask статические файлы хранятся в папке с именем static , поэтому создайте папку с именем static внутри директории проекта. Внутри static папки создайте папку с images . Добавьте следующую строку кода для визуализации изображения SVG в файл.
|
1
|
chart.render_to_file(‘static/images/bar_chart.svg’)
|
Создайте папку с template внутри директории проекта. Внутри каталога template создайте файл с именем app.html . Добавьте следующий HTML-код в файл app.html :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<html>
<head>
<title> Tutsplus — Pygal Charting Library</title>
</head>
<body>
<h2> Tutsplus — Pygal Charting Library</h2>
<div>
<p>Bar Chart</p>
<object type=»image/svg+xml» data=»{{image_url}}»>
Your browser does not support SVG
</object>
</div>
</body
</html>
|
Вы отобразите нашу гистограмму в файле app.html . Наконец, все, что вам нужно сделать, это визуализировать шаблон вместе с параметром image_url , который будет служить data для элемента. Вот полный /bar маршрут и метод:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
# ——————————————-
# Charting route which displays the bar chart
# ——————————————-
@app.route(«/bar»)
def bar():
with open(‘bar.json’,’r’) as bar_file:
data = json.load(bar_file)
chart = pygal.Bar()
mark_list = [x[‘mark’] for x in data]
chart.add(‘Annual Mark List’,mark_list)
chart.x_labels = [x[‘year’] for x in data]
chart.render_to_file(‘static/images/bar_chart.svg’)
img_url = ‘static/images/bar_chart.svg?cache=’ + str(time.time())
return render_template(‘app.html’,image_url = img_url)
|
Я добавил cache строки запроса в img_url чтобы предотвратить загрузку изображения из кеша браузера.
Сохраните вышеуказанные изменения и попробуйте запустить приложение:
|
1
|
python app.py
|
Укажите в браузере http: // localhost: 5000 / bar, и вы сможете просматривать гистограмму на основе данных JSON.
Несколько гистограмм
Вы также можете добавить несколько баров к существующей гистограмме. Предположим, у вас есть те же данные JSON с несколькими дополнительными параметрами, которые необходимо представить. Вот пример:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
[{
«year»: 2000,
«mark»: 85,
«tournament»: 50
}, {
«year»: 2001,
«mark»: 75,
«tournament»: 70
}, {
«year»: 2002,
«mark»: 65,
«tournament»: 75
}, {
«year»: 2003,
«mark»: 95,
«tournament»: 25
}, {
«year»: 2004,
«mark»: 85,
«tournament»: 67
}, {
«year»: 2005,
«mark»: 55,
«tournament»: 49
}]
|
Чтобы отобразить панель данных турнира, вам нужно получить список результатов турнира и добавить его в объект гистограммы.
|
1
2
|
tourn_list = [x[‘tournament’] for x in data]
chart.add(‘Tournament Score’,tourn_list)
|
Сохраните вышеуказанные изменения и перезагрузите сервер. Укажите в браузере http: // localhost: 5000 / bar, и вы должны отобразить гистограмму.
Добавление пользовательского стиля
Вы также можете добавить пользовательские стили к гистограммам. Например, чтобы изменить цвета панели, вам нужно импортировать стиль Pygal.
|
1
|
from pygal.style import Style
|
Определите пользовательский стиль, как показано, чтобы указать цвета для панели и указать цвет фона для диаграммы.
|
1
2
3
4
|
custom_style = Style(
colors=(‘#991515′,’#1cbc7c’),
background=’#d2ddd9′
)
|
Примените пользовательский стиль к диаграмме при создании объекта гистограммы.
|
1
|
chart = pygal.Bar(style = custom_style)
|
Сохраните вышеуказанные изменения и перезагрузите сервер. Укажите в браузере http: // localhost: 5000 / bar, и вы сможете увидеть гистограмму с пользовательским стилем, отображаемым на экране.
Завершение
В этом уроке вы увидели, как начать работу с Pygal, библиотекой построения графиков SVG Python. Вы узнали, как использовать Pygal для создания гистограммы в приложении Python Flask. Вы видели, как добавить несколько столбцов к гистограмме и настроить стиль гистограммы.
То, что вы видели, является лишь верхушкой айсберга, и вы можете сделать намного больше, используя Pygal. Я бы рекомендовал прочитать официальную документацию Pygal, чтобы получить подробную информацию.
Кроме того, не стесняйтесь посмотреть, что у нас есть в наличии для продажи и для изучения на Envato Market , и не стесняйтесь задавать любые вопросы и предоставлять ценные отзывы, используя канал ниже.
Исходный код из этого урока доступен на GitHub .