2

Comecei a ver o chart JS faz pouco tempo, e precisava que meu gráfico de forma doughnut ficasse com a porcentagem do primeiro valor no meio do gráfico, como está nessa imagem:

Exemplo

No caso do exemplo, apresentar o valor de Pedro ali no meio.

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

var config = {
  type: 'doughnut',
  data: {
datasets: [{
  data: [
    33,        
    67,
  ],
  backgroundColor: [
    "#F7464A",
    "#46BFBD",        
  ],
  label: 'Expenditures'
}],
labels: [
  "Pedro: 33 ",
  "Henrique: 67 ",
]
  },
  options: {
responsive: true,
legend: {
  position: 'bottom',
},
title: {
  display: true,
  text: 'Pedro Henrique Kuzminskas Miyazaki de Souza'
},
animation: {
  animateScale: true,
  animateRotate: true
},
tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
    	var dataset = data.datasets[tooltipItem.datasetIndex];
      var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
        return previousValue + currentValue;
      });
      var currentValue = dataset.data[tooltipItem.index];
      var precentage = Math.floor(((currentValue/total) * 100)+0.5);         
      return precentage + "%";
    }
  }
}
  }
};


var ctx = document.getElementById("myChart").getContext("2d");
window.myDoughnut = new Chart(ctx, config); {

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .