jqplot - Valores individuales, no totales en el gráfico apilado

Question

En un gráfico de barras apiladas podemos mostrar el total de cada serie en cada pila, como esta Sin embargo, quiero mostrar el valor de cada serie, no total como esta (por favor, ignore el hecho de que las dos muestras tienen un número diferente de series) Además, me gustaría mostrar el total de la pila en la parte superior. Lo que quiero decir es que, si mira el primer gráfico, en la primera barra, los valores son 5,15 (5 + 10), 24 (15 + 9). Mi resultado deseado debería ser como el segundo gráfico, donde los valores de la primera barra son similares, 10,9 y finalmente un total en la parte superior 19
¿Es posible con esta biblioteca?

Answer 1

Un poco de un truco aquí. Como quiere una etiqueta más para cada serie, he introducido una serie "vacía". Sin embargo, replica lo que quieres bastante bien. Fiddle here.

$(document).ready(function(){ 
    var s1 = [5, 6]; 
    var s2 = [7, 5]; 
    var s3 = [14, 9]; 
    var s4 = [0, 0]; //empty series just for total labels 

    var pLabels1 = []; // arrays for each inner label 
    var pLabels2 = []; 
    var pLabels3 = []; 
    var pLabelsTotal = []; // array of totals above each column 
    for (var i = 0; i < s1.length; i++){ 
     pLabels1.push('<div style="border:1px solid gray">'+s1[i]+'</div>'); 
     pLabels2.push('<div style="border:1px solid gray">'+s2[i]+'</div>'); 
     pLabels3.push('<div style="border:1px solid gray">'+s3[i]+'</div>'); 
     pLabelsTotal.push(s1[i]+s2[i]+s3[i]);  
    } 

    plot3 = $.jqplot('chart2', [s1, s2, s3, s4], { 
    // Tell the plot to stack the bars. 
    stackSeries: true, 
    captureRightClick: true, 
    seriesDefaults:{ 
     renderer:$.jqplot.BarRenderer, 
     rendererOptions: { 
      // Put a 30 pixel margin between bars. 
      barMargin: 30, 
      // Highlight bars when mouse button pressed. 
      // Disables default highlighting on mouse over. 
      highlightMouseDown: true 
     }, 
    }, 
    series:[ 
     { 
      pointLabels:{ 
       show:true, 
       labels:pLabels1, 
       ypadding: -25, 
       escapeHTML:false 
      } 
     }, 
     { 
      pointLabels:{ 
       show:true, 
       labels:pLabels2, 
       ypadding: -25, 
       escapeHTML:false 
      } 
     }, 
       { 
      pointLabels:{ 
       show:true, 
       labels:pLabels3, 
       ypadding: -25, 
       escapeHTML:false 
      } 
     }, 
       { 
      pointLabels:{ 
       show:true, 
       labels:pLabelsTotal, 
       ypadding: 7, 
       escapeHTML:false 
      } 
     } 
    ], 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer 
     }, 
     yaxis: { 
     padMin: 0, 
     min: 0 
     } 
    }, 
    legend: { 
     show: false, 
    }  
    }); 
}); 

Produce: