Как устроить гонку столбчатых диаграмм. Infogram

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

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

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

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

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

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

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

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

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

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

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

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