Год работы над Chart.js

Привет! Наконец-то я получил средний аккаунт! Я надеюсь, что это станет хорошим началом для большего вклада в сообщество разработчиков открытого исходного кода, которое я люблю. У меня сейчас не так много времени, чтобы углубляться в эту тему, поэтому я подумал, что начну с некоторых быстрых мыслей о Chart.js и прошедшем году +, над которым я работал. Я уверен, что со временем мои небрежные письма утихнут, поскольку у меня будет больше времени для написания. А пока это…

Итак, давайте поговорим о визуализации данных.

Если сопоставить его с натиском новых интерфейсных фреймворков, библиотек управления состоянием и других ежедневно появляющихся технологий javascript, в прошлом году он показался мне камнем преткновения. Я ни в коем случае не эксперт, но я чувствую, что по крайней мере каждый день в той или иной форме или моде. Пытаюсь ли я использовать d3 или пробую другую хорошо известную библиотеку построения графиков, технический ландшафт не изменился почти так же сильно, как мой фреймворк SPA, и не приблизился к количеству итераций для моей системы сборки javascript!

Год назад я был по-настоящему взволнован одной из этих графических библиотек больше, чем любой другой. Он называется Chart.js, и именно он помог мне окунуться в мир открытого исходного кода.

SV-Geez… Куда делись мои 60 кадров в секунду ?!

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

Введите HTML Canvas.

Скорость Canvas невероятна. Есть так много статей, объясняющих почему, поэтому я не собираюсь останавливаться на достигнутом, но это БЫСТРО. Настолько быстро, что разработчики игр используют его для создания полностью закрашенной трехмерной графики для игр. Нет ничего удивительного в том, что, если на холсте можно получить такую ​​потрясающую графику, то рисование тонны 2-мерных диаграмм в масляной форме с частотой 60 кадров в секунду будет проще простого. И это именно то, что делает Chart.js.

Chart.js 1.0

Выглядело отлично из коробки. Требовался поразительно простой подход к тому, какие диаграммы были доступны. Не было необходимости изучать d3, и он был чрезвычайно легким. Он не мог делать все, что вы хотели, но он мог делать несколько вещей очень хорошо. Когда я увидел эти сильные стороны и то, что они помогли мне достичь 80% всех моих потребностей в датависах в то время, я ухватился за это, как конфету.

Способствовать или не вносить

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

К счастью, я нашел несколько человек, которые разделяли мою страсть к тому, чем может стать Chart.js, в том числе и первоначальный автор, который был очень взволнован изменениями, о которых мы начали говорить год назад. Эверт Тимберг (@etimberg на github) подошел ко мне, и мы начали работу над 2.0. Я понятия не имел, к чему это приведет, но мне нужны были новые функции, и они были нужны мне как можно скорее.

Chart.js 2.0

Я помню, как опубликовал в репозитории ветку 2.0-dev и в течение следующих нескольких недель полностью удалил и переписал модуль анимации внутри. Эверт начал писать новые гаммы, и дело пошло. Мы запустили Slack-канал Chart.js и начали приглашать других пользователей присоединиться к делу. В совокупности за следующие 5 месяцев нам удалось отсортировать более 800 проблем и 200 запросов на вытягивание. Я заставил себя изучить API Canvas и начал понимать, почему работа с Canvas может быть мечтой и кошмаром;)

Было захватывающе видеть, как что-то движется и, наконец, начинает действовать. В конце концов мы переместили все в новую Организацию Chart.js, добавили поддержку смешивания типов диаграмм, глобальную анимацию, автоматические настройки по умолчанию и исключительную расширяемость. Мы даже написали интеллектуальный механизм обновления, не требующий использования сложного API. Вместо этого вы просто обновляете свои данные и параметры, а затем вызываете один метод для обновления всей диаграммы. Это было почти похоже на обман. Мы все еще активно пишем новые плагины и типы диаграмм. Пока мы говорим, в моем браузере открыт предварительный просмотр плагина Evert для масштабирования / панорамирования, и с ним так весело играть!

Время летит

Спустя более 300 коммитов я рад сообщить, что наконец-то выпущен Chart.js 2.0. Это было давно, и я действительно надеюсь, что это продолжит подталкивать людей к мысли вне DOM. Canvas может показаться пугающим, но структура, которую мы создали на основе Chart.js, позволяет легко писать новые типы диаграмм и расширять их с помощью новых потрясающих функций.

Мораль истории: D3 - не единственный инструмент для выполнения работы, и есть абсолютно бесплатная библиотека диаграмм с открытым исходным кодом, которую вы можете использовать прямо сейчас. Этому уделяется много внимания, и теперь сотни людей в восторге от возможностей библиотеки. Попробуйте и дайте нам знать, что вы думаете!