jqPlot - व्यक्तिगत मूल्यों, खड़ी चार्ट

Question

एक स्टैक्ड बार चार्ट हम हर ढेर में प्रत्येक श्रृंखला के कुल दिखा सकते हैं, इस हालांकि मैं प्रत्येक श्रृंखला के मूल्य चाहते हैं की तरह में दिखाया जा सकता है में नहीं योग, इस तरह कुल नहीं (कृपया इस तथ्य को अनदेखा करें कि दो नमूने में श्रृंखला की अलग-अलग संख्या है) इसके अतिरिक्त मैं शीर्ष पर कुल स्टैक दिखाना चाहता हूं। मेरा मतलब यह है कि, आप पहली बार देखें, पहले बार में, मान 5,15 (5 + 10), 24 (15 + 9) हैं। मेरा वांछित परिणाम दूसरे ग्राफ की तरह होना चाहिए, जहां पहली बार के मान समान हैं, 10,9 और आखिरकार शीर्ष पर कुल 1 9
क्या यह इस लाइब्रेरी के साथ संभव है?

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

का उत्पादन: