Saltar al contenido

chartist.js gráfico circular con etiquetas Y porcentaje en el gráfico circular

Queremos regalarte la mejor respuesta que descubrimos on line. Nosotros queremos que te sea de mucha utilidad y si deseas compartir algún detalle que nos pueda ayudar a perfeccionar nuestra información hazlo con libertad.

Solución:

Debes mantener un array que contiene sus etiquetasy usa el labelInterpolationFnc con dos parámetros para obtener el índice y usarlo para obtener la etiqueta adecuada con porcentaje:

var animals = ['Dog', 'Cat', 'Cow', 'Snake'];

var data = 
  series: [5, 3, 4]
;

var sum = function(a, b) 
  return a + b
;

new Chartist.Pie('.ct-chart', data, 
  labelInterpolationFnc: function(value, idx) 
    var percentage = Math.round(value / data.series.reduce(sum) * 100) + '%';
    return animals[idx] + ' ' + percentage;
  
);



Tenga en cuenta que no debemos utilizar el labels en tus datos array (solo la serie), de lo contrario, el parámetro de valor en labelInterpolationFnc se llenará con la etiqueta en lugar del valor, por lo que no pudimos calcular el porcentaje.

Si piensas que ha resultado de utilidad nuestro post, sería de mucha ayuda si lo compartes con más entusiastas de la programación de esta manera nos ayudas a difundir nuestra información.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *