Найти тему

Как легко создать анимированный чарт (график)

Многие люди, увидев в интернете видео вроде такого:

задаются вопросом, как же сделать подобную анимированную инфографику. Использование видеоредактора требует специальных умений, да и времени займёт прилично. На самом деле это можно сделать довольно легко с помощью сервиса LivingCharts.com. В этой статье я покажу, как в нём создать анимацию.

Для начала перейдём по адресу https://livingcharts.com и увидим главную страницу:

Регистрируемся на сервисе, кликая на кнопку "Get started" или "Sign in". Далее мы попадаем на страницу своих проектов, где их пока ещё нет:

-2

Нажимаем на кнопку "Create project", выбираем тип проекта "Bar chart race". Создаётся проект по умолчанию, с ВВП по ППС на душу населения среди стран бывшего СССР:

-3

Два главных экрана при работе - это экран работы с таблицей данных и собственно внешний вид анимации. Они переключаются кнопками Data и Preview соответственно. При нажатии на Data мы видим заполненную данными таблицу:

-4

В первой колонке указывается название столбца (бара) на графике. Во второй колонке - ссылка на изображение для этого столбца. В первой строке указывается дата. Всё остальное - это значения столбцов для своих дат.

Справа на экране в режиме Preview расположена панель настроек:

-5

С помощью неё происходит настройка внешнего вида. Можно настроить соотношение сторон, цвета, взаимное расположение элементов и их количество и многое другое. Но об этом как-нибудь в следующий раз :) А пока нас интересует кнопка Export, которая позволяет экспортировать график прямо в видео. В диалоговом окне экспорта выбираем желаемое разрешение видео и жмём "Export". Через некоторое время получаем видео файл, открываем его и убеждаемся, что всё в порядке:

-6

Вот и всё, довольно-таки На этом вводный курс по использованию сервиса LivingCharts.com заканчивается. Можете потыкать кнопки сами: ссылка на проект.

Следует заметить, что пока сервис работает в режиме разработки. По ходу развития будут добавляться новые фишки, о которых я буду здесь рассказывать. Так что подписывайтесь, чтобы не пропустить! :)

Удачи вам в создании графиков!