Недавно я завершил проект кодирования веб-разработки с тремя другими членами команды.
Одним из критериев завершения проекта был выбор новой технологии и ее реализация в приложении. Мы выбрали Chart.js. Что-то мне нравилось, что-то не нравилось, и некоторые уроки были извлечены при внедрении диаграммы на нашу веб-страницу. Давайте углубимся.
Цель нашего приложения состояла в том, чтобы создать средство отслеживания инвестиций, которое действовало бы как универсальный магазин, когда дело доходило до получения данных об акциях. Одной из ключевых функций приложения была диаграмма, которая динамически создавалась на основе количества точек данных, возвращенных после вызова API. Конкретный API, который мы использовали для диаграммы, предоставил нам исторические данные по любой акции, которую пользователь ищет на нашем веб-сайте.
Chart.js в своей базовой форме — это фантастический способ визуализации ваших данных. Раздел «Начало работы» их документации очень удобен для пользователя. Шаги довольно просты, даже если у вас есть только базовые представления о веб-разработке. Сначала вам нужно включить элемент «canvas» в ваш HTML-файл (предпочтительно завернутый в собственный контейнер «div» для лучшей отзывчивости). Затем вам нужно включить тег script в свой HTML-файл, который ссылается на CDN Chart.js. Затем вы захотите включить объекты данных и массивы, которые фактически создадут и отобразят диаграмму. Для этого шага вам сначала нужно создать массив, в котором будут перечислены все ваши метки оси X. Присвойте этот массив переменной. В нашем случае мы просто назвали это «метками». Затем назначьте переменную новому объекту. Внутри этого объекта есть два важных ключа, которые вы захотите включить. Значением первого ключа будет массив меток, который вы ранее присвоили переменной. Значение следующего ключа — это другой объект с четырьмя ключами внутри него. Самый важный из них, ключ «данные», будет еще одним массивом, который содержит все точки данных диаграммы. Вы захотите включить все свои точки данных в этот массив. Остальные три клавиши создают заголовок диаграммы, цвет фона и цвет границы. Далее вам нужно создать еще один объект, который вы также назначите переменной (мы назвали эту переменную «config»). Как следует из названия нашей переменной, цель этого объекта состояла в том, чтобы указать тип отображаемого графика (определяется с помощью ключа «тип»), перечислить все точки данных, которые должны быть включены в график (это массив данных мы создали ранее), и чтобы добавить любые дополнительные параметры/функции к графику перед его визуализацией. Последним шагом является включение кода Chart.js, который фактически берет вашу переменную «config» и добавляет ее к элементу «canvas» в вашем HTML-файле. Достаточно легко? Ну я конечно так думаю. Предполагая, что вы следуете и у вас уже есть предопределенные метки и точки данных, вы, по сути, все сделали. Однако, с другой стороны, если количество меток и точек данных зависит от некоторого произвольного объекта данных, полученного из API, вы захотите каким-то образом плавно интегрировать все точки данных в свою диаграмму для каждого экземпляра, в котором новая диаграмма отображается. Здесь наша команда столкнулась с несколькими блокпостами.
Мы использовали цикл for для итерации по объекту данных, возвращенному из API, и помещали каждую дату и точку данных в массивы «меток» и «данных» соответственно. Это подводит меня к моей первой незначительной, но важной проблеме с Chart.js. Вам будет трудно найти легко читаемый и легкодоступный раздел в их документации, который знакомит пользователей с тем, как точно динамически создавать графики с использованием их библиотеки. В конце концов мы нашли решение, однако, если бы в документации Chart.js был раздел с некоторыми инструкциями о том, как успешно отображать диаграмму с различными вариантами использования, мы, возможно, сэкономили бы себе пару поздних ночей.
Тем не менее, несмотря на проблемы, с которыми мы столкнулись, пытаясь более динамично реализовать график Chart.js на нашем веб-сайте, я по-прежнему считаю, что Chart.js — отличное дополнение к любому инструментарию разработчика и ценный актив для веб-разработчиков. По большей части их документация охватывает почти все, что вам нужно для начала работы, однако и здесь они немного колеблются. В некоторых разделах нет подробностей, и если вы пытаетесь сделать что-то более сложное, например, интегрировать другие серверные API с их библиотекой, вам придется сделать все возможное с тем, что они вам дают. В целом, Chart.js — отличный способ предоставить пользователям данные таким образом, чтобы они могли лучше их визуализировать. Я бы порекомендовал самостоятельно прочитать их документацию, прежде чем попробовать!
