Highcharts для дизайнера
Когда в проекте много данных — без графиков не обойтись. Красиво нарисованные диаграммы эффектно смотрятся в портфолио, но часто макеты из графических редакторов остаются нереализованными, так как разработка сложных кастомных решений оказывается слишком дорогой, либо красивые графики после верстки становятся совсем не красивыми и не наглядными.
Одно из удобных решений этой проблемы, на которое стоит обратить внимание дизайнерам, — сервис Highcharts.
Highcharts — фреймворк для визуализации данных. Типов графиков у них очень много, каждый график можно допилить до желаемого вида. Выбрать нужную диаграмму из множества можно в разделе DEMO
Вот примеры моих графиков:
А разработчикам их можно передать вот в таком виде (код на jsfiddle.com):
Плюсы и минусы использования Highcharts
Плюсы:
- разработчики скажут вам спасибо;
- графики будут выглядеть и работать (!) именно так, как вы задумали, а не так, как получилось запрограммировать;
- можно забить реальные данные и посмотреть, как графики будут выглядеть в жизни, а не на макетах;
- у вас будет живой интерактивный прототип графика, с которым можно взаимодействовать, тыкать мышкой, смотреть поведение;
- у вас не получится придумать визуализацию данных, в которой сами не сможете разобраться 🙂 при работе в графическом редакторе можно не устоять перед искушением подобрать данные так, чтобы графики выглядели красиво, даже если это будет слегка нереалистичная выборка, при работе с Highcharts этого удастся избежать;
- можно посмотреть результат вместе с заказчиком или коллегой и решить многие вопросы, например, в живую продемонстрировать, что выборка данных, которую коллегу просит использовать, не будет наглядно иллюстрировать то, что он хотел бы показать.
Есть и минусы:
- может быть сложно разобраться в настройках графиков, так как править придется код (но есть подробная документация на английском);
- инструмент накладывает ограничения, некоторые вещи сделать не получится — это касается визуальной составляющей, нельзя будет, например, сделать анимацию так, как вы придумали, а не так, как заложено разработчиками Highcharts;
- с такими графиками сложнее собрать лайки на dribbble (наверное).
Практика
Для начала нужно выбрать тип графика.
Редактировать выбранный график можно в jsfiddle, codepen и в собственном редакторе highcloud (доступно не для всех графиков).
Можно выбрать заданную тему оформления.
Чтобы настроить вид графика, мне проще всего сначала скопировать в jsfiddle весь код стандартной темы, а потом менять её отдельные параметры.
Вот что получалось у меня:
В моей практике часто были ситуации, когда изначальная концепция менялась после подстановки реальных данных. Если бы я рисовала графики в графическом редакторе, проблемы бы обнаружились только на продакшне.
Например, я делала график статусов заявок:
При подстановке реальных цифр стало понятно, что это не наглядно вообще. Переделала:
А вот пример того, как удалось убедить коллег показывать информацию на карте, а не с помощью перечисления регионов (тем более, что количество показываемых регионов в списке пришлось бы ограничить). Заодно пересмотрели сами показатели — на карте можно представить более интересные пользователям данные.
Было:
Стало:
Тут изначально предполагалось, что графики будут идти один под другим. При подстановке реальных цифр оказалось, что графики слиплись.
Пришлось менять концепцию и отображать данные по-другому на двух отдельных графиках.
Выводы
- Визуализацию данных стоит делать на реальных цифрах.
- Передавать графики разработчикам удобнее в коде, удобнее в том числе дизайнерам, чтобы самим задать размер шрифта, отступы, цвета, отображаемые и скрываемые данные и т.д.
- Highcharts — классный инструмент, которым легко пользоваться дизайнеру, чтобы создавать и красивые, и правильно работающие графики.
Мой телеграм-канал о дизайне, продуктовом и не только
