Flot Data Labels

Question

Estoy tratando de producir un gráfico de líneas usando Flot, pero quiero que las etiquetas de datos aparezcan en el gráfico, lo que significa que quiero que el valor de cada punto aparezca al lado de ese punto. Siento que esto debería ser una opción, pero no puedo encontrarlo en la API. ¿Me estoy perdiendo algo, o alguien sabe una solución alternativa?

Gracias de antemano.

Answer 1

Así es como he añadido la característica, incluyendo un agradable efecto de animación:

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

Puede mueve la posición y muestra css en una hoja de estilo.

Answer 2

La función que desea se solicita here en el grupo Flot Google. No parece que alguna vez se haya implementado (no hay nada en la API sobre colocar etiquetas dentro del gráfico). Creo que la respuesta a su pregunta es que no, no es posible en este momento mostrar valores próximos a ciertos puntos en líneas dentro del gráfico.

Ole Larson, desarrollador principal en Flot, mencionó que mostrar etiquetas dentro del gráfico es diferente a cualquier otra cosa en FLot y que tendrían que pensar cómo extender los parámetros API/plot para hacerlo.

Dicho esto, es posible que desee publicar una pregunta en el Flot forum o hacer una sugerencia en el bug-tracker para la nueva función. Ole Larson es realmente bueno para volver a todas las preguntas, errores y sugerencias a sí mismo.

Answer 3

Si alguien está buscando una solución rápida, consulte este plugin:

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

Answer 4

Parece que flot-valuelabels plugin es una horquilla de previous flot plugin - pero el código bifurcado representa las etiquetas en el lienzo. Puede ver una demostración de cómo se ve en la página wiki de Github del complemento, here (parece bastante agradable a la 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); 
}