1

Tengo un grafico introducir la descripción de la imagen aquí

Quisiera agregar otro color a la barra azul como ejemplo la marca color negro, Agregué la opción de isStacked:true pero me pone la grafica azul y rojo en una sola, y lo que quieres que se quede la barra azul y rojo en su lugar y agregar otro color en la grafica azul y rojo. Espero haberme explicado.

google.charts.load('current', {'packages':['corechart']});
google.setOnLoadCallback(drawChart123);


function drawChart123() {
    var data = google.visualization.arrayToDataTable([
        ['tipo', 'Total', { role: 'annotation' }, 'cantidad', { role: 'annotation' }],
        ['Copper', 8.94, 8.94, 2, 6],
        ['Silver', 10.49, 8.94, 8, 5],
        ['Gold', 19.30, 8.94, 15, 4],

        ['Platinum', 21.45, 8.94, 15, 9],
    ]);
    var options = {
        //isStacked:true,
        title: 'Company Performance'
    };
    var chart = new google.visualization.ColumnChart(document.getElementById('graficaMes123'));
    chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="graficaMes123"></div>

1 respuesta 1

1

Me parece que te conviene más utilizar un gráfico de barras, de manera que puedas apilar las columnas usando targetAxisIndex. Te adjunto un ejemplo:

google.charts.load('current', { 'packages': ['bar'] });
google.setOnLoadCallback(drawChart123);

function drawChart123 () {
    var element = document.getElementById('graficaMes123')

    var table = new google.visualization.DataTable();
    table.addColumn('string', 'Tipo');
    table.addColumn('number', 'A');
    table.addColumn('number', 'B');
    table.addColumn('number', 'C');
    table.addColumn('number', 'D');


    table.addRow(['Copper', 1, 2, 3, 5]);
    table.addRow(['Silver', 3, 2, 4, 1]);
    table.addRow(['Gold', 2, 2, 4, 2]);
    table.addRow(['Platinum', 3, 1, 4, 1]);

    var chart = new google.charts.Bar(element);
    var options = google.charts.Bar.convertOptions({
        title: 'Company Performance',
        isStacked: true,
        series: {
            0: { targetAxisIndex: 1 },
            1: { targetAxisIndex: 1 }
        }
    });

    chart.draw(table, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="graficaMes123"></div>

1
  • es exactamente lo que necesito, Gracias!!
    – Juan Jose
    el 11 jun. 2022 a las 20:19

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.