В прошлых статьях мы рассматривали десятки эстетических тем, но дизайн не всегда был чисто эстетическим. Часто действительно «хорошо разработанное» решение не только визуально привлекательное, но и гибкое и эффективное. Есть случаи, когда туннельное зрение на внешний вид — и игнорирование всех других аспектов проекта — может оставить вас с красивым дизайном, но непрактичным для работы.
Одним из примеров этого может быть обувь на высоком каблуке; это может выглядеть стильно и привлекательно для публики, но для женщины, которая должна его носить, это болезненно для ног, бесполезно на мягкой земле и делает бег невозможным. Если вы примените подобный подход к своим дизайнерским проектам, вы можете получить дизайн, который, как и обувь на высоком каблуке, — это мода с очень малой функциональностью. Чтобы убедиться, что ваш следующий интерфейс или дизайн целевой страницы не постигнет та же участь, что и плохо выбранная обувь, вам, вероятно, понадобится способ визуализации данных, который обеспечивает точный баланс между эстетической привлекательностью и практичностью.
Первой целью дизайнера может быть создание идеального по пикселям графика или диаграммы в Photoshop или Illustrator, но это решение влечет за собой постоянное обновление диаграмм даже для самых незначительных изменений в данных, что делает метод слишком простым и практичным. Если ваши показатели изменяются всего на несколько единиц или процентных пунктов, вам, вероятно, придется открывать редактируемый файл, вносить необходимые изменения, экспортировать и загружать статическое изображение каждый раз. Это много работы для таких мелких изменений. Хуже того, если ваши данные основаны на временных шкалах или других постоянно меняющихся показателях, то ваши графики буквально устаревают ежедневно. И, наконец, статические изображения в конечном итоге не являются интерактивными, что плохо использует ваши знания программирования и интерактивные возможности вашего веб-сайта.
Красивые, практичные диаграммы и графики
Таким образом, вместо того, чтобы тратить каждую унцию практичности (и интерактивности) на безупречную инфографику, вероятно, лучше использовать динамическую библиотеку диаграмм. Эти библиотеки диаграмм могут отображать удивительно четкие графики, оставаясь при этом гибкими и простыми в обновлении, что делает их отличным решением как для дизайнера, так и для обычного зрителя. Некоторые из этих библиотек используют HTML5, который не полностью поддерживается старыми браузерами, но эти проблемы совместимости быстро исчезают с каждым новым обновлением браузера. Динамические диаграммы также намного меньше и легче, чем большие графические файлы, что обеспечивает дополнительный рост скорости сайта. Преимущества использования динамических библиотек диаграмм растут, а их потенциальные проблемы уменьшаются.
Есть довольно много библиотек на выбор, каждая из которых имеет свои сильные и слабые стороны.
Highcharts
3 различных способа просмотра данных о потреблении фруктов с помощью HighCharts
HighCharts — это библиотека диаграмм на основе JavaScript со стильными графиками, отличной поддержкой и впечатляющей совместимостью. Вы можете рассчитывать на то, что их диаграммы будут функционировать в любом браузере, начиная от страшного Internet Explorer 6 до последней версии мобильного Safari на устройствах iOS. Их диаграммы также имеют тонкую анимацию — растущие гистограммы и прослеживание линий тренда — которые увеличивают их визуальную привлекательность. Библиотека с открытым исходным кодом, поэтому диаграммы могут быть изменены для уникальных потребностей любого проекта. Для некоммерческого использования HighCharts бесплатен, но для коммерческих проектов он имеет значительную стоимость. Для одного веб-сайта использование HighCharts обойдется всего в 80 долларов, но для команды из 10 разработчиков, использующей библиотеку в нескольких проектах, цена возрастает до 2000 долларов. Если вы используете HighCharts в приложении, вам необходимо связаться с производителями, чтобы договориться о сделке с точки зрения цены и использования HighCharts.
PlotKit
Три диаграммы отображаются с помощью PlotKit
Графики PlotKit могут быть не такими привлекательными, как графики HighChart, но PlotKit на 100% бесплатен во всех случаях. Он также имеет полезное руководство по быстрому запуску, которое поможет вам запустить ваши графики. PlotKit определяет, поддерживает ли браузер посетителя <canvas>, и использует технологию, если находит поддержку. В противном случае у старых браузеров есть запасные методы для достижения тех же целей. PlotKit не является отдельной библиотекой; для правильной работы он полагается на MochiKit , что может несколько усложнить установку и обслуживание по сравнению с автономной библиотекой.
d3.js
Диаграмма «солнечных лучей» с использованием d3.js
d3.js — это графическая библиотека на основе JavaScript, которая предлагает четкую эстетику для своего размера файла, а также отличное соотношение цены и качества, равное нулю долларов. d3.js — отличный выбор для визуализации больших объемов сложных данных. Диаграммы красочны и чисты, а документация обширна и полезна. В d3.js особое внимание уделяется интерактивным переходам и преобразованиям на основе движения, которые могут добавить впечатляющие функциональные возможности к диаграммам и графикам в вашем веб-дизайне. Создатели d3.js имеют учебники для начинающих пользователей, а также богатую документацию для ветеранов.
FusionCharts
Девять различных графиков с использованием FusionCharts
FusionCharts имеет огромное разнообразие типов диаграмм, каждый из которых имеет изысканный профессиональный вид. Они также имеют сотни функций и предлагают расширения для таких программ, как Powerpoint, Joomla, Dreamweaver и Flex. Но все эти инструменты имеют свою цену, и лицензирование для FusionCharts может достигать 10000 долларов, что делает этот вариант жизнеспособным только для проектов с большим бюджетом и огромных объемов данных для отображения.
Инструменты Google Chart
Всего несколько универсальных инструментов Google
Google предлагает свою собственную библиотеку диаграмм в форме Google Chart Tools . Как и следовало ожидать от Google, диаграммы имеют интуитивно понятный, привычный вид и их так же легко настроить, как и просматривать и анализировать. Google Chart Tools отлично использует эффекты наведения мыши; при наведении указателя мыши на тип данных в легенде графика часто выделяется соответствующая часть диаграммы или графика. После того, как вы добавили необходимые фрагменты кода на свой веб-сайт, построение (или обновление) данных диаграммы так же просто, как и вставка разделенных запятыми текстовых значений, как вы можете видеть в этом примере кода, состоящем из потребления кусочков пиццы путем добавления:
// Create the data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Topping'); data.addColumn('number', 'Slices'); data.addRows([ ['Mushrooms', 3], ['Onions', 1], ['Olives', 1], ['Zucchini', 1], ['Pepperoni', 2] ]); Хотя ваши диаграммы будут полагаться на внешние файлы, эти файлы размещаются на надежных серверах Google, что сводит к минимуму ваши опасения по поводу сбоев или других технических проблем с вашими диаграммами.
Flot
Графики Флота просты, чисты и понятны
Flot уникален из приведенных выше библиотек диаграмм, потому что он разработан для JQuery, а не только для языка JavaScript. Это может сделать его лучшим выбором среди экспертов по JQuery, которые хотят подняться и пройти курс обучения как можно быстрее. Как и следовало ожидать от производства JQuery, Flot отлично справляется с интерактивными графиками. Вы можете сформировать перекрестие с осями «X» и «Y», которые следуют за курсором, а также вы можете использовать простые формы для включения и выключения данных на вашем графике или диаграмме. Для еще большей интерактивности вы можете экспортировать динамические графики в виде статических файлов изображений PNG или JPEG.
Вывод
Из всего вышеперечисленного можно надеяться, что есть хотя бы одна библиотека диаграмм, которая сделает ваш дизайн на основе данных красивым и практичным. Они варьируются от простых и бесплатных до мощных и дорогих. Освоение динамического инструмента построения диаграмм, вероятно, сэкономит много времени в долгосрочной перспективе, которое в противном случае было бы потрачено на внесение крошечных, утомительных исправлений в статические изображения.
Есть ли у вас какие-либо библиотеки графиков или инструменты построения графиков, которые можно порекомендовать? Или есть преимущества статических изображений, которые делают редакторы изображений лучшими инструментами для визуализации данных?