Подключение через CDN

Подключение библиотеки Chart.js через CDN (Content Delivery Network) является наиболее быстрым способом интеграции визуализации графиков в веб-проект без установки зависимостей и настройки сборщиков. В этом подходе библиотека загружается напрямую из внешнего источника и становится доступной через глобальный объект Chart.

CDN-подключение удобно для прототипирования, учебных проектов, простых веб-страниц, а также для ситуаций, когда использование npm или bundler-инструментов избыточно.

Базовое подключение библиотеки

Chart.js подключается через тег <script> в HTML-документе. Наиболее распространённый вариант — использование публичных CDN, таких как jsDelivr или cdnjs.

Подключение через jsDelivr

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

После подключения библиотека становится доступной глобально:

const chart = new Chart(ctx, {
  type: 'bar',
  data: {},
  options: {}
});

Подключение через cdnjs

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.min.js"></script>

Разные CDN могут предоставлять разные сборки библиотеки. Важно учитывать формат файла: UMD-сборка обеспечивает доступ через глобальный объект Chart.

Структура HTML для работы с CDN

Для корректной работы Chart.js требуется элемент <canvas>, на котором будет отрисован график.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Chart.js CDN</title>
</head>
<body>

  <canvas id="chartCanvas"></canvas>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    const ctx = document.getElementById('chartCanvas');

    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Янв', 'Фев', 'Мар', 'Апр'],
        datasets: [{
          label: 'Продажи',
          data: [10, 20, 15, 30]
        }]
      }
    });
  </script>

</body>
</html>

Ключевым моментом является порядок подключения: сначала библиотека, затем код инициализации.

Глобальный объект Chart

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

Основные элементы:

  • Chart — конструктор графиков
  • Chart.register() — регистрация компонентов (актуально для модульной архитектуры Chart.js 3+)
  • Chart.defaults — глобальные настройки по умолчанию
  • Chart.instances — доступ к созданным графикам

Пример изменения глобальных настроек:

Chart.defaults.font.family = 'Arial';
Chart.defaults.color = '#333';

Версионирование при подключении через CDN

Использование конкретной версии важно для стабильности поведения графиков.

Подключение фиксированной версии

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

Фиксация версии предотвращает автоматические изменения API при обновлениях библиотеки.

Использование диапазонов версий

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

Такой подход допускает обновления внутри указанного major-диапазона.

Canvas как основа отрисовки

Chart.js использует HTML5 <canvas> для рендеринга графиков. Элемент должен иметь размеры, иначе график может отображаться некорректно.

<canvas id="chartCanvas" width="600" height="300"></canvas>

Либо размеры задаются через CSS:

<style>
  #chartCanvas {
    width: 600px;
    height: 300px;
  }
</style>

Важно учитывать, что Chart.js масштабирует график относительно контейнера.

Создание первого графика

Инициализация графика происходит через конструктор Chart.

const ctx = document.getElementById('chartCanvas');

new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      label: 'Пример',
      data: [5, 10, 7]
    }]
  }
});

Основные параметры:

  • type — тип графика
  • data — данные
  • options — настройки отображения

Доступные типы графиков

Chart.js поддерживает множество визуализаций:

  • line — линейный график
  • bar — столбчатая диаграмма
  • pie — круговая диаграмма
  • doughnut — кольцевая диаграмма
  • radar — радарный график
  • polarArea — полярная диаграмма

Пример круговой диаграммы:

new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Красный', 'Синий', 'Зелёный'],
    datasets: [{
      data: [12, 19, 7]
    }]
  }
});

Подключение нескольких графиков на странице

На одной странице может быть несколько <canvas> элементов, каждый из которых создаёт отдельный экземпляр Chart.

<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
new Chart(document.getElementById('chart1'), {
  type: 'line',
  data: { labels: ['A', 'B'], datasets: [{ data: [1, 2] }] }
});

new Chart(document.getElementById('chart2'), {
  type: 'bar',
  data: { labels: ['A', 'B'], datasets: [{ data: [3, 4] }] }
});

Каждый экземпляр управляется независимо.

Асинхронная загрузка CDN

При подключении через CDN важно учитывать момент загрузки скрипта. Если код выполняется до загрузки библиотеки, возникает ошибка Chart is not defined.

Решение через defer

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

Либо размещение скрипта в конце body

<body>
  <canvas id="chartCanvas"></canvas>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    // инициализация
  </script>
</body>

Проверка доступности библиотеки

Перед использованием возможно выполнить проверку:

if (typeof Chart !== 'undefined') {
  // библиотека загружена
}

Это полезно при динамической загрузке скриптов.

Работа с UMD-сборкой

CDN обычно предоставляет UMD-версию, которая совместима с классическим браузерным подключением.

Особенности:

  • отсутствие необходимости сборщика
  • глобальный объект Chart
  • поддержка всех базовых возможностей Chart.js

Настройка адаптивности

По умолчанию Chart.js адаптирует график под размер контейнера.

new Chart(ctx, {
  type: 'line',
  data: {...},
  options: {
    responsive: true,
    maintainAspectRatio: false
  }
});
  • responsive включает адаптивность
  • maintainAspectRatio управляет сохранением пропорций

Частые проблемы при CDN-подключении

График не отображается

Причины:

  • отсутствует <canvas>
  • неверный ID элемента
  • скрипт выполняется до загрузки DOM

Chart is not defined

Причина:

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

Пустой график

Причины:

  • отсутствуют данные в datasets
  • некорректная структура data

Использование нескольких CDN одновременно

Подключение Chart.js с разных CDN одновременно недопустимо. Это приводит к конфликтам глобального объекта Chart.

Корректно использовать только один источник:

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

Кэширование и производительность

CDN автоматически кэшируется браузером, что ускоряет повторные загрузки страниц. Однако при разработке важно учитывать:

  • обновление версии может требовать очистки кэша
  • фиксированная версия предотвращает неожиданные изменения поведения

Использование integrity и crossorigin

Для повышения безопасности возможно добавление SRI (Subresource Integrity):

<script 
  src="https://cdn.jsdelivr.net/npm/chart.js"
  integrity="sha384-..."
  crossorigin="anonymous">
</script>

Этот механизм проверяет целостность загружаемого файла.

Минимальная конфигурация для production-подключения

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

<canvas id="chartCanvas"></canvas>

<script>
  new Chart(document.getElementById('chartCanvas'), {
    type: 'bar',
    data: {
      labels: ['X', 'Y', 'Z'],
      datasets: [{
        data: [1, 2, 3]
      }]
    }
  });
</script>
Оглавление