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).