Flot Stacked Bar Chart y mostrar los valores de la barra en el mouse sobre

Question

Estoy tratando de entender la funcionalidad tooltip de Flot pero no estoy realmente al corriente.

estoy tratando de conseguir una información sobre herramientas que muestra la etiqueta y el valor de cada sección de un gráfico de barras apiladas

qué alguien capaz de apuntar hacia mi un ejemplo de esto o proporcionar el código para hacerlo?

Answer 1

El siguiente código funciona para mi diagrama de barras apiladas de Flot, basado en el ejemplo Flot que muestra el punto flotante de datos. El truco es que los valores de 'elementos' en el gráfico apilado son acumulativos, por lo que el valor 'y' que se muestra en la información sobre herramientas tiene que primero restar el punto de datos para las barras debajo.

var previousPoint = null; 
$("#chart").bind("plothover", function (event, pos, item) { 
    if (item) { 
     if (previousPoint != item.datapoint) { 
      previousPoint = item.datapoint; 

      $("#tooltip").remove(); 
      var x = item.datapoint[0], 
       y = item.datapoint[1] - item.datapoint[2]; 

      showTooltip(item.pageX, item.pageY, y + " " + item.series.label); 
     } 
    } 
    else { 
     $("#tooltip").remove(); 
     previousPoint = null;    
    } 
}); 

no he encontrado esto en la documentación Flot, pero la matriz item.datapoint parecía contener lo que necesitaba en la práctica.

Answer 2

El código anterior causó problemas de redibujado para mí. Aquí es un código mejorado:

var previousPoint = [0,0,0]; 
$("#regionsChart").bind("plothover", function (event, pos, item) { 
    if (item) { 
     if (previousPoint[0] != item.datapoint[0] 
      || previousPoint[1] != item.datapoint[1] 
      || previousPoint[2] != item.datapoint[2] 
     ) { 
      previousPoint = item.datapoint; 

      $("#tooltip").remove(); 
      var x = item.datapoint[0], 
       y = item.datapoint[1] - item.datapoint[2]; 

      showTooltip(item.pageX, item.pageY, item.series.label + " " + y.toFixed(0)); 
     } 
    } 
    else { 
     $("#tooltip").remove(); 
     previousPoint = [0,0,0]; 
    } 
}); 

Answer 3

Esto es lo mismo que Thomas anterior, excepto que cambié la información sobre herramientas para evitar que el bloqueo de la acción de vuelo estacionario.

var previousPoint = [0,0,0]; 
 
$("#regionsChart").bind("plothover", function (event, pos, item) { 
 
    if (item) { 
 
     if (previousPoint[0] != item.datapoint[0] 
 
      || previousPoint[1] != item.datapoint[1] 
 
      || previousPoint[2] != item.datapoint[2] 
 
     ) { 
 
      previousPoint = item.datapoint; 
 

 
      $("#tooltip").remove(); 
 
      var x = item.datapoint[0], 
 
       y = item.datapoint[1] - item.datapoint[2]; 
 

 
      showTooltip(item.pageX, item.pageY - 35, item.series.label + " " + y.toFixed(0)); 
 
     } 
 
    } 
 
    else { 
 
     $("#tooltip").remove(); 
 
     previousPoint = [0,0,0]; 
 
    } 
 
});

Answer 4

La solución está utilizando tooltipOpts ->contenido método con una función de devolución de llamada para devolver correctamente datos dinámicos a la etiqueta.

Me di cuenta de que pasar un 4to argumento a la función de devolución de llamada de "tooltipOpts" en realidad le da el objeto de datos completo a partir del cual se construye el gráfico/gráfico. Desde aquí, puede extraer fácilmente las etiquetas del eje X, usando el segundo argumento de esta misma función como el índice de la etiqueta para extraer.

Ejemplo:

objeto de datos que estoy pasando a la función parcela:

[ 
    { data: [[1,137],[2,194],[3,376],[4,145],[5,145],[6,145],[7,146]] } 
], 
{ 
    bars: { show: true, fill: true, barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' }, 
    colors: ['#fcc100'], 
    series: { shadowSize: 3 }, 
    xaxis: { 
     show: true, 
     font: { color: '#ccc' }, 
     position: 'bottom', 
     ticks: [[1,'Thursday'],[2,'Friday'],[3,'Saturday'],[4,'Sunday'],[5,'Monday'],[6,'Tuesday'],[7,'Wednesday']] 
    }, 
    yaxis:{ show: true, font: { color: '#ccc' }}, 
    grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' }, 
    tooltip: true, 
    tooltipOpts: { 
     content: function(data, x, y, dataObject) { 
      var XdataIndex = dataObject.dataIndex; 
      var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label; 
      return y + ' stories created about your page on ' + XdataLabel 
     }, 
     defaultTheme: false, 
     shifts: { x: 0, y: -40 } 
    } 
} 

Gráfico de barras representan a partir del objeto de datos por encima de:

Como puede ver en la vista previa de la imagen, la lógica se utiliza para representar el contenido de la etiqueta dinámica formar los datos reales es la siguiente:

tooltipOpts: { 
    content: function(data, x, y, dataObject) { 
     var XdataIndex = dataObject.dataIndex; 
     var XdataLabel = dataObject.series.xaxis.ticks[XdataIndex].label; 
     return y + ' stories created about your page on ' + XdataLabel; 
    }, 
    defaultTheme: false, 
    shifts: { x: 0, y: -40 } 
}