Los gráficos de Google apilan columnas con diferentes anotaciones para cada parte de la columna

Question

Jan 16, 2014, 11:03 PM

annotations stacked google-visualization

Los gráficos de Google apilan columnas con diferentes anotaciones para cada parte de la columna

Espero me puedas ayudar con esto:

Tengo un gráfico de columnas apiladas, todas con dos valores para apilar en cada columna. He creado con éxito la tabla PERO necesito agregar una anotación para cada parte de cada columna (no sé el nombre correcto para ella) indicando el porcentaje del total representado por la pieza en su propia columna.

En el ejemplo dado a continuación, necesitaría establecer las anotaciones para que muestren las columnas apiladas y, para la primera columna, debería tener una anotación en el área "Buena" con un valor de "60%" y otra anotación para la "Mala". área de "40%", y así sucesivamente.

Hasta ahora, he logrado incluir una anotación que muestra el valor de porcentaje para el área "Malo", que flota en la parte superior de cada columna. Necesitaría ayuda para definir correctamente la anotación para cada área de la columna y, con suerte, colocarla centrada en su área dada.

Gracias de antemano por su ayuda.

TL; DR: Necesito anotaciones centradas para cada parte de cada columna.

<body>
        <div id="chart" style="width: 900px; height: 500px; border: 1px solid black;">
        </div>
    </body>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Date', 'Good', 'Bad'],
          [Date(2013, 11, 1), 3, 2],
          [Date(2013, 11, 2), 5, 3],
          [Date(2013, 11, 3), 9, 2],
          [Date(2013, 11, 4), 6, 3]
        ]);

        var view = new google.visualization.DataView(data);

        view.setColumns([{
            label: 'Date',
            type: 'string',
            calc: function (dt, row) {
                var str = dt.getValue(row, 0);
                return { v: str, f: str.toString('dd/MM/aaaa') };
            }
        }
             , {
                 label: 'Good',
                 type: 'number',
                 calc: function (dt, row) {
                     var good = dt.getValue(row, 1);
                     var bad = dt.getValue(row, 2);
                     return { v: good / (good + bad), f: good.toString() };
                 }
             }, {
                 label: 'Bad',
                 type: 'number',
                 calc: function (dt, row) {
                     var good = dt.getValue(row, 1);
                     var bad = dt.getValue(row, 2);
                     return { v: bad / (good + bad), f: bad.toString() };
                 }
             },
             {
                 role: 'annotation',
                 type: 'string',
                 calc: function (dt, row) {
                     var good = dt.getValue(row, 1);
                     var bad = dt.getValue(row, 2);
                     var perc = (bad / (good + bad)) * 100;
                     var ann = parseFloat(Math.round(perc).toFixed(2)) + "%";
                     return { v: ann, f: ann.toString() };
                 }
             }]);

        var options = {
            title: 'Daily deeds',
            isStacked: true,
            vAxis: { format: '#.##%' }
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
        chart.draw(view, options);
    }
</script>