Highcharts для дизайнера

Когда в проекте много данных — без графиков не обойтись. Красиво нарисованные диаграммы эффектно смотрятся в портфолио, но часто макеты из графических редакторов остаются нереализованными, так как разработка сложных кастомных решений оказывается слишком дорогой, либо красивые графики после верстки становятся совсем не красивыми и не наглядными.

Одно из удобных решений этой проблемы, на которое стоит обратить внимание дизайнерам, — сервис Highcharts.

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

примеры диаграмм

Вот примеры моих графиков:

А разработчикам их можно передать вот в таком виде (код на jsfiddle.com):

Плюсы и минусы использования Highcharts

Плюсы:

• разработчики скажут вам спасибо;
• графики будут выглядеть и работать (!) именно так, как вы задумали, а не так, как получилось запрограммировать;
• можно забить реальные данные и посмотреть, как графики будут выглядеть в жизни, а не на макетах;
• у вас будет живой интерактивный прототип графика, с которым можно взаимодействовать, тыкать мышкой, смотреть поведение;
• у вас не получится придумать визуализацию данных, в которой сами не сможете разобраться 🙂 при работе в графическом редакторе можно не устоять перед искушением подобрать данные так, чтобы графики выглядели красиво, даже если это будет слегка нереалистичная выборка, при работе с Highcharts этого удастся избежать;
• можно посмотреть результат вместе с заказчиком или коллегой и решить многие вопросы, например, в живую продемонстрировать, что выборка данных, которую коллегу просит использовать, не будет наглядно иллюстрировать то, что он хотел бы показать.

Есть и минусы:

• может быть сложно разобраться в настройках графиков, так как править придется код (но есть подробная документация на английском);
• инструмент накладывает ограничения, некоторые вещи сделать не получится — это касается визуальной составляющей, нельзя будет, например, сделать анимацию так, как вы придумали, а не так, как заложено разработчиками Highcharts;
• с такими графиками сложнее собрать лайки на dribbble (наверное).

Практика

Для начала нужно выбрать тип графика.

Редактировать выбранный график можно в jsfiddle, codepen и в собственном редакторе highcloud (доступно не для всех графиков).

Можно выбрать заданную тему оформления.

Чтобы настроить вид графика, мне проще всего сначала скопировать в jsfiddle весь код стандартной темы, а потом менять её отдельные параметры.

Вот что получалось у меня:

Ссылка на живой график http://jsfiddle.net/nmu55c6o/6/

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

Например, я делала график статусов заявок:

При подстановке реальных цифр стало понятно, что это не наглядно вообще. Переделала:

А вот пример того, как удалось убедить коллег показывать информацию на карте, а не с помощью перечисления регионов (тем более, что количество показываемых регионов в списке пришлось бы ограничить). Заодно пересмотрели сами показатели — на карте можно представить более интересные пользователям данные.

Было:

Стало:

Тут изначально предполагалось, что графики будут идти один под другим. При подстановке реальных цифр оказалось, что графики слиплись.

Пришлось менять концепцию и отображать данные по-другому на двух отдельных графиках.

Выводы

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

Мой телеграм-канал о дизайне, продуктовом и не только