Как использовать Chart.js для отображения данных на графиках?

Отображение данных в виде графиков или диаграмм делает ваше приложение более удобным и привлекательным. Существует множество фреймворков для отображения диаграмм и графиков, но Chart.js — лучший вариант. Chartjs — это простые, чистые и привлекательные диаграммы JavaScript на основе HTML5. Chart.js — это простой способ бесплатно добавить анимированные интерактивные графики на свой веб-сайт. В этом уроке вы узнаете, как использовать диаграммы в своих проектах.

Начиная

Хотя у Chartjs есть отличная документация, мы научим вас этому фреймворку на практическом примере. Прежде чем показать, как использовать диаграммы, давайте посмотрим на живой пример. Представьте, что вы хотите отчитаться о ежемесячном доходе от двух ресурсов, таких как Google и реклама.

См. Pen Chartjs Practice Худжата Назари (@Hujjat) на CodePen.

Итак, это был просто пример. Конечно, вы можете использовать его по-разному. Теперь давайте узнаем, что это работает

Как использовать Chartjs?

Чтобы использовать chartjs в своем проекте, все, что вам нужно, это загрузить и включить его в свой проект. Chartjs является бесплатным и открытым исходным кодом. Мы собираемся использовать cdnjs, чтобы включить этот файл в наш проект, поэтому, если хотите, вы можете сделать то же самое.

Шаг 1

Просто добавьте следующий код внизу HTML-страницы.

Первоначально опубликовано на laravelfeed.com.