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, 
    }  
    }); 
}); 

는 생산 :