jqplot साइड स्टैक्ड बार चार्ट

Question

क्या jqplot का उपयोग करके साइड स्टैक्ड बार चार्ट द्वारा एक तरफ हासिल करना संभव है? उदाहरण के लिए एक्स-एक्सिस एक महीना महीना होगा और प्रत्येक महीने के लिए आपके पास कुछ स्टैक्ड बार होंगे।

कुछ इस तरह:

नोट: मैं कुछ है कि सिर्फ एक सामान्य खड़ी चार्ट अलग के लिए पूछ रहा हूँ। मैं जो करने की कोशिश कर रहा हूं उसकी बेहतर समझ प्राप्त करने के लिए कृपया चित्र देखें।

Answer 1

हाँ, ऐसा करना संभव है।

jqplot

स्रोत कोड से संदर्भ में

:

$(document).ready(function(){ 
    var s1 = [2, 6, 7, 10]; 
    var s2 = [7, 5, 3, 4]; 
    var s3 = [14, 9, 3, 8]; 
    plot3 = $.jqplot('chart3', [s1, s2, s3], { 
    // 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 
     }, 
     pointLabels: {show: true} 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer 
     }, 
     yaxis: { 
     // Don't pad out the bottom of the data range. By default, 
     // axes scaled as if data extended 10% above and below the 
     // actual range to prevent data points right on grid boundaries. 
     // Don't want to do that here. 
     padMin: 0 
     } 
    }, 
    legend: { 
     show: true, 
     location: 'e', 
     placement: 'outside' 
    }  
    }); 
    // Bind a listener to the "jqplotDataClick" event. Here, simply change 
    // the text of the info3 element to show what series and ponit were 
    // clicked along with the data for that point. 
    $('#chart3').bind('jqplotDataClick', 
    function (ev, seriesIndex, pointIndex, data) { 
     $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
    } 
); 
}); 

Answer 2

कोई भी jqPlot के लिए यह क्षमता पैदा कर दी है। This guy ने कहा कि वह जा रहा था। फ़्लोट जैसी एक अलग लाइब्रेरी का प्रयोग करें, jqplot के लिए एक प्लगइन लिखें, या इसे करने के लिए किसी और को मनाने के लिए! यदि आप फ्लोट का उपयोग करते हैं तो ऐसा लगता है कि उनके पास एक पैच है जो इस क्षमता को here सक्षम करता है लेकिन इसे

Answer 3

आपको उसी प्लॉट बेस पर दो ग्राफ़ प्लॉट करना होगा जो ठीक है अगर आप ' किसी भी उपकरण की नोक या कुछ और चाहते हैं, क्योंकि यह साजिश का केवल एक ही कोशिश इस-

$(document).ready(function(){ 
    /* graph config */ 
    var maxVal = 13; 

    /* graph vals */ 
    var Bar1 = [5, 0, 10, 0, 12, 0]; 
    var Bar2 = [0, 17, 0, 20, 0, 12 ]; 
    var BaseVals=[0,0,0,0,0,0]; 
    /* graph ticks */ 
    var baseTicks=['Americas','','Europe','','Asia',''] 
    var EmptyTicks=['','','','','',''] 


    /* plot the base graph */ 
    plotbase = $.jqplot('chart3', [BaseVals], { 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions: {barMargin: 10}, 
      pointLabels: {show: false} 
     }, 
     axesDefaults: {show: false}, 
     tickOptions: {showMark: false, angle: 90}, 
     axes: { 
      showLabel: false, 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: baseTicks, 
       tickOptions: {markSize: 0} 
      }, 
      yaxis: { 
       padMin: 0, 
       min: 0, 
       max: maxVal, 
       showLabel: false, 
       show: false 
      } 
     } 
    }); 





    plot2 = $.jqplot('chart3', [Bar1], { 
     seriesColors: ["#67ce64", "#da9831","#67ce64", "#da9831"],\\this can be changed 
     stackSeries: true, 
     captureRightClick: true, 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions: {barMargin: 10, highlightMouseOver: true}, 
      pointLabels: {show: false} 
     }, 
     axesDefaults: {show: false}, 
     tickOptions: {showMark: false}, 
     axes: { 
      showLabel: false, 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: EmptyTicks 
      }, 
      yaxis: { 
       padMin: 0, 
       min: 0, 
       max: maxVal, 
       showLabel: false, 
       show: false 
      } 
     }, 
     grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'} 
    }); 


    plot1 = $.jqplot('chart3', [Bar2], { 
     stackSeries: true, 
     captureRightClick: true, 
     seriesColors: ["#effa38", "#37d1f8", "#5129b6","#5129b6"],//this can be changed 
     seriesDefaults:{ 
      renderer:$.jqplot.BarRenderer, 
      rendererOptions: {barMargin: 10, highlightMouseOver: true }, 
      pointLabels: {show: false} 
     }, 
     axes: { 
      xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       tickRenderer:$.jqplot.CanvasAxisTickRenderer, 
       ticks: EmptyTicks, 
       tickOptions: { 
        angle: -90, 
       } 
      }, 
      yaxis: { 
       padMin: 0, 
       min: 0, 
       max: maxVal 
      } 
     }, grid: {background: 'transparent', drawGridLines: false, gridLineColor: 'transparent', borderColor: 'transparent'} 
    }); 

}); 

पर काम करेंगे लेकिन इस है कि तुम साजिश

का केवल एक पर उपकरण की नोक/हाइलाइटर लागू करने के लिए सक्षम हो जाएगा ध्यान दें