chartist.js Tortendiagramm mit Etiketten UND Prozentsatz auf den Kuchen

Question

Ich möchte ein Kreisdiagramm mit chartist.js mit Beschriftungen (die in der Legende angezeigt werden) UND auch mit Prozentsätzen in der Torte selbst erstellen.

Dies ist das Tortendiagramm. Ich möchte den Stückzahlen Prozentwerte hinzufügen. http://i.stack.imgur.com/SiIKb.png

Hier (https://gionkunz.github.io/chartist-js/examples.html) ist ein Beispiel mit Prozentsätzen in den Kuchen. Aber das funktioniert nur, wenn ich KEINE Labels hinzufüge.

Das Hinzufügen von Etiketten zu den Daten (z. B. Etiketten: ['Hund', 'Katze', 'Kuh', 'Schlange',]) ergibt "NaN%" -Anzeige.

Ich möchte die Prozentsätze in den Kuchen selbst sehen und auch Etiketten (für die Legende) in die Daten einfügen.

Ist das möglich?

Answer 1

Sie müssen eine Array halten Sie Ihre Etiketten, und verwenden Sie die labelInterpolationFnc mit zwei Parametern Index zu bekommen, und es verwenden, um die richtige Etikett mit Prozentsatz zu erhalten:

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

Beachten Sie, dass wir nicht die labels verwenden müssen in Ihrem Datenfeld (nur die Reihe), andernfalls wird der Wertparameter in labelInterpolationFnc mit dem Label anstelle des Werts gefüllt, so dass wir den Prozentsatz nicht berechnen konnten.

Answer 2

was Sie tun müssten, um das Etikett selbst herzustellen. Sie müssen eine Zeichenfolge wie [Labeltext] + '| erzeugen '+ [Teilen]

In meinem Fall habe ich eine Variable, die die Gesamtsumme aller Kuchen Elemente hält ... genannt [griall] ....

Dann gibt es diese Funktion, die Aktien berechnet ..

.

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

später, als ich das Array zu erzeugen, die die Etiketten hält ich diese Funktion verwenden, um die Prozentsätze auf den Text hinzufügen ...

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

wo dbresult [i] .use ist der erste Etikettentext und dbresult [i] .gri ist der Wert, der auf das Diagramm wird (beide aus einer Datenbank kommt)

schließlich das Diagramm bei der Definition fügen Sie nur die Etiketten ...

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