Làm cách nào để hiển thị biểu đồ thanh xếp chồng lên nhau khi xaxis là văn bản?

Question

Tôi dường như không thể lấy biểu đồ thanh jqplot của mình để ngăn xếp. Tôi có đoạn mã sau:

// Pass/Fail rates per request 
$.jqplot('passFailPerRequestStats', [passRate, failRate], { 
    title: 'Automation Pass Count Per Test Plan', 
    //stackSeries: true, 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     renderOptions: { barMargin: 25 }, 
     pointLabels: { show: true, stackedValue: true } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer 
     } 
    } 
}); 

Điều này hiển thị thành công biểu đồ thanh bên cạnh cho cả hai chuỗi. Tuy nhiên, khi tôi cố gắng ngăn xếp chúng bằng cách bỏ ghi chú stackSeries: true, tất cả biểu đồ thanh được lấy ra khỏi biểu đồ (và tất cả nhãn điểm được hiển thị trên nhãn trục Y).

Tôi đang làm gì sai?

Answer 1

Bạn cần phải bao gồm barDirection trong đối tượng rendererOptions của bạn.

rendererOptions: { 
       barDirection: 'vertical', 
       highlightMouseDown: true  
      } 

Đảm bảo bao gồm dấu phẩy sau dấu ngoặc cuối cùng, nếu có nhiều tùy chọn hơn theo sau. Ngăn xếp cũng yêu cầu xác định xaxis.

Cấu trúc dữ liệu của bạn sẽ trông như thế này. với số hàng đầu trong mỗi mục cho biết trục X.

var s1 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]]; 
    var s2 = [[1,12],[2,11],[3,10],[4,9],[5,8],[6,7],[7,6],[8,5],[9,4],[10,3],[11,2],[12,1]]; 
    var s3 = [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8],[9,9],[10,10],[11,11],[12,12]]; 
    var months = ['Jan', 'Feb', 'Mar', 'Apr',"May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; 
    plot4 = $.jqplot('chartdiv', [ 
    s1, 
    s2, 
    s3 
    ], 

Sử dụng tháng (hoặc bất kỳ văn bản nào bạn muốn) trong tùy chọn: như vậy.

xaxis: { 
       renderer: $.jqplot.CategoryAxisRenderer, 
       ticks: months 
      } 

Answer 2

Tôi thêm giải pháp này như tôi thấy trước đây đăng một để không làm việc trong môi trường của tôi (mặc dù nó đã đưa tôi đi đúng hướng, do đó, nhờ @Jack) - Sau đây là làm việc cho tôi trên một ASP Trang web .NET MVC3 chạy jqPlot 1.0.8r1250 với JQuery 1.9.1 và Giao diện người dùng JQuery 1.1O.3:

Để tôi thêm hiển thị rendererOptions{...} hóa ra là không cần thiết.

Tôi cũng thấy rằng stackedValue: true dưới nút seriesDefaults > pointLabels không có hiệu lực, thay vào đó tôi phải bỏ ghi chú stackSeries: true dưới nút gốc.

mã cuối cùng của tôi:

var s1 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]]; 
var s2 = [[1, 12], [2, 11], [3, 10], [4, 9], [5, 8], [6, 7], [7, 6], [8, 5], [9, 4], [10, 3], [11, 2], [12, 1]]; 
var s3 = [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12]]; 

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

$.jqplot('chartdiv', [s1, s2, s3], { 
    title: 'Automation Pass Count Per Test Plan', 
    stackSeries: true, 
    seriesDefaults: { 
     renderer: $.jqplot.BarRenderer, 
     renderOptions: { barMargin: 25 } 
    }, 
    axesDefaults: { 
     tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
     tickOptions: { 
      angle: -30, 
      fontSize: '10pt' 
     } 
    }, 
    axes: { 
     xaxis: { 
      renderer: $.jqplot.CategoryAxisRenderer, 
      ticks: months 
     } 
    } 
}); 

Ngoài ra hãy chắc chắn rằng bạn bao gồm các liên kết sau đây:

<script src="/.../jquery.jqplot.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.barRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.canvasTextRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.dateAxisRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.canvasAxisTickRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.categoryAxisRenderer.min.js" type="text/javascript"></script> 
<script src="/.../jqplot.canvasAxisLabelRenderer.min.js" type="text/javascript"></script> 

Hy vọng điều này giúp đỡ một người nào đó trong tương lai