Использование диаграмм

Использование диаграмм и инструментов визуализации данных в ваших приложениях может быть очень сложной задачей, когда вы впервые. Доступно так много инструментов, как GraphQL, Chart.JS и т. Д. Один из вариантов, который я нашел очень простым в использовании, - это AnyChart. AnyChart - это библиотека диаграмм, разработанная для JavaScript, документация которой датирована 2003 годом. При использовании этого инструмента разработчик должен обрабатывать в основном данные, которые вы хотите импортировать, и стили. В рамках этого пошагового руководства основное внимание будет уделено данным.

Выбор диаграммы

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

Добавление исходного кода

Получив доступ к ссылке на кольцевую диаграмму, выберите «Исходный код» и добавьте элементы в теге ‹head› в заголовок своего HTML-кода и выполните аналогичные шаги для тега ‹body›. Затем, в отличие от того, что показано в исходном коде, добавьте все в теге ‹script› в ваш файл javascript в рамках функции по вашему выбору, предпочтительно в функции, которая будет обрабатывать только добавление этой диаграммы. Этот код поначалу выглядит очень устрашающе, но имейте в виду, что единственное, что необходимо изменить, - это первые 10 строк тега ‹script›, а именно переменную data:

Данные

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

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

Итерация

В случае, если ваше веб-приложение использует API, который содержит данные, которые вы хотите представить в диаграмме, жесткое кодирование этих элементов в качестве ваших данных не является оптимальной практикой. Вместо этого рекомендуется все время перебирать массив хэшей при построении переменной chartData. Для этого пошагового руководства предположим, что вы создали API, содержащий пользователей, причем у каждого пользователя есть набор расходов, который имеет ключ «элемент» и ключ «суммы». Вы также выполнили запрос Fetch GET в начале своей страницы для доступа к этому ресурсу.

Войдите в функцию, определенную для построения этой диаграммы. Моя функция, как показано ниже, называется addChart и передается в user (в соответствии с соглашением о запросе Fetch GET). Если вы еще не сделали этого, вставьте в эту функцию весь код, который содержится в теге ‹script›, упомянутом выше (всего около 70 строк кода). Теперь первые строки кода в вашей функции над предоставленным кодом ‹script› должны быть итерацией через объект users.

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

Передача данных

Наконец, переменная chartData должна быть передана внутри переменной data, как показано в строке 97.

Если мы посмотрим на строку 97, зная, что такое chartData, это то же самое, что и исходный исходный код. Существует около 70 дополнительных строк кода для создания этой кольцевой диаграммы, однако добавление данных, относящихся к вашему проекту, - это все, что необходимо, чтобы диаграмма появилась на вашей странице.

Заключительные замечания

Рекомендуется инициализировать все переменные, предоставляемые AnyChart, с помощью ключевых слов const или let, а не ключевого слова var, используемого в исходном коде.

Поиграйте и посмотрите, какие графики вы сделаете частью своего следующего проекта!