jqplot - 个别值，而不是堆叠图表中的总计

Question

在堆叠条形图中，我们可以显示每个堆栈中的每个系列的总计，如下所示 但是，我希望显示每个系列的值，而不是像这样的总计请忽略这两个样本具有不同数量的系列）这一事实 此外，我想在顶部显示堆栈的总数。 我的意思是说，如果你看第一张图，在第一栏中，数值是5,15（5 + 10），24（15 + 9）。 我想要的结果应该像第二个图，其中第一个栏的值是10,9，最后是总共19
这个库可以吗？

Answer 1

这里有一点点黑客。既然你想为每个系列添加一个标签，我已经介绍了一个“空白”系列。它尽可能复制你想要的东西。小提琴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, 
    }  
    }); 
}); 

产地：