Как устроить гонку столбчатых диаграмм: сервис infogram

Как устроить гонку столбчатых диаграмм: сервис infogram

технология

Как устроить гонку столбчатых диаграмм: сервис infogram

Жанр bar chart race — гонка столбчатых диаграмм — популярен. Такой график позволяет умещать в короткую анимацию большой объем данных. Рассказываем, как создать гонку в сервисе infogram.

Так гонка столбчатых диаграмм, созданная в сервисе infogram будет выглядеть на сайте. Чтобы посмотреть анимацию, нажмите на значок «play» под графиком.

Проведите подготовительную работу — составьте таблицу с данными в формате CSV или XLS, XLSX. Таблица загружается на сайт infogram файлом или ссылкой на документ в Google или Dropbox.

  • Первый столбец — для загрузки фотографий, можно оставить пустым.
  • Во втором столбце построчно впишите «участников» гонки.
  • Начиная с третьего столбца и дальше укажите временной период — год, месяц, день — который будет отображать гонка. Один столбец — одна временная точка. В строках укажите данные.

Откройте infogram.com. Сервис предлагает несколько способов для авторизации: через аккаунты в Фейсбуке, в Google, в Twitter, в LinkedIn или через регистрацию.

Откроется личный кабинет. Вверху сервиса расположены шаблоны проектов. Выбирайте, где написано «Infographics». Назовите график и нажимайте «Create». Стандартный шаблон можно менять под размеры вашего сайта — для этого двигайте бегунок под шаблоном вверх или вниз или задайте размеры в колонке справа.

В меню слева выберите значок с графиком. Появится меню с разными видами инфографики. Нас интересует «bar race». Докрутите до него и нажмите, он автоматически встанет в страницу.

Нажмите два раза на график, справа откроется таблица для внесения данных. Данные можно вносить вручную или загрузить на сервис уже готовую таблицу.

Цветовые квадраты рядом с цифрами в строках таблице обозначают, каким цветом будет показан тот или иной сектор. Цвета можно менять, но сильно не увлекайтесь.

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

Добавьте заголовок и текст к гонке столбчатых диаграмм. Выберите в меню нужный вид текста: заголовок, подзаголовок, цитата.

Когда ваш график будет готов, добавьте его на сайт.

Нажмите в правом верхнем углу синюю кнопку «Share», затем — Embed. На сервисе предусмотрены отдельные настройки кода под разные платформы — например, адаптивность размеров, специальный код для сайтов на WordPress. Мы не можем сказать, какой именно код подойдет для вашего сайта. Пробуйте.

Инструкция актуальна на август 2022 года.

Спецпроекты sdelano.media

Над материалом работала
Ольга Бердецкая

Иллюстрации:
скриншоты сервиса infogram.com

Знаете похожие технологии? Расскажите о своем опыте, нам интересно!

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: