Автор оригинала: Mike Driscoll.
Я недавно взял на проект, где мне нужно было предъявить некоторые данные на веб-странице, используя данные, которые я запросил из базы данных. Так как я люблю Python, я решил использовать его для достижения этой задачи. Я пошел с Колбу Для обслуживания веб-страницы и Pygal для создания графов. В этом руководстве я покажу вам, как это сделать, но без логики базы данных. Вместо этого мы получим данные о погоде из погоды под землей и график. Давайте начнем!
Начиная
Чтобы следить с этим учебником, вам нужно будет установить колбу и Pygal. Вот как:
Если вы не хотите устанавливать колбу и все свои зависимости в вашу систему Python, вы должны создать VirtualenV, активируйте его и установите эти пакеты там.
Создание простых графиков в колбе
Создание графов с Pygal – это ветер. Но прежде чем мы сможем сделать это, нам нужны некоторые данные! Я решил схватить некоторые данные из погоды подземного участка. Вам нужно будет зарегистрироваться с ними, чтобы получить ключ API, чтобы вы также можете запросить. Как только у вас есть, вы можете использовать код ниже:
Давайте немного сломаемся. Основная часть, на которую мы хотим посмотреть, это get_weather_data функция. У этого есть декоратор @ app.route (‘/’) Это говорит с колбой, чтобы вызвать эту функцию, если мы перейдем на домашнюю страницу сайта. Домашняя страница в этом случае будет http://localhost: 5000/ Отказ Далее у нас есть наша погодная подземная API и URL, который мы хотим использовать. В этом случае я собираюсь исторические данные. Вы можете использовать немного другой URL для запроса на текущую погоду. После этого мы открываем наш URL, прочитайте его и разобрать JSON, возвращается. Наконец мы вытащим температуру в имперском формате вместе с часами дня, когда они были записаны.
Теперь, когда у нас есть наши данные, мы можем создать наш график! Мы начнем с создания гистограммы. Здесь я устанавливаю размер гистограммы, как иначе она в конечном итоге окажется довольно большим. Затем мы устанавливаем его этикетки и добавьте данные в диаграмму. Наконец, мы создаем HTML для отображения и вызовов Pygal оказывать Метод, который возвращает SVG в XML. Вы можете вызвать другие методы рендеринга, которые также будут возвращать другие типы.
Если вы хотите попробовать один из многих других графиков, которые Pygal предоставляет, прокомментируйте линии вызовов, которые создали диаграмму CALL, которые создали диаграмму стержня и воскресную строки для графика StackedLine. Затем повторно запустите скрипт. Вы должны в конечном итоге с графом, который выглядит так:
Использование шаблона для отображения графика
Большую часть времени вы захотите использовать шаблон, когда вы используете колбу. Шаблоны, которые находятся на колбе, используя Jinja Отказ Вам нужно будет создать Шаблоны Папка в том же каталоге, где вы сохранили код Python выше. В нем вам нужно будет поставить следующий HTML-код:
Вы отметите, что нам нужно сказать Jinja, что сделано SVG XML безопасен. В противном случае это попытается сбежать XML, и вы получите действительно очень странный выход. Нам также необходимо изменить наш код Python, чтобы сделать шаблон. Давайте сделаем это сейчас:
Вы отметите, что мы импортировали Render_template Функция и что мы используем это для загрузки шаблона. Нам также нужно сказать Pygal, чтобы отключить декларацию XML. Если мы этого не сделаем, мы получим некоторые ошибки декодирования Unicode. Во всяком случае, дайте этот код попробовать, и вы должны иметь тот же граф, что и раньше.
Упаковка
На данный момент вы должны быть в состоянии создать свои собственные графики, используя колбу и Pygal. Рекомендую проверить документацию Pygal, чтобы вы могли видеть многие другие типы графиков, которые он может сделать. Он также имеет много веселых стилей, которые вы можете подать заявку на ваши графики. Вы также захотите проверить документацию Flask, чтобы узнать, как добавить CSS и другие ничути. Повеселись!
Дальнейшее чтение
- Колба Мега Учебное пособие
- Колбу Документация
- Pygal Сайт
- Jinja документация