¿Cómo puedo visualizar un gráfico de barras apiladas jqplot cuando xaxis es texto?

Question

Parece que no puedo obtener mi gráfico de barras jqplot para apilar. Tengo el siguiente código:

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

Esto muestra con éxito un gráfico de barras lado a lado para ambas series. Sin embargo, cuando trato de apilarlos al quitar el comentario del stackSeries: true,, todos los gráficos de barras se quitan del gráfico (y todas las etiquetas de puntos se muestran en las etiquetas del eje Y).

¿Qué estoy haciendo mal?

Answer 1

Debe incluir barDirection en su objeto rendererOptions.

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

Asegúrese de incluir la coma después del último corchete, si le siguen más opciones. La pila requiere que también se especifique el eje xaxis.

Su estructura de datos debe verse así. con el número principal en cada ítem que indica el eje 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 
    ], 

Utilice los meses (o el texto que desee) en los ticks: opción como tal.

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

Answer 2

Estoy añadiendo esta solución como he encontrado el enviadas anteriormente a uno no funciona en mi entorno (aunque me puso en el camino correcto, así que gracias @Jack) - A continuación trabajó para mí en un ASP .NET MVC3 sitio ejecutando jqPlot 1.0.8r1250 con JQuery 1.9.1 y JQuery UI 1.1O.3:

Para mí, agregar render rendererOptions{...} resultó ser innecesario.

También encontré que stackedValue: true en el nodo seriesDefaults > pointLabels no tuvo ningún efecto, en su lugar tuve que descomentar stackSeries: true en el nodo raíz.

Mi código final:

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

También asegúrese de incluir los siguientes enlaces:

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

Esperanza esta ayuda a alguien en el futuro Tanto la dirección