Существует довольно много библиотек JavaScript для построения различных диаграмм, от гистограмм до линейных диаграмм и многого другого. Если вы изучаете, как динамически отображать данные на своем веб-сайте с помощью JavaScript, вам стоит попробовать Chart.js.

Как начать создавать визуализации данных с помощью Chart.js? Вы узнаете, как в этой статье.

Давайте начнем.

Что такое Chart.js?

Chart.js — это библиотека JavaScript для визуализации данных с открытым исходным кодом, используемая для построения диаграмм, отображаемых в HTML. В настоящее время он поддерживает восемь различных типов интерактивных диаграмм, которые вы также можете анимировать. Чтобы создать график на основе HTML с помощью chart.js, вам понадобится HTML-холст для его хранения.

Библиотека принимает набор наборов данных и другие параметры настройки, такие как цвет фона, цвет границы и т. д. Одним из наборов данных является метка, который представляет значения на оси X. Другой представляет собой набор числовых значений, которые обычно лежат на оси Y.

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

Как создавать диаграммы с помощью Chart.js

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

Связанный:Как сделать ваш сайт отзывчивым и интерактивным с помощью CSS и JavaScript

Чтобы начать использовать диаграмма.js, создайте необходимые файлы. Для этого руководства имена файлов диаграмма.html, сюжет.js, и index.css. Вы можете использовать любое соглашение об именах для ваших файлов.

Теперь вставьте следующее в голова раздел вашего HTML-файла для ссылки на сеть доставки контента (CDN) Chart.js.

В диаграмма.html:

источник = " https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js">

Затем создайте HTML-холст для хранения диаграммы и дайте ей Я БЫ. Также подключитесь к файлу CSS (index.css) в голова раздел и укажите на свой файл JavaScript (plot.js) в тело раздел.

Структура HTML-файла выглядит следующим образом:

 Графики

И в вашем CSS:

тело{
 цвет фона:#383735;
}
h1{
 цвет:#e9f0e9;
 поле слева: 43%;
}
#сюжеты{
 маржа: авто;
 цвет фона: #2e2d2d;
}

Приведенный выше стиль CSS не является установленным соглашением. Таким образом, вы можете стилизовать свои, как вам нравится, в зависимости от вашей структуры DOM. Как только ваши файлы HTML и CSS будут готовы, пришло время построить диаграммы с помощью JavaScript.

Линейный график

Чтобы построить линейную диаграмму с диаграмма.js, вы установите график тип к линия. Это говорит библиотеке нарисовать линейную диаграмму.

Чтобы продемонстрировать это, в вашем файле JavaScript:

// Получить HTML-канвас по его идентификатору
участки = документ.getElementById("участки");
// Примеры наборов данных для осей X и Y
var month = ["Янв", "Фев", "Мар", "Апр", "Май", "Июнь", "Июль"]; //Остается на оси X
переменный трафик = [65, 59, 80, 81, 56, 55, 60] //Остается на оси Y
// Создаем экземпляр объекта Chart:
новая диаграмма (графики, {
 тип: 'линия', //Объявляем тип диаграммы
 данные: {
 метки: месяцы, //данные по оси X
 наборы данных: [{
 данные: трафик, //данные по оси Y
 backgroundColor: '# 5e440f',
 borderColor: «белый»,
 заполнить: ложь, // Закрашивает кривую под линией фоновым цветом. Это правда по умолчанию
 }]
 },
});

Вывод:

Смело меняйте наполнять ценность для истинный, используйте больше данных или измените цвета, чтобы увидеть, что произойдет.

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

То опции Параметр также помогает с другими настройками, помимо удаления или включения легенды. Например, вы можете использовать его, чтобы заставить ось начинаться с нуля.

Чтобы объявить опции параметр, вот как раздел диаграммы выглядит в вашем файле JavaScript:

// Создаем экземпляр объекта Chart:
новая диаграмма (графики, {
 тип: 'линия', //Объявляем тип диаграммы
 данные: {
 метки: месяцы, //данные по оси X
 наборы данных: [{
 данные: трафик, //данные по оси Y
 backgroundColor: '# 5e440f', //Цвет точек
 borderColor: «белый», //Цвет линии
 заполнить: ложь, // Закрашивает кривую под линией фоновым цветом. Это правда по умолчанию
 }]
 },
 // Указываем пользовательские параметры:
 опции:{
 легенда: {отображение: ложь}, //Удалите поле легенды, установив для него значение false. Это правда по умолчанию.
//Задаем настройки для весов. Например, чтобы ось Y начиналась с нуля:
 напольные весы:{
 YAxes: [{тиков: {мин: 0}}] //Вы можете повторить то же самое для оси X, если она содержит целые числа.
 }
 } 
});

Вывод:

Вы также можете использовать разные цвета фона для каждой точки. Однако изменение цвета фона таким образом обычно более полезно для гистограмм.

Создание гистограмм с помощью Chart.js

Здесь вам нужно только изменить график тип к бар. Вам не нужно устанавливать наполнять вариант, потому что полосы автоматически наследуют цвет фона:

// Создаем экземпляр объекта Chart:
новая диаграмма (графики, {
 тип: 'бар', //Объявляем тип диаграммы
 данные: {
 метки: месяцы, //данные по оси X
 наборы данных: [{
 данные: трафик, //данные по оси Y
 backgroundColor: '#3bf70c', //Цвет баров
 }]
 },
 опции:{
 легенда: {отображение: ложь}, //Удалите поле легенды, установив для него значение false. Это правда по умолчанию.
 }
});

Вывод:

Не стесняйтесь заставлять ось Y начинать с нуля или любого значения, как вы сделали для линейного графика.

Связанный:Методы массива JavaScript, которые вы должны освоить

Чтобы использовать разные цвета для каждой полосы, передайте массив цветов, соответствующий количеству элементов в ваших данных, в фоновый цвет параметр:

// Создаем экземпляр объекта Chart:
новая диаграмма (графики, {
 тип: 'бар', //Объявляем тип диаграммы
 данные: {
 метки: месяцы, //данные по оси X
 наборы данных: [{
 данные: трафик, //данные по оси Y
//Цвет каждого бара:
 фоновый цвет: [
 "ргба (196, 190, 183)",
 "ргба (21, 227, 235)",
 "ргба (7, 150, 245)",
 "ргба (240, 5, 252)",
 "ргба (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 опции:{
 легенда: {отображение: ложь}, //Удалите поле легенды, установив для него значение false. Это правда по умолчанию.
 }
});

Вывод:

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

Чтобы нарисовать круговую диаграмму, измените тип диаграммы на пирог. Вы также можете настроить отображение легенды на истинный чтобы увидеть, что представляет собой каждый сегмент круговой диаграммы:

// Создаем экземпляр объекта Chart:
новая диаграмма (графики, {
 type: 'pie', // Объявляем тип диаграммы
 данные: {
 метки: месяцы, //Определяет каждый сегмент
 наборы данных: [{
 data: трафик, //Определяет размер сегмента
 //Цвет каждого сегмента
 фоновый цвет: [
 "ргба (196, 190, 183)",
 "ргба (21, 227, 235)",
 "ргба (7, 150, 245)",
 "ргба (240, 5, 252)",
 "ргба (252, 5, 79)",
 "rgb (0,12,255)",
 "rgb (17, 252, 5)"],
 }]
 },
 опции:{
 legend: {display: true}, // По умолчанию это правда.
}
});

Вывод:

Как и в приведенных выше примерах, вы можете попробовать другие диаграммы, изменив тип.

Тем не менее, вот список поддерживаемых диаграмма.js типы диаграмм, которые вы можете попробовать, используя приведенные выше соглашения о кодировании:

• бар
• линия
• разбрасывать
• пончик
• пирог
• радар
• полярная область
• пузырь

Поэкспериментируйте с Chart.js

Несмотря на то, что в этом руководстве вы познакомились только с линейными, круговыми и гистограммами, шаблон кода для построения других диаграмм с помощью chart.js следует тому же соглашению. Так что не стесняйтесь играть с другими тоже.

С учетом сказанного, если вам нужно больше, чем предлагает chart.js, вы также можете взглянуть на некоторые другие библиотеки диаграмм JavaScript.

6 фреймворков JavaScript, которые стоит изучить

Существует множество фреймворков JavaScript, помогающих в разработке. Вот некоторые из них, которые вы должны знать.

Читать далее

Об авторе