15 лучших JavaScript-библиотек для построения диаграмм и сводных таблиц

Original author: Fazle Rahman
  • Translation
Практически невозможно представить себе информационную панель без диаграмм и графиков. Они быстро и эффективно отображают сложные статистические данные. Более того, хорошая диаграмма также улучшает общий дизайн вашего сайта.

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

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


D3.js – документы, ориентированные на данные



Сегодня, когда мы задумываемся о графиках, то первое, что приходит в голову – это D3.js Являясь open source проектом, D3.js, вне всякого сомнения, дарит много полезных возможностей, которых не хватает большинству существующих библиотек. Такие возможности как “Enter and Exit”, мощные переходы, и синтаксис, схожий с jQuery или Prototype, делают его одной из лучших JavaScript библиотек для создания графиков и диаграмм. В D3.js они генерируются посредством HTML, SVG и CSS.

В отличие от многих других JavaScript библиотек, D3.js не поставляется с заранее созданными графиками прямо из коробки. Однако вы можете взглянуть на перечень графиков, созданных на D3.js, чтобы получить общее представление.

D3.js не работает должным образом со старыми браузерами, такими как IE8. Но вы всегда можете применить такие плагины как aight plugin для кроссбраузерной совместимости.

D3.js ранее широко использовался на таких вебсайтах как NYTimes, Uber и Weather.com

Google Charts



Google Charts – JavaScript библиотека, которую я регулярно использую для простого и лёгкого создания графиков. Предоставляет множество предварительно созданных диаграмм, таких как комбинированные гистограммы, столбчатые диаграммы, календарные графики, секторные диаграммы, гео схемы, и др.

В Google charts также имеется множество конфигурационных настроек, которые помогают изменить внешний вид графика. Графики формируются с помощью HTML5/SVG добы обеспечить кроссбраузерную совместимость и кроссплатформенную портируемость на IPhone, IPad и Android. Также содержит VML для поддержки старых IE версий.

Вот замечательный список с примерами, построенными на Google charts.

ChartJS



ChartJS наделяет графики красивым плоским дизайном. Он использует HTML5 canvas для рендеринга. Поддержка для старых браузеров, таких как IE7/8, добавляется с помощью полифилла.

Графики ChartJS отзывчивы по умолчанию. Они отлично работают на мобильных устройствах и планшетах. Благодаря 6 основным разновидностям графиков прямо из коробки (core, столбчатый, кольцевой, лепестковый, линейчатый и полярный), ChartJS определённо является одной из наиболее впечатляющих open source библиотек для построения графиков и диаграмм, за последнее время.

Chartlist.js



Chartlist.js предоставляет красивые отзывчивые графики. Также как и ChartJS, Chartlist.js является результатом труда сообщества, которое разочаровалось в дорогих диаграммных библиотеках JavaScript. Он использует SVG для рендеринга графиков/схем. Может управляться и конфигурироваться посредством CSS3 media queries и Sass. Также, примите к сведению, что замечательная анимация, предоставляемая Chartlist.js, будет работать только в современных браузерах.

n3-charts



Если Вы – AngularJS разработчик, то n3-charts определённо вам покажется необычайно полезным и интересным. n3-charts создан поверх D3.js и AngularJS. Он предоставляет множество стандартных графиков в виде настраиваемых AngularJS директив.
Ознакомьтесь с перечнем графиков, созданных с помощью на n3-charts.

Ember Charts



EmberCharts – ещё один великолепный open source репозиторий, построенный на D3.js и Ember.js Предоставляет легко настраиваемые графики временного ряда, гистограммы, секторные диаграммы и диаграммы рассеяния. Использует SVG для рендеринга графиков.

Smoothie Charts



Если вы имеете дело с потоком данных в реальном времени, то вам может пригодиться Smoothie Charts. Для рендеринга графика здесь используется элемент HTML5 canvas. Это библиотека на чистом JavaScript, которая предоставляет такие опциональные возможности для графиков реального времени как задержка и вспышка цвета.

Chartkick



Chartkick – JavaScript библиотека для построения графиков/схем в Ruby приложениях. Предоставляет все основные типы диаграмм, такие как секторная, столбчатая, гистограмма, комбинированная гистограмма, гео, временная и диаграмма кратного ряда. Диаграммы генерируются через SVG.

MeteorCharts



Вы ещё не пробовали работать с Meteor v 1.0? Ладно, MeteorCharts поможет вам в создании красивых диаграмм для Meteor приложений. Для рендеринга графиков предоставляется возможность выбора любой из этих технологий: HTML5 canvas, WebGL, SVG и даже DOM.
Это замечательный генератор графиков, который позволяет вам выбрать его тип, тему, а затем выполнить генерацию. Бесплатен для использования в некоммерческих проектах. Подсчитать стоимость коммерческой лицензии можно здесь.

Highcharts JS



Highcharts JS – ещё одна весьма популярная библиотека для построения графиков. Комплектуется большим количеством анимации разнообразного типа, способной привлечь множество внимания к вашему сайту. Как и другие библиотеки, HighchartsJS содержит множество предварительно созданных диаграмм: сплайновых, фигурных, комбинированных, столбчатых, гистограмм, круговых, точечных и пр.

Одно из самых больших преимуществ применения HighchartsJS – совместимость со старыми браузерами, такими как Internet Explorer 6. Стандартные браузеры используют SVG для рендеринга графиков. В устаревшем IE графики строятся через VML.

Хотя HighchartsJS и бесплатен для персонального использования, вам необходимо приобрести лицензию для коммерческого применения.

Fusioncharts



Fusioncharts – одна из наиболее старых JavaScript библиотек, которая была впервые выпущена в 2002 году. Графики генерируются посредством HTML5/SVG и VML для лучшей портируемости и совместимости.

В отличие от множества библиотек, Fusioncharts предоставляет возможность парсинга как JSON данных, так и XML. Вы также можете экспортировать эти графики в 3 разных формата: PNG, JPG и PDF.

Fusioncharts хорошо совместим со старыми браузерами, такими как IE6. И по этой причине он стал одной из наиболее предпочитаемых библиотек во множестве торговых организаций.

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

Flot



Flot – JavaScript библиотека для JQuery, позволяющая создавать графики/диаграммы. Одна из старейших и наиболее популярных диаграммных библиотек.

Flot поддерживает линейчатые, точечные, гистограммы, столбчатые и любые комбинации из этих видов диаграмм. Также совместим со старыми браузерами, такими как IE 6 и Firefox 2.

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

amCharts



amCharts, несомненно, одна из наиболее красивых диаграммных библиотек. Она в полной мере разделилась на 3 независимых вида: JavaScript Charts, Maps Charts (amMaps) и Stock charts.

amMaps – мой любимый из этих трёх, что указаны выше. Предоставляет такие возможности, как теплокарты, рисование линий, добавление текста на карту, загрузка иконок или фотографий в верхнюю часть вашей карты, изменение масштаба и пр.
amCharts использует SVG для рендеринга графиков который работает только в современных браузерах. Графики могут не правильно отображаться в IE ниже 9й версии.

Ознакомьтесь с этой фантастической коллекцией замечательных демок, созданных на amCharts.

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

EJSChart



EJS Chart заявляют о своём практичном решении для предприятий. Графики выглядят аккуратней и читабельней чем большинство других из более старых библиотек. Также имеется совместимость с IE6+ и другими старыми браузерами. Ознакомьтесь с этим списком примеров.

EJS Chart предоставляется в бесплатной и платной версиях. Бесплатная версия имеет ограничение, не позволяющее вам использовать более 1 графика на странице и более двух (числовых) последовательностей на графике. Ознакомьтесь с ценовыми подробностями здесь.

uvCharts



uvCharts – JavaScript библиотека с открытым исходным кодом, заявляется о наличии более 100 конфигурационных опций. У неё имеются графики 12 различных стандартов прямо из коробки.

uvCharts построен на D3.js библиотеке. Этот проект обещает устранить все сложные нюансы кодинга D3.js и обеспечить лёгкую реализацию графиков стандартного вида. uvCharts генерируется посредством SVG, HTML и CSS.

Заключение


Теперь выбор наилучшей диаграммной библиотеки для своих будущих проектов остаётся только за вами. Разработчики, которым нужен полный контроль над графиками, определённо выберут D3.js Практически все вышеуказанные библиотеки обзавелись хорошей поддержкой на форумах Stackoverflow.

Если вы ищите инструменты для генерации уже готовых графиков, то перейдите к статье 5 Инструментов Для Создания Удивительных Онлайн Графиков. Вы также можете прочесть Создание Простых Линейных и Столбчатых Диаграмм с Помощью D3.js, для того чтобы начать знакомство с D3.js. Также у нас есть выпуски, посвящённые GoogleCharts с AngularJS.

Надеюсь вам понравилась эта статья. Хорошего дня.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 17

    +7
    Тут важный вопросы — зачем вам графики. Как человек который уже полгода приделываю графики к приложению могу заметить что есть два основных use-case'a:
    1. Когда график надо просто показать.
    2. Когда график надо изменять в реалтайме.

    И вот для второго варианта нужны т.н. Reusable Charts. И лучшая бесплатная библиотека (imho) которая это реализует — c3.js (она сделана на базе d3.js о ней не так давно говорили на RadioJS).

    А если просто показать… ну тут уже действительно выбираешь что ближе…
      0
      c3 по моему еще очень молода — там у них по документации на сайте голяк на треть еще. Полгода назад искал либу для графиков, натыкался на них, на тот момент документация на половину была пуста.
        0
        Да, я тоже полгода назад смотрел — и отказался. А сейчас посмотрел и перешел на нее.
        Документация действительно не вся заполнена, хотя API работает все. И поддержка шустрая. Примеры очень полные, комбинации дают богатые возможности (где-то 5\6 от amCharts) и судя по звездочкам и ишьюсам ее сейчас много кто использует (а значит баги всплывают\закрывают часто).
        До этого сидел на d4 — хорошая штука. Но не Reusable, и разработчик (хоть и классный парень) но довольно сильно занят(
          +1
          И важный момент, что она очень легко расширяется и если чего-то нет в API добавить новый метод — обычно 2-3 строчки. Например изначально нет возможности сбросить максимальные и минимальные значения для axis'ов, но это легко дополняется:
          //Range
          c3.chart.fn.axis.reset_range = function () {
              this.axis.max(undefined);
              this.axis.min(undefined);
          };
          
          0
          Недавно стояла задача отобразить большое количество данных на графиках. В кратце, нужно было отобразить столбики которые являются стеком других данных. Данных иногда так много было, либо разброс между высотой данных в стеке велик, что некоторым в стеке приходилось делить пиксель.

          C3.JS с задачей не справилась, начала задыхаться. Иногда даже цвета неправильно отображала. Пришлось переписать на Highcharts.js, которая корректно отобразила данные. Но, правда работала чуток медленней.
          +1
          JSXGraph еще одна хорошая библиотека. Особенно для отображения в локальных html страницах.
            0
            Стоит упоминания еще и jqplot Сам не использовал, но возможности впечатляют. Рендер на canvas.

            В статье же не хватает информации о минусах данных библиотек.
            Например, так как я активно использую flot могу сказать, что очень напрягает отсутствие рендера легенды на канве, а так же подписей секторов на круговых диаграммах, что делает проблематичным экспорт диаграмм в изображение. Так же существует серьезная проблема с казалось бы базовой фичей библиотек для рисования диаграмм — подписью значений столбцов, точек на графиках и тп. Существующий плагин valuelabels написан криво и, вместо того чтобы переписать его нормально, его кучу раз форкают исправляя у себя только часть его багов без обратных pull-реквестов.
              0
              Использовал пару лет назад. Неплохая либа.
              +1
              MeteorCharts выдаёт ошибку 403. Хабраэффект? :-)

              Вот и проверили Meteor на устойчивость к нагрузкам.
                0
                Вообще-то Апач (-:
                +1
                Вот еще замечательное сравнение 35 библиотек для рисования графиков в JS.
                  0
                  А есть что-то крутое для отображения графов? Типа такого.
                  0
                  «и сводных таблиц»
                    –1
                    Спасибо! Статья пригодилась.
                      0
                      Вдруг кто подскажет — каким из перечисленных инструментов наиболее оптимально будет не только создавать графики, подобные этому, но и анимировать их? Анимация требуется довольно простая — за некое время постепенно показывать все точки, начиная например с самой нижней и постепенно показывая все точки до верха.

                      Only users with full accounts can post comments. Log in, please.