jqplot Biểu đồ thanh xếp chồng bên cạnh

Question

Có thể đạt được biểu đồ thanh xếp chồng lên nhau bằng cách sử dụng jqplot không? Ví dụ, X-Axis sẽ là một tháng cụ thể và cho mỗi tháng bạn sẽ có một số thanh xếp chồng lên nhau.

Something như thế này:

LƯU Ý: Tôi đang yêu cầu cho một cái gì đó khác nhau mà chỉ là một biểu đồ xếp chồng lên nhau bình thường. Hãy nhìn vào bức tranh để hiểu rõ hơn về những gì tôi đang cố gắng làm.

Answer 1

có, bạn có thể làm như vậy.

với tài liệu tham khảo từ Mã jqplot

Nguồn:

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

Không ai đã tạo ra khả năng này cho jqplot. This guy cho biết anh ta sẽ làm. Sử dụng một thư viện khác như Flot, viết một plugin cho jqplot mình, hoặc thuyết phục người khác làm điều đó! Nếu bạn sử dụng Flot có vẻ như họ có một bản vá cho phép khả năng này here nhưng nó chưa được hợp nhất.

Answer 3

Bạn sẽ phải vẽ hai đồ thị trên cùng một ô nền tảng sẽ không sao nếu bạn không ' t muốn bất kỳ công cụ-tip hoặc một cái gì đó bởi vì nó sẽ làm việc trên chỉ là một trong những âm mưu thử 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'} 
    }); 

}); 

Nhưng lưu ý này mà bạn sẽ có thể áp dụng công cụ-tip/Highlighter trên chỉ là một trong những âm mưu