Flot: comment styliser les nombres dans les graphiques à barres?

Question

J'utilise FlotCharts et c'est plugin flot.barnumbers (Demo) pour afficher les graphiques.

Je dois afficher les chiffres dans la barre, cela fonctionne. Malheureusement, je n'ai aucune idée de comment styliser les chiffres et ne trouve rien dans les documents ou via Google.

Je voudrais utiliser quelque chose comme (apparemment pas possible):

bars: { 
    numbers: { 
     numberFormatter: function(v, bar) { 
      return '<div class="pimp-my-number-class">'+ v +'</div>';    
     } 
    } 
} 

Est-ce que quelqu'un a une idée, comment résoudre ce problème?

Merci d'avance!

Answer 1

L'une des plus belles choses à propos de flot, c'est qu'il fournit les bases, puis se met en travers de votre chemin. Here's a quick code example where I've implemented this myself (ie no plugins). C'est court et doux et vous avez un contrôle complet sur l'apparence.

$(function() { 

    dsHook = function(plot, canvascontext, series){ 
     for (var i = 0; i < series.data.length; i++){ // loop the series 
      var offset = plot.offset(); // offset of canvas to body 
      var dP = series.data[i]; // our data point 
      var pos = plot.p2c({x: dP[0], y: dP[1]}); // position of point   
      var barWidth = plot.p2c({x: dP[0]+series.bars.barWidth, y: dP[1]}).left - pos.left; // calc width of bar 
      pos.left += offset.left; pos.top += offset.top; //adjust position for offset 
      var aDiv = $('<div></div>').css({'width':barWidth, 'background-color':'green','color':'white','text-align':'center','position':'absolute','left': pos.left,'top':pos.top}).text(dP[1]).appendTo("body"); // add an absolute div with the number 
     } 
    } 

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; 

    somePlot = $.plot("#placeholder", [{ 
      data: d2, 
      bars: { show: true } 
     }], 
     { hooks: { drawSeries: [dsHook] } } 
    ); 
}); 

Answer 2

flot.barnumbers ne prend pas en charge le style des nombres insérés. Vous devez ajouter cela au code. Regardez le Drawing text using a canvas.

Answer 3

Je voudrais essayer de réaliser votre disposition souhaitée en utilisant une combinaison d'annotations comme here et une deuxième série de données derrière votre série réelle. La deuxième série devrait alors avoir des valeurs x égales à celles de votre série originale. Aux valeurs y correspondantes, vous ajoutez une constante (par exemple 2).

Vous pouvez définir les annotations et la deuxième série comme vous le souhaitez. La partie fastidieuse serait de placer les annotations à des positions correctes.