Как добавить текст в центре диаграммы js пончик

Question

Я хочу поместить текст своих значений данных в центр диаграммы. js Пончики, я не знаю, как это сделать, я проверил диаграмму js Официальные документы, но они не предоставили Любая информация об этом, как я могу добиться этого.

Вот мой код:

HTML:

<canvas id="gx_150s_658Ed8745321" width="200" height="120"></canvas>

JS:

var randomScalingFactor = function () {
    return Math.round(Math.random() * 100);
};



var gx_150s_658Ed8745321_ctx = document.getElementById('gx_150s_658Ed8745321').getContext('2d');
var gx_150s_658Ed8745321 = new Chart(gx_150s_658Ed8745321_ctx, {
    type: 'doughnut',
    data: {
        labels: ['Utilized', 'Balence'],
        datasets: [{
            label: 'Utilized',
            data: [95, 5],
            backgroundColor: [
                'rgb(0, 153, 0, 0.7)',

            ],
            borderColor: [
                'rgba(54, 162, 235, 2)',

            ],
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: false
        },
        title: {
            display: true,
            text: ' Utilized  :  95 %'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        },
    }
});

Ожидаемый результат :

Answer 1

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

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

      animation: {
          animateScale: true,
          animateRotate: true,
          onComplete: function() {
            var canvasBounds = canvas.getBoundingClientRect();
            dataLabel.innerHTML = ' Utilized  :  95 %';
            var dataLabelBounds = dataLabel.getBoundingClientRect();
            dataLabel.style.top = (canvasBounds.top + (canvasBounds.height / 2) - (dataLabelBounds.height / 2)) + 'px';
            dataLabel.style.left = (canvasBounds.left + (canvasBounds.width / 2) - (dataLabelBounds.width / 2)) + 'px';
          }
      },

см. Следующий рабочий фрагмент ...

$(document).ready(function() {
  var randomScalingFactor = function () {
      return Math.round(Math.random() * 100);
  };

  var canvas = document.getElementById('gx_150s_658Ed8745321');
  var dataLabel = document.getElementById('data-label');

  var gx_150s_658Ed8745321_ctx = canvas.getContext('2d');
  var gx_150s_658Ed8745321 = new Chart(gx_150s_658Ed8745321_ctx, {
      type: 'doughnut',
      data: {
          labels: ['Utilized', 'Balence'],
          datasets: [{
              label: 'Utilized',
              data: [95, 5],
              backgroundColor: [
                  'rgb(0, 153, 0, 0.7)',

              ],
              borderColor: [
                  'rgba(54, 162, 235, 2)',

              ],
              borderWidth: 1
          }]
      },
      options: {
          legend: {
              display: false
          },
          animation: {
              animateScale: true,
              animateRotate: true,
              onComplete: function() {
                var canvasBounds = canvas.getBoundingClientRect();
                dataLabel.innerHTML = ' Utilized  :  95 %';
                var dataLabelBounds = dataLabel.getBoundingClientRect();
                dataLabel.style.top = (canvasBounds.top + (canvasBounds.height / 2) - (dataLabelBounds.height / 2)) + 'px';
                dataLabel.style.left = (canvasBounds.left + (canvasBounds.width / 2) - (dataLabelBounds.width / 2)) + 'px';
              }
          },
      }
  });
});

#data-label {
  font-size: 20px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="gx_150s_658Ed8745321" width="200" height="120"></canvas>
<span id="data-label"></span>