Автор оригинала: FreeCodeCamp Community Member.
Во-первых, краткая история:
С сбором данных и использованием продолжая увеличиваться экспоненциально, необходимость визуализации этих данных становится все более важным. Разработчики стремятся объединить миллионы записей базы данных на красивые графики и приборные панели, которые люди могут быстро и интуитивно интерпретировать.
Технология визуализации данных продолжала улучшаться за последнее десятилетие, и многие передовые библиотеки диаграмм теперь доступны для потребителей. В начале 2000-х годов генерация диаграммы преобладала графики растрового изображения Server Side Image. Плагины, такие как Flash и Silverlight, предложили более интерактивный опыт работы, но с тяжелым поступлением на скорость загрузки, сроком службы батареи и системными ресурсами.
Благодаря взрыву использования мобильных и таблеток плагины больше не поддерживали на основных платформах, и разработчикам пришлось перейти к открытию клиентских технологий, которые могут работать везде. В то же время появление очень высокого разрешения экранов и более распространенным масштабированием через сенсорные жесты принесли разрешение независимых векторных графиков на передний план.
Введите текущую эру визуализации данных, доминирующую JavaScript и SVG (масштабируемая векторная графика). Диаграммы теперь работают на всех браузерах, без специальных плагинов, поддерживают интерактивность и анимацию и выглядят резкими даже на самых высоких устройствах разрешения. Рассмотрение более 50 библиотек визуализации, эти 9 продуктов выделялись:
D3.js.
D3.js – очень обширная и мощная и мощная графическая библиотека JavaScript. Это позволяет связывать произвольные данные в модель объекта документа (DOM), а затем применить преобразования, приводвые данные к документу.
D3 выходит за пределы типичных библиотек Charting, включая многие другие меньшие технические модули, такие как оси, цвета, иерархии, контуры, ослабление, многоугольники и многое другое. Все это делает для крутой кривой обучения.
Попытка создать простой график может быть сложной. Все элементы, включая оси и другие элементы диаграммы, должны быть определены явно. Многие образцы показывают, как CSS может использоваться для элементов стиля диаграммы. Особенности на основе Charting находятся автоматически. Если вы хотите попасть в сорняки и использовать творчество, чтобы полностью контролировать каждый элемент, это лучший выбор. Работа против часов, чтобы удовлетворить требования проекта визуализации данных, это может быть не лучший выбор, начиная с нуля.
D3.js может быть строительным блоком для библиотеки графиков. Разработчики использовали D3, чтобы облегчить использование решений диаграммы, которые потребляют его, такие как NVD3.
D3.js – это открытый источник и бесплатный для использования.
Jscharting.
Библиотека диаграммы Jscharting поддерживает большое количество типов диаграмм, включая карты, ганту, акции и другие, которые часто требуют отдельных библиотек для использования. Он включает в себя встроенные карты всех стран мира и библиотеку иконок SVG. Набор автономных микроаппаратов Micro Charts может представлять в любых этикетках диаграммы или в любом элементе Div на странице. Управления пользовательскими интерфейсами (UIITEMS) также включены, обеспечивающие более богатые интерактивные диаграммы. Для управления данными или переменными визуализации в режиме реального времени просты, а диаграммы могут быть экспортированы в форматы SVG, PNG, PDF и JPG.
Галерея разделена на тип диаграммы и образцы функций. Стайлинг диаграммы полируется и дает некоторые чистые графики. Общие визуальные эффекты предоставляют чистый и профессиональный опыт графики.
Включенные образцы используют объект конфигурации для настройки диаграмм. Настройки для создания и контрольных типов диаграмм очень просты в использовании. Несколько параметров свойств необходимы для уточнения более сложных типов диаграмм и Jscharting имеет прочные и динамические значения по умолчанию, означающие, что он пытается автоматически выбрать лучшие настройки для сценариев.
Документация включает в себя много учебных пособий и подробных описания свойств API. Многие свойства включают пример использования и образец ссылок.
Jscharting бесплатный для некоммерческого и личного использования, а также предлагает коммерческие варианты лицензии, которые включают в себя все типы диаграмм и продукты за одну плату.
HighCharts.
HighCharts – популярный JavaScript Charting Library, используемая многими крупнейшими в мире компаниями. Диаграммы генерируются с использованием SVG и Foxback к VML для обратной совместимости, до того, как IE6/IE8. Демо-диаграммы демонстрируют довольно богатую функцию, но не видим визуально. Общая документация включает в себя учебники для многих соответствующих тем, и документация API тщательна.
График использует параметры конфигурации для создания диаграмм, а API прост в использовании.
HighCharts бесплатный для некоммерческого и личного использования. Требуется коммерческое лицензирование для других использований и склади, карты и графиков Gantt лицензированы отдельно.
amcharts.
AmCharts недавно выпустила свою версию 4, которая добавляет сильный анимационный двигатель SVG, который позволяет создавать кино-подобные сцены.
Демо-диаграммы выглядят очень приятно. Большинство демонстраций предлагают несколько палитров и ползунка UI для регулировки переменных диаграмм в режиме реального времени. Документация включает в себя много учебных пособий и подробных описания свойств API.
Создание диаграммы слегка отличается от подхода на основе конфигурации, а вместо этого используются более декларативный API. Для настройки диаграмм требуется немного больше кода, но дает лучший опыт завершения кода.
AmCharts предлагает бесплатную лицензию с фирменными графиками и оплаченными лицензиями для других использований.
Google Charts
Google Charts мощные и простые в использовании.
Образенные диаграммы выглядят чистыми и легко на глазах. Галерея и расширенная галерея показывает множество типов диаграмм, но нажатие меню Гамбургера показывает больше типов (например, календарь), которые не отображаются в этих списках галереи.
Каждый тип графика имеет выделенный учебник с живыми примерами. Учебники включают в себя код для связанных функций и списков API. Это приятный опыт работы с новой библиотекой диаграммы.
Диаграммы настроены с использованием объекта параметров конфигурации. Наборы данных заполнены с использованием класса DataTable, который можно потреблять всеми диаграммами. Каждый тип графика имеет уникальные параметры, перечисленные в конкретных учебных пособиях типа. Именование свойств стандартизировано, и многие варианты работают во всех типах.
Google Charts бесплатна, но есть предостережение. Это веб-сервис и не может быть проведен локально. В прошлом Google на пенсирован API, поэтому, если ваше использование является миссией, критично, вы можете выбрать другой вариант.
Zingchart.
Zingchart предлагает множество типов диаграмм и интегрирует с угловым, реагированным и другими каркасами. Он имеет сильную функцию, установленную со многими вариантами настройки.
Демо-диаграммы демонстрируют диапазон темы укладки, некоторые из которых выглядят лучше, чем другие, а варианты стиля их по мере необходимости. Демоны не демонстрируют все доступные типы диаграмм.
Документация включает в себя учебные пособия для всех доступных типов, хорошего количества функций и полноценного списка API.
ZingChart использует параметры конфигурации для настройки диаграмм. Образцы включают в себя множество параметров свойств, таких как Styling Font. Они могут получить на пути понять, какие настройки требуются для данного диаграммы.
Zingchart можно использовать бесплатно с брендом. Оплаченное лицензирование доступно для не фирменного использования.
Fusioncharts.
Fusioncharts существует уже много лет, начиная с плагином диаграммы на основе Flash. Это прочная библиотека визуализации диаграммы. Он поддерживает множество форматов данных, включая XML, JSON и JavaScript, работает в современных браузерах и поддерживается обратно к IE6. Многие JavaScript Frameworks и языки программирования на стороне сервера также поддерживаются.
Галерея диаграммы включает в себя большое количество примеров, и они имеют чистый визуальный внешний вид.
Документация включает в себя хорошие описания API и примеры каждого типа графика. Свойства конфигурации сгруппированы по задачам и диаграммам.
Диаграммы создаются с использованием параметров на основе конфигурации и относительно просты в использовании. Список свойств может быть длительным при более глубоком в API. Все свойства конфигурации являются мелкими, такими как {Chartleftmargin, ShowalternateHgridColor}. Похоже, попытка улучшить завершение кода.
Fusioncharts бесплатен для личного использования с брендией диаграммы. Оплаченное лицензирование доступно для непреднамеренного и коммерческого использования.
Koolchart.
KoolChart – это библиотека JavaScript Html 5 Canvas на основе холста. Также доступна сопоставление и продукт сетки.
Их новый выпуск V5 включает в себя более интерактивный набор функций и обновленный стиль. Визуальные эффекты чистые и современные. Использование холста предлагает лучшую производительность за счет расходов на основе растра.
Образцы используют XML на основе строки для применения параметров диаграммы, которые кажутся менее практичными, чем другие подходы. Эти параметры похожи на HTML5, но устанавливаются через строку JavaScript.
API хорошо задокументирован с примерными графиками для каждого свойства. Руководство по PDF 173 страницы также доступно.
Два месяца пробный период доступен для оценки. Лицензирование требуется после истечения пробного периода.
Chart.js.
Chart.js – это библиотека JavaScript с открытым исходным кодом, поддерживающая 8 типов диаграмм. Это небольшая библиотека JS всего за 60 кб. Типы включают линейные диаграммы, гистограммы, диаграммы площади, радар, круговые диаграммы, пузырь, рассеянные участки и смешанные. Временные серии также поддерживаются. Он использует элемент холста для рендеринга и отзывчивый на окно изменение размера для поддержания масштабированной детализации. Это обратно совместимо с IE9. Polyfills доступны для работы с IE7.
Образец визуальных визуалов довольно современные и включают начальную анимацию при первом рисовании. Он оживляет плавно при добавлении серии или точек данных в режиме реального времени. Параметры диаграммы могут быть изменены после и вызова функции обновления () RedRaws график.
Исходный код образца не отображается Галерея сайта, но доступна в REPO GitHub. Параметры конфигурации используются для создания и изменения диаграмм. Параметры API чистые и интуитивно понятные.
Документация основана на тщательстве и включает в себя учебные пособия с API свойств и фрагментами кода.
Chart.js – это библиотека с открытым исходным кодом и бесплатным для использования для личного и коммерческого использования, которое является плюсом. Ограниченное количество типов может быть проблемой для более современных требований приборной панели.
Вывод
Экосистема библиотек DamaScript Charting значительно развивалась за последнее десятилетие. Сегодня существует большое количество продуктов Charting, которые соответствуют очень разнообразным требованиям, обслуживая широкий спектр проектов, хотя и сотни типов диаграмм. Большинство библиотек предоставляют бесплатную пробную или фирменную версию, позволяющую вам оценить эффективность диаграммы с вашими собственными данными, загрузкой и сложностью проекта.
Из большинства библиотек Chart простым справиться с простыми искушенными наборами данных и статическими визуализациями. Тем не менее, диаграммы могут не всегда справляться с вещами, когда реальный, динамические данные визуализируются. Для настраивания и устранения элементов могут потребоваться дополнительная работа, чтобы отображаться правильные диаграммы, и это руководство в настройке может нарушать, поскольку новые динамические данные визуализируются.
Чтобы выбрать лучшее решение JS Chart для ваших уникальных потребностей, я рекомендую тестировать свои собственные данные против нескольких библиотек, перечисленных выше, чтобы обеспечить идеальную подгонку для ваших текущих и будущих проектов.