Jak wyświetlić wykres słupkowy w stosie jqplot, gdy x jest tekstem?

Question

Nie mogę ustawić wykresu słupkowego jqplota na stos. Mam następujący kod:

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

Powoduje to wyświetlenie wykresu słupkowego obok siebie dla obu serii. Jednak, gdy próbuję je ułożyć przez odkomentowanie wszystkich stackSeries: true,, wszystkie wykresy słupkowe są usuwane z wykresu (a wszystkie etykiety punktów są wyświetlane na etykietach osi Y).

Co robię źle?

Answer 1

Musisz uwzględnić barDirection w swoim obiekcie rendererOptions.

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

Pamiętaj, aby dodać przecinek po ostatnim nawiasie, jeśli masz więcej opcji. Stos wymaga również podania xaxis.

Twoja struktura danych powinna wyglądać następująco. z numerem wiodącym w każdym elemencie wskazującym oś 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 
    ], 

Użyj miesięcy (lub dowolnego innego tekstu) w kleszczach: opcja taka jak ta.

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

Answer 2

dodaję to rozwiązanie jak znalazłem wcześniej pisał jeden nie działa w moim otoczeniu (choć nie umieścić mnie na właściwe tory, więc dzięki @Jack) - Następujące pracował dla mnie na ASP Strona internetowa .NET MVC3 z uruchomionym jqPlot 1.0.8r1250 z JQuery 1.9.1 i JQuery UI 1.1O.3:

Dla mnie dodanie renderowania rendererOptions{...} okazało się niepotrzebne.

Odkryłem także, że stackedValue: true pod węzłem seriesDefaults > pointLabels nie przynosi żadnego efektu, zamiast tego musiałem odkomentować stackSeries: true pod węzłem głównym.

Moja ostatnia Kod:

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

także upewnić się, że obejmują następujące linki:

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

nadzieję, że to pomocne dla kogoś w przyszłym