Проблема отображения лейблов chart.js

Question

Всем привет! Прошу вашей помощи. Для своего учебного проекта, появилась нужда красиво визуализировать данные, которые получаю из массива json. Немного погуглив, был выбран chart.js. Данных оказалось достаточно и лейблы не очень красиво отображались на странице под графиком. Я нашел плагин chartjs-plugin-piechart-outlabels, который должен решать эту проблему. Сделал как в документации: https://piechart-outlabels.netlify.app/quickstart , но получаю ошибку Uncaught Error: "outlabeledChart" is not a chart type. Если меняю тип чарта на pie, ошибка пропадает, но смотреть на это без боли не получается. Игрался с версиями chart.js и плагина outlabels, но все бестолку.

function grabData() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: "http://localhost:8084/users/rest/messages",
      method: "GET",
      dataType: 'JSON',
      success: function(data) {
        resolve(data)
      },
      error: function(error) {
        reject(error);
      }
    })
  })
}

$(document).ready(function() {
  grabData().then((data) => {
    console.log('Received data:', data);
    let text = [];

    try {
      data.forEach((item) => {
        text.push(item.text);
      });

      let a = {};

      data.forEach((item) => {
        if (a.hasOwnProperty(item.text)) {
          a[item.text] = a[item.text] + 1;
        } else {
          a[item.text] = 1;
        }
      });

      let b = [];
      let c = [];
      for (let key in a) {
        b.push(key);
        c.push(a[key]);
      }
      console.log('Messages: ', text);


      let chart = new Chart('outlabeledChart', {
        type: 'pie',
        data: {
          labels: [...b],
          datasets: [{
            backgroundColor: [
              '#FF3784',
              '#36A2EB',
              '#4BC0C0',
              '#F77825',
              '#9966FF',
              '#00A8C6',
              '#379F7A',
              '#CC2738',
              '#8B628A',
              '#8FBE00',
              '#000000',
              '#FF3784',
              '#36A2EB',
              '#4BC0C0',
              '#F77825',
              '#9966FF',
              '#00A8C6',
              '#379F7A',
              '#CC2738',
              '#8B628A',
              '#8FBE00',
              '#000000'
            ],
            data: [...c]
          }]
        },
        options: {
          zoomOutPercentage: 35,
          layout: {
            padding: 100
          },
          plugins: {
            legend: false,
            outlabels: {
              text: '%l',
              /*%p*/
              color: 'black',
              stretch: 40,
              backgroundColor: 'white',
              font: {
                resizable: true,
                minSize: 12,
                maxSize: 15
              }
            }
          }
        },
      });

    } catch (error) {
      console.log('Error parsing JSON data', error)
    }

  }).catch((error) => {
    console.log(error);
  })
});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="ru">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-piechart-outlabels"></script>
  <title>График</title>
</head>

<body>

  <div id="chart-wrapper">
    <canvas id="outlabeledChart"></canvas>
  </div>

</body>

</html>

БЛОГ НА HUSL

Проблема отображения лейблов chart.js

Ответы (0 шт):