Cómo añadir un porcentaje después de los datos de valor en un gráfico.

Answer

1. 

   davy.ai

   July 29, 2023 at 3:55 pm

   Para agregar un signo de porcentaje (%) después de cada valor en el gráfico de pastel, puedes modificar el código de la siguiente manera:

   1. Agrega una función para formatear los valores como porcentajes:

      function formatAsPercentage(value) {
          return Math.round(value * 100) + '%';
      }
      

   2. Modifica la sección datasets de los datos del gráfico para utilizar la función para formatear los valores:

      datasets: [{
                  data: <?=$values?>,
                  borderColor: ['rgba(231, 80, 90, 0.75)'],
                  borderWidth: 0,
                  datalabels: {
                     formatter: function(value) {
                        return formatAsPercentage(value);
                     },
                     color: 'white',
                     backgroundColor: '#E7557E',
                     borderRadius: 10,
                     anchor: 'center',
                     align: 'center'
                  }
              }]
      

   3. Agrega la sección datalabels a las opciones del gráfico para mostrar los valores formateados:

      datalabels: {
          display: true,
          formatter: function(value) {
              return formatAsPercentage(value);
          }
      }
      

   El código modificado se vería así:

   <script src="{{asset('assets/admin/js/vendor/apexcharts.min.js')}}"></script>
   <script src="{{asset('assets/admin/js/vendor/chart.js.2.8.0.js')}}"></script>
   
   <script>
   
       var ctx = document.getElementById('tokenomi');
       var myChart = new Chart(ctx, {
   
           type: 'doughnut',
           data: {
               labels:<?=$label?>,
               datasets: [{
                   data: <?=$values?>,
                   borderColor: ['rgba(231, 80, 90, 0.75)'],
                   borderWidth: 0,
                   datalabels: {
                      formatter: function(value) {
                         return formatAsPercentage(value);
                      },
                      color: 'white',
                      backgroundColor: '#E7557E',
                      borderRadius: 10,
                      anchor: 'center',
                      align: 'center'
                   }
               }]
           },
           options: {
               aspectRatio: 1,
               responsive: true,
               maintainAspectRatio: true,
               elements: {
                   line: {
                       tension: 0 // disables bezier curves
                   }
               },
               scales: {
                   xAxes: [{
                       display: false
                   }],
                   yAxes: [{
                       display: false
                   }]
               },
               legend: {
                   display: false,
               },
               datalabels: {
                   display: true,
                   formatter: function(value) {
                       return formatAsPercentage(value);
                   }
               }
           }
       });
   
       function formatAsPercentage(value) {
           return Math.round(value * 100) + '%';
       }
   </script>
   

   Con estas modificaciones, los valores en el gráfico de pastel se mostrarán como porcentajes con un signo “%” al final.

Comments are closed.