jqplot Ułożone obok siebie ułożone wykres słupkowy

Question

Czy możliwe jest uzyskanie wykresu słupkowego ułożonego obok siebie za pomocą jqplot? Na przykład oś X byłaby danym miesiącem i dla każdego miesiąca miałbyś pewną liczbę ułożonych słupków.

coś takiego:

UWAGA: Pytam o coś innego, że tylko normalnego skumulowanego wykresu. Proszę spojrzeć na zdjęcie, aby lepiej zrozumieć, co próbuję zrobić.

Answer 1

tak, jest to możliwe.

z odniesieniem z kodu jqplot

Źródło:

$(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

Nikt nie stworzył taką możliwość dla jqplot. This guy powiedział, że zamierza. Użyj innej biblioteki, takiej jak Flot, napisz wtyczkę sam jqplot lub przekonaj inną osobę, aby to zrobiła! Jeśli używasz Flot, wygląda na to, że ma łatkę, która umożliwia tę funkcję: here, ale nie została scalona.

Answer 3

Będziesz musiał wykreślić dwa wykresy na tej samej podstawie, co będzie w porządku, jeśli nie będziesz t chce żadnych narzędzi czubka lub coś, bo to będzie działać tylko na jednym działki spróbować this-

$(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'} 
    }); 

}); 

Należy jednak pamiętać, że ten będzie można zastosować ostrza/Markera tylko na jednym wykresie