Please provide a detailed explanation of how to use the `chart.js` library to create a pie chart, including sample code and explanations of each parameter.

Краткое пояснение:

Пошаговое решение:

1. Шаг 1: Подключение Chart.js
   Сначала необходимо подключить библиотеку Chart.js к вашему HTML-документу. Это можно сделать через CDN:

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

2. Шаг 2: HTML-разметка
   Создайте элемент <canvas>, который будет служить контейнером для вашего графика.

   <canvas id='myPieChart'>

3. Шаг 3: JavaScript-код
   Напишите JavaScript-код для инициализации графика:

   const ctx = document.getElementById('myPieChart').getContext('2d');
   const myPieChart = new Chart(ctx, {
       type: 'pie',
       data: {
           labels: ['Красный', 'Синий', 'Желтый'],
           datasets: [{
               label: 'Мои данные',
               data: [10, 20, 30],
               backgroundColor: [
                   'rgba(255, 99, 132, 0.8)',
                   'rgba(54, 162, 235, 0.8)',
                   'rgba(255, 206, 86, 0.8)'
               ],
               borderColor: [
                   'rgba(255, 99, 132, 1)',
                   'rgba(54, 162, 235, 1)',
                   'rgba(255, 206, 86, 1)'
               ],
               borderWidth: 1
           }]
       },
       options: {
           responsive: true,
           plugins: {
               legend: {
                   position: 'top',
               },
               title: {
                   display: true,
                   text: 'Пример круговой диаграммы'
               }
           }
       }
   });

4. Объяснение параметров:
   • type: 'pie': Указывает, что это будет круговая диаграмма.
   • data.labels: Массив строк, которые будут отображаться как метки для каждого сегмента диаграммы.
   • data.datasets: Массив объектов, каждый из которых представляет набор данных. Для круговой диаграммы обычно используется один набор данных.
   • datasets[0].label: Метка для данного набора данных (может отображаться во всплывающих подсказках).
   • datasets[0].data: Массив чисел, соответствующих значениям для каждого сегмента. Порядок чисел соответствует порядку labels.
   • datasets[0].backgroundColor: Массив цветов фона для каждого сегмента.
   • datasets[0].borderColor: Массив цветов границ для каждого сегмента.
   • datasets[0].borderWidth: Толщина границ сегментов.
   • options.responsive: true: Позволяет диаграмме автоматически изменять размер при изменении размера окна браузера.
   • options.plugins.legend.position: 'top': Располагает легенду над диаграммой.
   • options.plugins.title.display: true: Отображает заголовок диаграммы.
   • options.plugins.title.text: Текст заголовка.