Создание графиков на JavaScript с помощью Chart.js

chart.js библиотеки для построения графиков
Метки: / / /

В этой статье вы узнаете о библиотеки Chart.js для построения графиков, вы увидите что с неё работать очень просто, также вы узнаете как её установить.

Также, если вам интересно то посмотрите статью, «График на JavaScript и canvas», в ней вы научаетесь делать графики без библиотек.

Подключение Chart.js:

Библиотеку Chart.js можно подключить разными способами, хоть просто скачать файлы, хоть скачать через npm, сейчас вы всё увидите.

Как Chart.js скачать:

Для начала посмотрим как подключить скачав файлы Chart.js, для этого заходим на GitHub, и в низу выбираем файл Chart.js.zip, нажимаем на него.

В этом zip архиве должны быть все нужные файлы для работы с этой библиотекой, от туда берём файл «Chart.min.css» и «Chart.min.js», вставляем их в ваш проект, ну и подключаем их как обычные CSS и JS файлы.

Как видите всё очень просто.

CDN:

Также если вы не хотите скачивать какие либо файлы, то вам подойдёт способ подключения через CDN, вот как это делается.

Опять же, всё просто.

NPM:

Если же вы используете node.js или какой-нибудь JavaScript фреймворк, то вы можете скачать Chart.js через npm.

Дальше просто через import, подключаем библиотеку.

Работа с Chart.js:

Теперь перейдём к самому важному, это к самой работе, для этого, сначала вам надо создать canvas элемент.

Дальше уже пишем JavaScript код.

Давайте разберём, что к чему тут всё, в первой строчки всё понятно, если нет, то прочитайте статью по этой ссылке.

Дальше вы создаёте объект класса Chart, первым параметром вы передаёте canvas элемент для рисование на нём, вторым JSON объект, для настройки графика.

Первая же настройка это type, которая отвечает за тип графика, всего их есть несколько типов.

  • line — Линейный график;
  • bar — Гистограмма или график в виде столбцов;
  • radar — радарная диаграмма;
  • doughnut — Кольцевая диаграмма;
  • pie — Круговая диаграмма;
  • polarArea — Полярная диаграмма;
  • bubble — Пузырчатая диаграмма;

Это вот все, если вы не знаете что какая диаграмма делает и какой вид имеет, то просто загуглите, так как, здесь не будет это объяснятся, потому что, статья не про это, да и очень большая она тогда получится.

Следующий параметр, это data, в ней хранится все параметры для графика, и первый параметр внутри, это labels, хранит в себе точки для настройки, в моём случае это месяцы.

Также ниже уже идёт параметр datasets, он создаёт один график или несколько, что бы, но об этом ниже, внутри он хранит параметры графиков, например, цвет или название,

Как уже наверное заметили, самый важный параметр это data, так как он хранит всё самую важную информацию о графиках.

В конце идёт параметр options, он просто хранит настройки всего графика, например, в нём ввы можете изменить стандартный шрифт.

Вот результат, что у нас получилось.

Первый и простой график на chart.js

Как видите такой простой линейный график у нас получился.

Несколько линейных графиков:

Напоследок покажу как сделать несколько таких линейных графиков, это очень просто, вот.

Тут всё тоже самое, только в массив datasets, запихнули три JSON объект, которые хранят информацию о каждой диаграмме, таким образом мы имеем три диаграмме в одном графике, вот результат.

График с несколькими диаграммами

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

Вывод:

В этой статье вы прочитали о библиотеки Chart.js для построения графиков, как её установит и основы работы с ней.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: