Etichette dati flottaggio

Question

Sto provando a produrre un grafico a linee usando Flot, ma voglio che le etichette dei dati vengano visualizzate sul grafico - cioè, voglio che il valore di ciascun punto appaia accanto a quel punto. Credo che questa dovrebbe essere un'opzione, ma non la trovo nell'API. Mi manca qualcosa o qualcuno conosce una soluzione alternativa?

Grazie in anticipo.

Answer 1

Ecco come ho aggiunto la funzione, tra cui un piacevole effetto di animazione:

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'); 
}); 

Puoi sposta la posizione e visualizza css in un foglio di stile.

Answer 2

La funzione desiderata è richiesta here nel gruppo Flot Google. Non sembra che sia mai stato implementato (non c'è nulla nell'API su come inserire le etichette all'interno del grafico stesso). Penso che la risposta alla tua domanda sia che No, al momento non è possibile mostrare i valori accanto a determinati punti sulle linee all'interno del grafico.

Ole Larson, capo sviluppatore di Flot, ha detto che mostrare etichette all'interno del grafico è diverso da qualsiasi altro su FLOT e che dovrebbero pensare a come estendere i parametri API/plot per farlo.

Detto questo, potresti voler pubblicare una domanda sullo Flot forum o inviare un suggerimento sullo bug-tracker per la nuova funzione. Ole Larson è davvero bravo a riprendere da solo tutte le domande, i bug e i suggerimenti.

Answer 3

Se qualcun altro è alla ricerca di una soluzione rapida, vedi questo plugin:

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

Answer 4

Sembra che lo flot-valuelabels plugin sia un fork di un previous flot plugin - ma il codice biforcato rende le etichette sul canvas. Puoi vedere una demo di come appare nella pagina del wiki Github del plugin, here (sembra molto piacevole alla vista).

Answer 5

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); 
}