Топ 3 Библиотеки для Создания Графиков в JavaScript

Статья 1

 

Ведущую роль схем и таблиц в нашем аналитическом проекте точно следует подчеркнуть, поскольку они как нельзя лучше визуализируют статистические данные. В этой серии публикаций, мы предоставим вам практические, прикладные таблицы и схемы для обработки трех сервисов путем их сравнения: Google charts, Charts.js и FusionCharts && FusionExport. После прочтения, вы сможете определить случаи применения и оценить каждый программный продукт для того, чтобы выбрать оптимальный для своего проекта!

 

Сервисы FusionCharts && FusionExport && FusionTime

Преимущества

Разнообразие

FusionCharts API предоставляет пользователям широкий спектр типов схем и таблиц, каждую с красивой анимацией и привлекательными стандартными цветовыми решениями. От водопада, пончика, батончика, различных сочетаний 2-х и 3-х мерных до логарифмических, воронкообразных и других необычных таблиц и схем – все они обладают своим предполагаемым списком свойств для их адаптации всевозможными способами: ярлыки, оси, перекрывающие линии трендов, размеры шрифтов, границы, тени, цветовая палитра и даже длительность анимации.

 

 

Более того, в дополнение к более чем 100 типам таблиц и схем с 4 разными стилями тем (по моему скромному мнению, лучшей является ‘fusion’), существует более 2 тысяч карт, основанных на анализе данных. Документы практически переполнены разнообразием, поэтому они точно удовлетворят даже самого требовательного пользователя и оправдают любые ожидания.

 

Интеграции

 

Наиболее сложным заданием и, в то же время, наиболее важным является правильное формирование configs на сервере: работа с ответами на внешние запросы и конверсия с тем, чтобы отображение было правильным может оказаться трудным и длительным процессом (формирование массивов данных, наборов данных, ярлыков, условных обозначений, а также категорий). На следующем, более высоком уровне, пользователи обнаруживают большой список возможностей того, как таблица или схема будет отражена с помощью интеграции внешнего интерфейса. Фактически, config можно легко конвертировать в готовый компонент с помощью JavaScript (React, React-native, Angular (из последней версии FusionCharts – 3.14.0), Vue.js, Ember, jQuery также поддерживается). Их также можно реализовать через прикрепляемые пакеты NPM (React, React-native, Angular), или даже напрямую, если вы добавите файл со скриптом fusioncharts js и вызовете функцию с получением config в div скрипте (кроме того, проверьте подпапку событий (events), где вы найдете больше справочной информации).

 

Кроме вышеупомянутого способа динамического создания таблиц и схем, существует сервис FusionExport, который обеспечивает статическую картинку со схемой или таблицей, позволяет создать и загрузить заменяющие большинство npm пакетов веб скриншотами. Этот сервис выполняет процессы передачи HTML и создания веб скриншота схемы или таблицы на своей стороне, при этом сохраняя файл png в папке временных (tmp) документов.

Панель управления

 

Несомненно, панели управления являются одним из лучших способов сравнения сложных статистических данных, и FusionCharts достигло прекрасных результатов в этом вопросе. Если вы взглянете на их страницу демо, то мысленно унесетесь в сервис Google Data Studio (далее GTS), который предлагает намного более широкий и сложный функционал (к примеру, добавление источников данных, онлайн редактор для индивидуальной адаптации, связь с облачными сервисами и т.д.). С нашей точки зрения, вопросы, по которым FusionCharts лидирует в сравнении с GDS, точно включают разнообразие типов схем и таблиц, смарт-стили и возможность создавать, показывать и сохранять их в формате png. Последнее называется инфографикой – простая реализация панели управления: встроенная колонка 2+ таблицы/схемы.

Поддержка

 

В сравнении с другими средствами онлайн поддержки для открытых библиотек и интерфейсов API, FusionCharts обладают по-настоящему безупречной живой поддержкой в режиме чата, который можно открыть, щелкнув на значок справа на экране вебсайта. Учитывая долгосрочное использование этого сервиса, наша команда знает, что всегда получает конструктивные ответы со ссылками на целевые ресурсы в течение не более чем 2-3 минут, что удовлетворяет требованиям в 99% случаев.

 

 

Далее, большинство их таблиц и схем размещены в живых примерах JSFiddle (ими могут поделиться в службе поддержки, прямо в документах или легко находятся в поиске по запросу с ключевыми словами “fusion charts multi-series fiddle”), поэтому у вас есть прекрасная возможность поработать со свойствами и параметрами таблиц и схем.

 

Недостатки

 

Цена

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

Загрузив и протестировав бесплатный сервис FusionExport, вы увидите два больших уведомления о пробном периоде, которые, по сути, отрицательно отражаются на восприятии изображения. Более того, без виджетов Fusion и PowerCharts определенный тип таблиц/схем (древовидный, клиновой и другие.) не передаются и подлежат съемке скриншотами со своей стороны. Не думаете ли вы, что пора купить лицензию? Но самая недорогая версия стоит приблизительно $500. Не слишком ли это много? Плата может доходить до $10,000, в зависимости от наполнения пакета. Это может быть слишком дорого для разрабатываемого вами проекта или университетских проектов, даже несмотря на то, что вы делаете несколько запросов в их API каждый день. Мы склонны думать, что куда предпочтительнее найти, если есть, более простую и не такую дорогую альтернативу, чтобы любой человек мог интегрировать этот сервис в свой проект, соответственно, делая проекты Fusion намного более популярными среди аудитории.

 

 

Документация

 

Хотя разработчики FusionCharts и приложили все свои усилия к тому, чтобы категорировать и детализировать их для каждой таблицы/схемы, сегодня бывает сложно найти необходимый параметр во всех табличных подкатегориях, поскольку их названия запутывают пользователя. Несмотря на то, что свойства имеют свои логические названия, раскрывать каждую подкатегорию, с которой параметр может потенциально быть связан, монотонно и неинтересно. Идеальным решением стало добавление поисковика, который работает напрямую на открытой странице, но к сожалению, его, кажется, не замечают. Мы предполагаем, что многие читатели документов в FusionCharts API не замечают этот значок и поэтому используют поиск по странице с помощью Ctrl+F, который не срабатывает. Качественно изменить ситуацию можно, если команда Fusion добавит красивый ободок или помощь во избежание указанных вишу случаев.

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

FusionTime и FusionExport

 

Существует еще один сервис от разработчиков Fusion под названием FusionTime. Его используют для показа временных рядов данных и он похож на то, когда таблица Google спрашивает у вас цену (“Apple price”). Тут есть имеется даже возможность переключения на предыдущий период. Их единственным недостатком является отсутствие поддержки FusionExport, хотя в документации сказано, что она есть. Надеемся, что этот вопрос будет решен в будущих версиях.

Зависимость FusionExport OS

 

Один из наших разработчиков столкнулся с интересной проблемой в апреле 2019 года, пока использовал FusionExport, лицензированный сервис в ОС Windows. Клонировав проект Github, который работает удаленно на машине Linux, разработчик тестировал создание статических изображений при правильной config. Неожиданно возникла ошибка: черный фон с серым текстовым сообщением “отсутствуют данные для показа”. Другие варианты параметров для вызова экземпляра класса / функции послужили причиной этой проблемы: как только избавились от одного из них – таблицы начали экспортироваться без сбоев. Однако, тот же код на MacOS также работал хорошо, как и Linux. Надеюсь, что эта ошибка в ОС Windows была устранена в более поздних версиях (последняя вышла в августе 2019 года), но из-за переключения на ОС Linux, ее не тестировали на нашей стороне.

 

Вывод

 

Основываясь на нашем опыте использования сервисов Fusion, можно действительно рекомендовать их, поскольку указанные сервисы отвечают всем ожиданиям и удовлетворяют потребности проектов, ориентированных на статистику, если вы их можете позволить себе по бюджету. Конечно, пока существуют определенные недостатки на момент написания этой статьи (сентябрь 2019 года), но мы надеемся, что они будут исправлены и доработаны.