jqplot - giá trị cá nhân, chứ không phải tổng số trong biểu đồ xếp chồng lên nhau

Question

Trong một biểu đồ thanh xếp chồng lên nhau, chúng tôi có thể hiển thị tổng số của mỗi loạt trong mỗi ngăn xếp, như thế này Tuy nhiên tôi muốn giá trị của mỗi loạt được hiển thị, không phải tổng số như thế này (xin vui lòng bỏ qua thực tế là hai mẫu có số lượng khác nhau của loạt bài) Ngoài ra, tôi muốn hiển thị tổng số ngăn xếp ở trên cùng. Ý tôi là, f bạn nhìn vào biểu đồ đầu tiên, trong thanh đầu tiên, các giá trị là 5,15 (5 + 10), 24 (15 + 9). Kết quả mong muốn của tôi phải giống như biểu đồ thứ hai, nơi các giá trị cho thanh đầu tiên giống như, 10,9 và cuối cùng là tổng số ở đầu 19
Có thể với thư viện này không?

Answer 1

Một chút hack ở đây. Vì bạn muốn có thêm một nhãn cho mỗi chuỗi, tôi đã giới thiệu một chuỗi "trống". Nó sao chép những gì bạn muốn khá tốt, mặc dù. 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, 
    }  
    }); 
}); 

Tạo: