chartist.js camembert avec des étiquettes et pourcentage sur le gâteau

Question

Je veux créer un graphique à secteurs avec chartist.js avec des étiquettes (qui sont indiquées dans la légende) ET aussi avec des pourcentages dans le gâteau lui-même.

Ceci est le diagramme à secteurs. Je veux ajouter des valeurs en pourcentage aux pièces. http://i.stack.imgur.com/SiIKb.png

Ici (https://gionkunz.github.io/chartist-js/examples.html) est un exemple avec des pourcentages dans le secteur. Mais cela ne fonctionne que si je n'ajoute pas d'étiquettes. L'ajout d'étiquettes aux données (par exemple étiquettes: ['Chien', 'Chat', 'Vache', 'Serpent',],) donne l'affichage "NaN%".

Je veux voir les pourcentages dans la tarte elle-même et mettre aussi des étiquettes (pour la légende) dans les données.

Est-ce possible?

Answer 1

Vous devez garder un tableau contenant vos étiquettes, et utiliser les labelInterpolationFnc avec deux paramètres pour obtenir l'index et l'utiliser pour obtenir l'étiquette appropriée avec le pourcentage:

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; 
    } 
}); 

Notez que nous ne devons pas utiliser le labels dans votre tableau de données (seulement la série), sinon le paramètre de valeur dans labelInterpolationFnc sera rempli avec l'étiquette au lieu de la valeur, donc nous n'avons pas pu calculer le pourcentage.

Answer 2

ce que vous auriez besoin de faire est de produire l'étiquette par vous-même. Vous devez produire une chaîne comme [Labeltext] + '| '+ [Partager]

Dans mon cas, je créé une variable qui détient la somme totale de tous les éléments de tarte ... appelés [griall] ....

Ensuite, il y a cette fonction qui calcule les parts .. .

\t \t function calcProz(value, griall) { 
 
\t \t \t return Math.round(value/griall * 100) + '%'; 
 
\t \t };

plus tard quand je produis le tableau qui contient les étiquettes que j'utilise cette fonction pour ajouter les pourcentages au texte ...

\t \t chartlabels[i]=dbresult[i].use + ' | ' + calcProz(dbresult[i].gri,griall);

où dbresult [i] .Utilisation est le texte de l'étiquette initiale et dbresult [i] .gri est la valeur qui va au tableau (les deux provenant d'une base de données)

après tout lors de la définition du tableau que vous venez d'ajouter les étiquettes ...

var data = { 
 
\t \t \t \t series: chartdata, 
 
\t \t // \t \t series: [25,16,15, 14, 4,2,1] 
 
\t \t \t \t labels: chartlabels 
 
\t \t 
 
\t \t };