AmСharts Live: анимированные диаграммы

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

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

Как насчёт такой анимированной диаграммы?

Она создана с помощью интересного и несложного сервиса AmСharts Live - за несколько минут, буквально в несколько кликов. Кстати, можно посмотреть диаграмму во всей красе - на цветной "подложке" она смотрится ещё эффектнее (жаль только, что "подложку" нельзя добавить на сайт или в блог).

Как это работает?

Регистрация

Заходим на сайт сервиса. Чтобы зарегистрироваться, нажимаем справа вверху кнопку "Sign in". Можно войти на сайт с помощью аккаунтов Google и Facebook, а можно зарегистрировать новый аккаунт с помощью электронной почты (Register New Account).

Для начала указываем имя и адрес электронной почты. Обязательно соглашаемся с условиями сервиса (I agree to amChartsTerms & Conditions and Privacy Policy).

Сразу же на электронную почту приходит письмо с подтверждением регистрации. Переходим по длинной ссылке.

Сервис уже сгенерировал наш пароль. Например, вот такой. Обязательно нужно его скопировать! И только потом нажать "Set Password" (не повторяйте моих ошибок).

Нас возвращают на стартовую страницу. Вписываем в нужные окна адрес электронной почты и скопированный пароль. Не забываем согласиться с условиями сайта (I agree to amCharts Terms & Conditions and Privacy Policy) и наконец нажимаем "Login".

Возвращаемся на стартовую страницу. Теперь справа вверху вместо кнопки "Login" будет написано ваше имя. Ура! Регистрация закончилась.

Создаём простую диаграмму

Начинаем креативить. Нажимаем большую красную кнопку "Make a Chart".

Выбираем шаблон из библиотеки сервиса - их тут более 50.

Казалось бы, всё просто: выбираем вид диаграммы, заносим в таблицу свои данные – сервис автоматически генерирует график.

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

Итак, попадаем в рабочее поле, в раздел "Appearance".

Здесь вносятся данные для создания диаграммы. Для этого внизу справа предусмотрены колонки. Кликаем на любую строчку и вносим свои данные. Если кликнуть на названия колонок (category, column-1, column-2), появится черная надпись - "Click to rename column". Кликаем ещё раз - и переназываем столбцы таблицы. Нажимая "крестик", удаляем столбец или строку.

Чтобы добавить новые строки, нажимаем "Add Row", а чтобы добавить новые колонки - "Add Column".

Можно попробовать импортировать в сервис таблицу Excel с нужной информацией или загрузить эту информацию по ссылке (например, из Google Таблицы), но надо быть готовым к тому, что сервис плохо распознает кириллицу и вместо данных загрузится абракадабра (что у меня и получилось). Пришлось все данные вписывать вручную.

Все внесённые сведения тут же отражаются в графике наверху.

Левее - выбор цвета шрифта (по умолчанию - черный) и его размера. Очень интересная опция - "диаграмма, нарисованная от руки" - Hand drawn. Если её выбрать, линии графика действительно станут неровными, как будто нарисованными вручную. Чуть ниже цифры для корректировки этого ручного творчества. Чем больше значения цифр в этих графах, тем более "кривая" станет диаграмма. Можно "поиграть" с этими опциями. Это интересно. :)

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

В общем-то этих минимальных настроек уже достаточно для создания диаграммы. Я попробовала попутешествовать по сервису и дополнительно вот что ещё узнала.

Добавим немного сложности

Ну, во-первых, в разделе "Titles" (ищем его внизу) можно указать название диаграммы - в поле "Text", а чуть выше выбрать размер шрифта для заголовка.

Во-вторых, в разделе "Graphs" можно изменить тип диаграммы (Type) и добавить название единиц измерения (в моём случае - "Длина в километрах").

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

Во вкладке с трудно выговариваемым названием "Miscellaneous", в разделе «Аnimation», можно изменить эффекты анимации: замедлить скорость (1 - самая высокая) и поменять тип анимации, выбрав подходящий из выпадающего списка.

В заключение наживаем "Save", потом - "Publish&Share" - и любуемся получившейся работой.

И поделиться...

Дополнительная опция – возможность добавить красочную фотоподложку для диаграммы. Для этого в режиме просмотра нажимаем на значок "шестерёнка" (Customize the look) и открываем библиотеку фотографий. Здесь большое количество красочных фотоподложек - осталось выбрать то, что понравилось.

Чтобы получить код для встраивания и ссылку, нажимаем на "самолетик" (Share&Publish).

Ссылкой можно поделиться в социальных сетях (Facebook, Twitter).