Les graphiques circulaires jQuery Flot montrent la valeur des données au lieu du pourcentage
Je ne sais pas comment obtenir flot.graphique pour changer les données indiquées dans les étiquettes d'un pourcentage des "données brutes" aux données réelles. Dans mon exemple, j'ai créé un diagramme à secteurs avec les nombres de messages lus/non lus.
nombre de messages lus: 50. Nombre de messages non lus: 150.
le diagramme créé montre le pourcentage de messages lus comme 25%. À cet endroit je veux montrer les 50 messages réels. Voir l'image ci-dessous:
Le code que j'ai utilisé pour créer le gâteau:
var data = [
{ label: "Read", data: 50, color: '#614E43' },
{ label: "Unread", data: 150, color: '#F5912D' }
];
Et:
$(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
}
});
});
Est-ce possible?
avec la réponse de @Ryley je suis venu à une solution sale. Quand je l'ai sortie de la série.données les valeurs "1,150" et "1,50" ont été retournées. J'ai eu l'idée de soustraire les deux premiers caractères de la valeur retournée et d'afficher la valeur soustraite.
String(str).substring(2, str.lenght)
voici le diagramme à secteurs que j'ai créé avec cette solution:
Ce n'est pas la meilleure solution, mais cela fonctionne pour moi. si quelqu'un connaît une meilleure solution....
4 réponses
j'ai trouvé la réponse à la question. L'objet de données est un tableau multidimensionnel. Pour obtenir le acual données, utilisez le code suivant:
$(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
}
});
});
Notez le code " série.données[0] [1] " pour extraire les données.
cela dépend un peu de ce que vous voulez dire par "à cet endroit je veux montrer les 50 messages actuels".
Supposons que vous voulez avoir un popup div quand ils sourient la section lire ou non lu et puis montrer les messages là-dedans.
la première étape consiste à rendre votre diagramme à secteurs interactif. Vous devez ajouter le grid option comme suit:
legend: {
show: true;
},
grid: {
hoverable: true,
clickable: true
}
ensuite, vous devez lier les événements click/hover aux fonctions qui récupèrent vos messages et s'affichent eux:
$("#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
}
});
C'est ça!
maintenant, si ce que vous voulez dire est simplement que vous voulez afficher tous les messages directement dans le gâteau tout le temps, vous avez juste besoin de changer votre formateur de référence une variable globale qui contient vos messages.
Vous pouvez utiliser:
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>';
},