Etiquetas de Datos Flot

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 junto a ese punto. Siento que esto debería ser una opción, pero no puedo encontrarla en la API. ¿Me estoy perdiendo algo,o alguien conoce una solución?

Gracias de antemano.

 36
flot
Author: Zeth, 2009-07-24
Source

5 answers

Así es como agregué 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 mover la posición y mostrar css a una hoja de estilos.

 44
Author: tom,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-04-09 13:54:11

La función que desea se solicita aquí en el grupo Flot de Google. No parece que se haya implementado (no hay nada en la API sobre poner etiquetas dentro del gráfico en sí). Creo que la respuesta a tu pregunta es que No, no es posible en este momento mostrar valores junto a ciertos puntos en líneas dentro del gráfico.

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

Dicho esto, es posible que desee ir a publicar una pregunta en el foro Flot o hacer una sugerencia en el rastreador de errores para la nueva característica. Ole Larson es realmente muy bueno para volver a todas las preguntas, errores y sugerencias.

 10
Author: thewillcole,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-07-23 23:24:07

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

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

 8
Author: Ross Martin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-02-17 00:11:13

Parece que el complemento flot-valuelabels es una bifurcación de un complemento flot anterior but pero el código bifurcado muestra las etiquetas en el lienzo. Puedes ver una demostración de cómo se ve esto en la página wiki de Github del plugin, aquí (se ve bastante agradable a la vista).

 4
Author: Dan Esparza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-12-02 20:37:34 
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);
}
 1
Author: Sedrok,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-01 10:43:35