flot - que - tipo de dato float

Etiquetas de datos flotantes

Question

Intento 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 junto a 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 por adelantado.

Answer 1

Aquí es cómo agregué la función, incluido un efecto de animación agradable:

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 mover la posición y mostrar css en una hoja de estilo.

Answer 2

La función que desea se solicita here en el grupo de 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 foro de Flot o hacer una sugerencia sobre el bug-tracker de 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

Parece que el plugin flot-lablabels es una bifurcación de un http://sites.google.com/site/petrsstuff/projects/flotvallab , pero el código bifurcado representa las etiquetas en el lienzo. Puede ver una demostración de cómo se ve esto en la página wiki de Github del complemento, here (se ve bastante agradable a la vista).

Answer 4

Si alguien más está buscando una solución rápida, consulte este complemento:

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

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