Je veux que la valeur réelle de chaque barre affichée sur le dessus de la manière dont il est montré ici
J'essaye cela sur Multi bar graphique .
ne peut pas trouver référence nulle part.
3 Réponses :
Je ne suis pas sûr de ce que vous avez essayé si gros, mais l'exemple dans ici est jolie directement en avant.
J'espère que cela aide. .Showvalues (true) est à peu près le truc.
Merci frère .. Mais j'essayais de faire fonctionner ce travail sur un graphique multi-barres. J'ai maintenant édité la question de la mentionner explicitement.
@ZI - Avez-vous essayé d'ajouter cette ligne dans le graphique multi-barres aussi? Qu'avez-vous fait jusqu'à présent?
Oui, j'ai essayé ça .. N'aya pas fonctionné ... J'ai le graphique à barres multiples qui travaillent sur la production. Voulez-vous simplement afficher les valeurs sur le dessus ... Je n'ai trouvé aucune référence nulle part ... so Haven ' t essayé quoi que ce soit (autre que ce que vous avez suggéré)
Apparemment, cela n'existe pas encore. Il y a un problème ( https://github.com/novus/nvd3/issues/150) qui a été fermé parce que cela est (apparemment) difficile à mettre en œuvre.
duplicata de Comment afficher Valeurs dans la carte multi-barre empilée - Graphes NVD3
Il y a une solution que vous pouvez implémenter vous-même à https://gist.github.com/topicus/217444acb4204f364e46 p>
Edit: copié le code si la liaison GitHub est supprimée: P>
// You need to apply this once all the animations are already finished. Otherwise labels will be placed wrongly.
d3.selectAll('.nv-multibar .nv-group').each(function(group){
var g = d3.select(this);
// Remove previous labels if there is any
g.selectAll('text').remove();
g.selectAll('.nv-bar').each(function(bar){
var b = d3.select(this);
var barWidth = b.attr('width');
var barHeight = b.attr('height');
g.append('text')
// Transforms shift the origin point then the x and y of the bar
// is altered by this transform. In order to align the labels
// we need to apply this transform to those.
.attr('transform', b.attr('transform'))
.text(function(){
// Two decimals format
return parseFloat(bar.y).toFixed(2);
})
.attr('y', function(){
// Center label vertically
var height = this.getBBox().height;
return parseFloat(b.attr('y')) - 10; // 10 is the label's magin from the bar
})
.attr('x', function(){
// Center label horizontally
var width = this.getBBox().width;
return parseFloat(b.attr('x')) + (parseFloat(barWidth) / 2) - (width / 2);
})
.attr('class', 'bar-values');
});
});