37 votes

Étiquetage des données

J'essaie de produire un graphique à courbes à l'aide de Flot, mais je veux que les étiquettes de données apparaissent sur le graphique - ce qui signifie que je veux que la valeur de chaque point apparaisse à côté de ce point. Je pense que cela devrait être une option, mais je ne le trouve pas dans l'API. Est-ce que je manque juste quelque chose, ou est-ce que quelqu'un connaît une solution de contournement?

Merci d'avance.

44voto

tom Points 1707

Voici comment j'ai ajouté la fonctionnalité, y compris un effet d'animation agréable:

 var p = $.plot(...);

$.each(p.getData()[0].data, function(i, el){
  var o = p.pointOffset({x: el[0], y: el[1]});
  $('<div class="data-point-label">' + el[1] + '</div>').css( {
    position: 'absolute',
    left: o.left + 4,
    top: o.top - 43,
    display: 'none'
  }).appendTo(p.getPlaceholder()).fadeIn('slow');
});
 

Vous pouvez déplacer la position et afficher CSS dans une feuille de style.

10voto

theWillCole Points 1070

La fonction que vous voulez est demandé ici dans le Flot du groupe Google. Il ne regarde pas comme il n'a jamais été mis en œuvre (il n'y a rien dans l'API de mettre des étiquettes à l'intérieur du graphique lui-même). Je pense que la réponse à votre question est que Non, il n'est pas possible en ce moment pour afficher les valeurs à côté de certains points sur les lignes à l'intérieur du graphique.

Ole Larson, développeur de tête à Flot, a mentionné que le fait de montrer les étiquettes à l'intérieur, le tableau est différent de toute autre chose sur le FLot et qu'ils seraient amenés à réfléchir sur la façon de prolonger l'API / parcelle paramètres pour le faire.

Cela dit, vous pouvez aller de poser une question sur le Flot forum ou faire une suggestion sur le bug-tracker pour la nouvelle fonctionnalité. Ole Larson est en fait à obtenir de très bons retour à toutes les questions, des bugs, et des suggestions de lui-même.

9voto

Ross Martin Points 166

Si quelqu'un d'autre cherche une solution rapide, consultez ce plugin:

http://sites.google.com/site/petrsstuff/projects/flotvallab

5voto

Dan Esparza Points 11826

Ressemble au flot-valuelabels plugin est un fork du précédent flot plugin -- mais la fourche code rend les étiquettes sur la toile. Vous pouvez voir une démo de ce que cela ressemble à de la du plugin Github page wiki, ici (il semble tout à fait agréable à l'oeil).

1voto

Sedrok Points 11
function redrawplot() {
   $('.tt1').remove();
   var points = plot.getData();
     var graphx = $('#placeholder').offset().left;
     graphx = graphx + 30; // replace with offset of canvas on graph
     var graphy = $('#placeholder').offset().top;
     graphy = graphy + 10; // how low you want the label to hang underneath the point
     for(var k = 0; k < points.length; k++){
          for(var m = 1; m < points[k].data.length-1; m++){
            if(points[k].data[m][0] != null && points[k].data[m][1] != null){
                  if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color);
              }
                              if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color);
                              }
                            }
        }
      }

 }

function showTooltip1(x,y,contents, colour){
  $('<div class=tt1 id="value">' +  contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y,
        left: x,
        'border-style': 'solid',
        'border-width': '2px',
        'border-color': colour,
        'border-radius': '5px',
        'background-color': '#ffffff',
        color: '#262626',
        padding: '0px',
        opacity: '1'
  }).appendTo("body").fadeIn(200);
} 

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X