gráfico de columnas apiladas para dos conjuntos de datos – Google Charts

Queremos compartirte la mejor solución que encontramos on line. Nosotros deseamos que te sea de mucha ayuda y si deseas aportar cualquier detalle que nos pueda ayudar a mejorar siéntete libre de hacerlo..

Solución:

Me encontré con este mismo problema hoy y seguí su enlace de envío. Parece que recientemente alguien respondió con esto:

“Esto es realmente posible con el nuevo gráfico de barras de materiales (aunque de una manera algo indirecta). En el nuevo gráfico, si hace un gráfico apilado, pero coloca algunas series en un eje diferente, eso crea una pila separada para esas series. Desafortunadamente, actualmente no hay forma de ocultar completamente un eje todavía, y tendrá que configurar explícitamente la ventana de vista. Eventualmente, presentaremos opciones para ocultar ejes y alinear ventanas de vista, pero esto tendrá que funcionar por ahora”.

Este violín pareció ayudarme a resolver este problema: http://jsfiddle.net/p7o0pjgg/

Aquí está el código:

google.load('visualization', '1.1', 
    'packages': ['bar']
);
google.setOnLoadCallback(drawStuff);

function drawStuff() 
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Nescafe Instant');
    data.addColumn('number', 'Folgers Instant');
    data.addColumn('number', 'Nescafe Beans');
    data.addColumn('number', 'Folgers Beans');
    data.addRows([
        ['2001', 321, 621, 816, 319],
        ['2002', 163, 231, 539, 594],
        ['2003', 125, 819, 123, 578],
        ['2004', 197, 536, 613, 298]
    ]);

    // Set chart options
    var options = 
        isStacked: true,
        width: 800,
        height: 600,
        chart: 
            title: 'Year-by-year coffee consumption',
            subtitle: 'This data is not real'
        ,
        vAxis: 
            viewWindow: 
                min: 0,
                max: 1000
            
        ,
        series: 
            2: 
                targetAxisIndex: 1
            ,
            3: 
                targetAxisIndex: 1
            
        
    ;

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.charts.Bar(document.getElementById('chart_div'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
;

La API de visualización no admite la creación de varias pilas de columnas por fila de datos. Puede realizar una solicitud de función para agregar soporte para esto si lo desea.

Puedes hacerlo usando un stacked column chartdonde todas las series de datos de un grupo (por ejemplo, café molido) están en el eje izquierdo y todas las series de datos del otro grupo en el eje derecho (café instantáneo).

Configuración de datos y gráficos de columnas apiladas

serie del grupo 2 movida al eje derecho

Reseñas y valoraciones del post

Si guardas algún recelo o forma de innovar nuestro escrito puedes ejecutar una crónica y con mucho placer lo analizaremos.

---

---

Utiliza Nuestro Buscador