Лучшие инструменты для создания графиков и диаграмм

Сокращенный перевод статьи «19 Online Tools for Creating Charts».

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

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

В этой статье вы найдете список отличных библиотек для создания графиков. (Ранее мы уже публиковали статьи со списками популярных библиотек для визуализации данных (см. здесь и здесь). Чтобы не повторяться, в этой статье мы оставили только те, о которых еще не писали. — Прим. ред).

Chartist-js

  • Звезд на GitHub: 11660
  • Лицензия: MIT
  • Цена: бесплатно
  • Основные зависимости: не имеет зависимостей
  • Сайт: http://gionkunz.github.io/chartist-js/

Chartist это очень современная библиотека на основе SVG. Ее самое большое преимущество — SVG-анимации в графиках.

Библиотека очень проста в имплементации. Буквально за считанные минуты вы можете создать невероятно впечатляющие диаграммы, которые будут легко взаимодействовать с любым источником данных в бэкенде. Chartist легко настраивать, а также кастомизировать при помощи Sass.

Эта библиотека имеет только 8 основных типов графиков, с которыми, впрочем, можно импровизировать. Все графики полностью отзывчивые, но при этом не имеют выдающихся эффектов переходов, как в других библиотеках.

Библиотека визуализации Chartist имеет открытый исходный код, ее можно модифицировать, распространять и использовать. На GitHub можно сделать форк библиотеки.

Chartist предлагает обширную документацию, включающую подробные инструкции по установке библиотеки. Установить библиотеку можно при помощи Bower, NPM, jsDelivr ну и, конечно, можно просто скачать исходный код из репозитория.

Chartist это очень мощная библиотека графиков, но разработчику придется приложить некоторые усилия, чтобы все выглядело, как задумано.

C3.js

  • Звезд на GitHub: 8445
  • Лицензия: Open-source
  • Цена: бесплатно
  • Основные зависимости: D3.js
  • Сайт: https://c3js.org/

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

Стоит отметить, что библиотека C3.js имеет хорошую документацию, в том числе руководство с инструкциями по настройке для вашего проекта. Благодаря этому разобраться с библиотекой будет просто.

Plotly

  • Звезд на GitHub: 10520
  • Лицензия: Open-source
  • Цена: бесплатно, кроме корпоративного использования
  • Основные зависимости: D3.js, Stack.gl
  • Сайт: https://plot.ly/

Plotly — одна из самых широко применяемых библиотек. Это богатая библиотека с выдающейся документацией, включающей руководство по каждому типу графиков. Создана эта библиотека на базе D3.js и stack.gl.

Всего Plotly.js поддерживает 20 видов графиков, включая SVG-карты, 3D-диаграммы и статистические графики. Все они выглядят очень профессионально. Для создания графика нужно только загрузить вашу информацию и кастомизировать макет, линии координат, примечания и легенду.

NVD3

  • Звезд на GitHub: 6910
  • Лицензия: Apache 2.0
  • Цена: бесплатно, кроме корпоративного использования
  • Основные зависимости: D3.js
  • Сайт: http://nvd3.org/

NVD3 также входит в список самых популярных библиотек. Как и многие другие, она построена на базе D3.js, т. е., имеет хорошую техническую основу.

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

По сравнению с другими библиотеками в этом списке NVD3 кажется маленькой. Она предлагает не так много графиков, хотя все основные виды присутствуют.

DyGraphs

  • Звезд на GitHub: 2646
  • Лицензия: Open-source
  • Цена: бесплатно для всех пользователей
  • Основные зависимости: –
  • Сайт: http://dygraphs.com/

DyGraphs это быстрая и гибкая JavaScript-библиотека для создания графиков. Имеет открытый исходный код. Библиотека очень настраиваемая, работает во всех основных браузерах (включая IE8) и имеет активное сообщество.

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

DyGraphs хорошо подходит для больших и сложных наборов данных.

Sigma charts

  • Звезд на GitHub: 86330
  • Лицензия: Open-source
  • Цена: бесплатно для всех пользователей
  • Основные зависимости: не имеет зависимостей
  • Сайт: http://sigmajs.org

Sigma.js создана на Canvas и WebGL. Имеет публичный API, охватывающий широкий спектр плагинов, предоставленных сообществом GitHub. Sigma полностью отзывчива и отличается сенсорной интерактивностью. Это позволяет разработчикам напрямую добавлять в сценарии собственные функции и отображать узлы и ребра в точном соответствии со спецификациями.

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

Подходит для разработчиков, которым нужен мощный инструмент для отрисовки графиков.

Morris

  • Звезд на GitHub: 6930
  • Лицензия: Open-source
  • Цена: бесплатно для всех пользователей
  • Основные зависимости: jQuery
  • Сайт: http://morrisjs.github.io/morris.js/

Библиотека графиков Morris.js тоже довольно популярна. Она применяется во многих шаблонах администрирования, как в бесплатных, так и в премиальных. Графики, используемые в Morris, фокусируются на простоте и эффективности.

Всего в этой библиотеке 4 вида диаграмм: линейные, столбчатые, площадные и круговые (пончиковые).

Cytoscape

  • Звезд на GitHub: 5857
  • Лицензия: Open-source
  • Цена: бесплатно для всех пользователей
  • Основные зависимости: не имеет зависимостей
  • Сайт: http://js.cytoscape.org/

Cytoscape.js это библиотека теории графов, написанная на JS. Ее можно использовать для анализа и визуализации графиков.

Cytoscape.js позволяет с легкостью отображать красивые и интерактивные графики, а также манипулировать ними.

В Cytoscape.js также есть анализ данных. Библиотека имеет много полезных функций, связанных с теорией графов. Вы можете использовать ее на Node.js для анализа графов в терминале или на веб-сервере.

Rickshaw от Shutterstock

  • Звезд на GitHub: 6360
  • Лицензия: MIT
  • Цена: бесплатно для всех пользователей
  • Основные зависимости: D3.js, jQuery, jsdom
  • Сайт: https://tech.shutterstock.com/rickshaw/

Rickshaw это набор инструментов JavaScript для создания интерактивных временных графиков.

В основе этих инструментов лежит d3, так что графики отрисовываются при помощи SVG и стилизуются при помощи CSS. Вы можете все кастомизировать по своему вкусу, применяя уже известные вам подходы.

CanvasJS

  • Звезд на GitHub: –
  • Лицензия: платная. Бесплатные лицензии для студентов и для некоммерческого использования.
  • Цена: от $149 до $4999
  • Основные зависимости: –
  • Сайт: https://canvasjs.com/

CanvasJS это отзывчивая библиотека HTML5-графиков с очень высокой производительностью и простым API. Она поддерживает 30 разных видов графиков и диаграмм (включая линейные, столбчатые, площадные, круговые (пирожковые и пончиковые) и пр.). все они имеют хорошую документацию.

Все графики обладают интерактивными функциями, такими как всплывающие подсказки, масштабирование, панорамирование, анимация и т. д. CanvasJS можно интегрировать с популярными фреймворками (Angular, React и jQuery), а также с бэкенд-технологиями (PHP, Ruby, Python, ASP.Net, Node.JS, Java).

RAWgraphs

  • Звезд на GitHub: 6124
  • Лицензия: Apache 2.0
  • Цена: бесплатно
  • Основные зависимости: d3.js
  • Сайт: https://rawgraphs.io/

RAWGraphs это открытый веб-инструмент для создания пользовательских векторных визуализаций на базе библиотеки d3.js.

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

Taucharts

  • Звезд на GitHub: 1799
  • Лицензия: Apache 2.0
  • Цена: бесплатно
  • Основные зависимости: d3.js
  • Сайт: https://taucharts.com/

TauCharts это одна из самых гибких JavaScript-библиотек для создания графиков в нашем списке. Она также основана на D3. Эта библиотека позволяет создавать улучшенную визуализацию данных. Предоставляет декларативный интерфейс для быстрого сопоставления полей данных с визуальными свойствами. Архитектура этой библиотеки позволяет разработчику создавать фасеты и расширять поведение графиков при помощи плагинов, пригодных для повторного использования.

Anychart

  • Звезд на GitHub: –
  • Лицензия: платная для коммерческого использования
  • Цена: от $49 до $799, бесплатно для некоммерческого использования
  • Основные зависимости: –
  • Сайт: https://www.anychart.com/

AnyChart это надежная, легковесная и богатая функционалом библиотека графиков с рендерингом в SVG/VML. Она предоставляет разработчику отличную возможность создавать различные графики, помогающие проводить анализ данных и принимать решения на основе данных.

К основным особенностям библиотеки можно отнести:

  • наличие больше 80 видов JS-графиков,
  • много способов задать набор данных (XML, JSON, CSV, JS API, Google Sheets, HTML-таблицы),
  • возможность интеграции с Angular, Qlik, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS.

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

Заключение

Нам всем очень часто приходится реализовывать графики в своих проектах, поэтому не удивительно, что выбор соответствующих библиотек с открытым исходным кодом столь велик.

Все упомянутые в нашем списке библиотеки имеют очень хорошую браузерную совместимость.

Чтобы выбрать наиболее подходящий для вашего проекта вариант, имеет смысл протестировать несколько библиотек, причем использовать для этого свои данные.

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх