jqplot - Bağımsız değerler, ben her dizi değerini isteyen Bununla birlikte, bu <img src="https://i.stack.imgur.com/xE8xg.jpg" alt="current"> gibi her istif içinde her dizinin toplam gösteren bir istif çubuk, içinde

Question

gösterildiği üzere istiflenmiş grafikte olmayan toplamları, (böyle bir toplam olmayan Lütfen iki örnekte farklı sayıda seri bulunduğunu göz ardı edin) Ayrıca yığının toplamını en üstte göstermek istiyorum. Demek istediğim, ilk grafiğe baktığınızda, ilk çubukta değerler 5,15 (5 + 10), 24 (15 + 9). İstenilen sonuç, ilk çubuk için değerler 10,9 ve nihayet toplamda en üstteki 19
Bu grafikte mümkün mü?

Answer 1

Burada bir parça bir parça. Her seri için bir etiket daha istediğin için, bir "boş" dizi tanıttım. Yine de, istediğiniz şeyi çoğaltır. 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, 
    }  
    }); 
}); 

üretir: