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

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

Установка

Обычно пользователи должны установить Chart.js в свой корневой каталог проекта с помощью npm. Или, если хотите, есть несколько альтернативных методов, перечисленных на их странице установки (CDNJS, jsDelivr или загрузка репо на Github - не рекомендуется).

npm install chart.js

После установки добавьте его на свою страницу со следующим тегом скрипта:

<script src="https://cdn.jsdelivr.net.npm/chart.js"></chart>

Создание диаграммы

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

<div>
  <canvas id="sleepChart"></canvas>
</div>

Создав холст, вы можете добавить скрипт для настройки и настройки диаграммы. Массив меток используется для маркировки оси индекса (по умолчанию x, но может быть установлен как ось y).

const labels = [
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday',
  'Sunday'
];

И объект данных используется для хранения остальной информации о настройке.

const data = {
  labels: labels,
  datasets: [{
    label: 'Hours of Sleep This Week',
    backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue',    'indigo', 'violet'],
    borderColor: 'black',
    borderWidth: 1,
    data: [6, 8, 5, 7.5, 6, 5.5, 9, 8.5],
  }]
};

Объект данных содержит метки, установленные для массива меток сверху, и массив наборов данных, который содержит объект, устанавливающий некоторую общую информацию о желаемой диаграмме. В этом случае мы установили метку (заголовок диаграммы) на «Часы сна на этой неделе», массив backgroundColor (вы можете просто указать один вместо массива), цвет границы диаграммы, ширину границы, а также установили некоторые данные для включения в нашу диаграмму.

Вам также потребуется включить объект конфигурации.

const configuration = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
};

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

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

const sleepChart = new Chart(
  document.getElementById('sleepChart'),
  configuration
);

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

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

Вот настройка базового линейного графика.

const labels = [
  'A',
  'B',
  'C',
  'D'
];
const data = {
  labels: labels,
  datasets: [{
    label: 'Beginner\'s Line Graph',
    backgroundColor: '#FFF',
    borderColor: '#000',
    data: [1, 3, 4, 2]
  }]
};
const config = {
  type: 'line',
  data: data,
  options: {}
};
const myChart = new Chart(
  document.getElementById('beginnerChart'),
  config
);

И вывод:

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

Другие графики

Вот несколько примеров других параметров диаграммы из документации Chart.js.

Радарная диаграмма

Пончиковая диаграмма

Круговая диаграмма

Диаграмма разброса

Как видите, существует множество вариантов и настроек, позволяющих быстро и легко создавать диаграммы для вашего приложения. По сравнению с другими библиотеками диаграмм, эту очень легко интегрировать в ваше приложение гибким и отзывчивым способом. Удачи в построении графиков!

Ознакомьтесь с документацией Chart.js на сайте chartjs.org.