Обзор

Charts.js - это библиотека javascript, которая предоставляет возможность использовать данные из таких источников, как файлы, в объектах памяти или базах данных sql и noSql.

Это позволяет нам строить диаграммы, подобные показанной на Рисунке 1 ниже. Информация может быть ассимилирована из одного или нескольких источников и представлена ​​для предоставления конечным пользователям обновлений почти в реальном времени каждый раз, когда они посещают просмотр диаграммы.

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

Я объясню поток кода и как я это сделал дальше. Посмотреть решение по действию или код на github

Как работает Кодекс

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

Вызывающая функция получает данные из firebase в отсортированном порядке, а затем выполняет итерацию по каждой из записей.

Фрагмент кода

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

Ссылка на тег myChart устанавливается в качестве контекста с помощью getElementId с использованием переменной контекста, как показано ниже.

Функция getData вызывает стандартную функцию addData в charts.js для передачи данных в набор данных.

Фрагмент кода

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

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

Параметры обеспечивают размер и расположение свойств осей X и Y, как показано на изображении ниже.

Пока мы использовали линейный график, вы можете изменить тип с линии на круговой, столбик, пончик или другие доступные варианты, которые вы можете проверить на странице chartjs

использованная литература

Charts.js - https://www.chartjs.org/

Сеть разработчиков Mozilla - https://developer.mozilla.org/en-US/docs/Web/JavaScript

Stackoverflow - https://stackoverflow.com/questions/32027878/chart-js-barchart-not-appearing