Mostrar valor dentro de la barra - parcela jQuery horizontal apilados gráfico de barras

Question

me gustaría mostrar el valor dentro de la barra en el gráfico de barras flot (horizontal y apilada), algo como esto:

|------------------------------------------- 
|     5     | 1 | 
|------------------------------------------- 
| 
|------------------------------------ 
|   3   |  2  | 
|------------------------------------ 

vi esto publicación: Show value within bar on flot bar chart Los valores solo aparecen dentro de la primera barra apilada. El segundo valor es el total actual, no el valor correspondiente de la barra actual, por ejemplo:

|------------------------------------------- 
|     5 6    |  | 
|------------------------------------------- 
| 
|------------------------------------ 
|   3 5  |   | 
|------------------------------------ 

No alguien sabe un buen complemento para esta funcionalidad? Además, me gustaría aumentar el tamaño de fuente dentro de la barra.

¡Gracias!

---

Aquí el código:

<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script> 
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.pie.js"></script> 
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.stack.js"></script> 
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.barnumbers.js"></script> 

var data = [ 
     {label: 'Label 1', color:"#80FF80", data: [[1,5], [2,3]]}, 
     {label: 'Label 2', color:"#FF8080", data: [[1,1], [2,2]]} 
]; 

//reverse data for horizontal 
for (series in data){ 
    var s = data[series]; 
    for (i=0;i<s.data.length;i++){ 
      var tmp = s.data[i][0]; 
     s.data[i][0] = s.data[i][1]; 
     s.data[i][1] = tmp;   
    } 
} 

var options = { 
    series: { 
     stack: 0, 
     lines: {show: false, steps: false }, 
     bars: { 
      show: true, 
      barWidth: 0.5, 
      align: 'center', 
      horizontal: true, 
      showNumbers: true 
     }, 
    }, 
    yaxis: {ticks: [[1,'Category 1'], [2,'Category 2']]}, 
}; 

$.plot($("#flot-example-2"), data, options); 

Answer 1

He actualizado flot-barnumbers para admitir barras apiladas, consulte la actualización examples. Si necesita alguna otra característica, envíeme un correo electrónico o abra un problema, solo vi esta pregunta por casualidad.

Answer 2

parece que Flot-barnumbers no soporta gráfico de barras apiladas. Es por eso que el valor está etiquetado incorrectamente. Recomiendo usar jqBarGraph, que es el complemento jQuery para implementar gráficos de barras apiladas.

http://workshop.rs/jqbargraph/

espero que esto ayude.

Answer 3

¡Finalmente decidí usar Highcharts Plugin porque está mucho mejor documentado y funciona bien!