Jquery Flot Kreisdiagramme zeigen die Daten Wert statt des prozentualen

Ich kann nicht herausfinden, wie man flot.Torte zum ändern der angezeigten Daten in die Etiketten aus einem Prozentsatz der "Rohdaten" zu den eigentlichen Daten. In meinem Beispiel habe ich einen Kreis-Diagramm mit den zahlen von gelesenen/ungelesenen Nachrichten.

Anzahl der Nachrichten Lesen: 50.
Die Anzahl der ungelesenen Nachrichten: 150.

Erstellt die Torte zeigt den Anteil der E-Mails zu Lesen als 25%. An dieser Stelle möchte ich zeigen, die tatsächliche 50 Nachrichten. Siehe Bild unten:

Den code, den ich verwendet zum erstellen der Torte:

var data = [
    { label: "Read", data: 50, color: '#614E43' },
    { label: "Unread", data: 150, color: '#F5912D' }
];

Und:

    $(function () {
        $.plot($("#placeholder"), data,
           {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2 / 3,
                        formatter: function (label, series) {
                            return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';

                        },
                        threshold: 0.1
                    }
                }
            },
            legend: {
                show: false
            }
        });
    });

Ist das möglich?

Mit der Antwort von @Ryley kam ich auf eine schmutzige Lösung. Wenn ich den Ausgang der Serie.Daten, die Werte "1,150" und "1,50" zurückgegeben wurden. Ich kam auf die Idee, zu subtrahieren Sie die ersten 2 Zeichen des zurückgegebenen Werts und Anzeige der Wert subtrahiert.

String(str).substring(2, str.lenght)

Dies ist das Kreisdiagramm, das ich mit dieser Lösung:

Jquery Flot Kreisdiagramme zeigen die Daten Wert statt des prozentualen

Dies ist nicht die beste Lösung, aber es funktioniert für mich. wenn jemand weiß eine bessere Lösung....

InformationsquelleAutor der Frage Ruud van de Beeten | 2011-04-15

Fand ich die Antwort auf die Frage. Das Daten-Objekt ist ein multi-dimensionales array. Um die acual Daten verwenden Sie den folgenden code:

    $(function () {
    $.plot($("#placeholder"), data,
       {
        series: {
            pie: {
                show: true,
                radius: 1,
                label: {
                    show: true,
                    radius: 2 / 3,
                    formatter: function (label, series) {
                        return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">' + label + '<br/>' + series.data[0][1] + '</div>';

                    },
                    threshold: 0.1
                }
            }
        },
        legend: {
            show: false
        }
    });
});

Beachten Sie die code " - Serie.data[0][1] " um die Daten zu extrahieren.

InformationsquelleAutor der Antwort Ruud van de Beeten

2

Diese etwas hängt davon ab, was meinst du mit "An dieser Stelle möchte ich zeigen, die tatsächliche 50 Nachrichten".

Nehmen wir an, Sie möchten ein div-popup, wenn Sie die mouseover Gelesen oder Ungelesen markieren und dann zeigen die Meldungen gibt.

Erste Schritt ist, um Ihre Kreisdiagramm interaktiv. Müssen Sie den grid option etwa so:
```
legend: {
    show: true;
},
grid: {
    hoverable: true,
    clickable: true
}
```
Als Nächstes binden Sie die Klick/hover-Ereignissen, um Funktionen, die Ihre Nachrichten abrufen und sich anzeigen lassen:
```
$("#placeholder").bind('plothover',function(e,pos,obj){

});

$("#placeholder").bind('plotclick',function(e,pos,obj){
    if (obj.series.label == 'Read'){
       //show your read messages
    } else {
       //show your unread messages
    }       
});
```
Das ist es!

Nun, wenn das, was Sie meinten, ist einfach, dass Sie wollen, um alle die Nachrichten direkt in den Kuchen die ganze Zeit, die Sie gerade brauchen, um Ihre formatter zum Verweis auf eine Globale variable, die enthält Ihre Nachrichten.

InformationsquelleAutor der Antwort Ryley

Den Sie verwenden könnten:

formatter: function (label, series) {
    return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;">'+Math.round(series.percent)+"%<br/>" + series.data[0][1] +'</div>';
},

InformationsquelleAutor der Antwort Diogenes Chepe Ardines Salazar

0

Versuchen Sie so etwas wie ProtoVis. Es gibt auch ein paar gute Antworten auf SO mit links zu anderen kostenlos nützliche Daten-Visualisierungs-Bibliotheken. Wenn Sie einige $ fusion charts ist auch ganz gut.

InformationsquelleAutor der Antwort FoneyOp

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.