Google Wyświetla stos kolumn z różnymi adnotacjami dla każdego elementu kolumny

Question

Jan 16, 2014, 11:03 PM

google-visualization stacked annotations

Google Wyświetla stos kolumn z różnymi adnotacjami dla każdego elementu kolumny

Mam nadzieję, że możesz mi w tym pomóc:

Mam wykres kolumn stosowych, wszystkie z dwiema wartościami do ułożenia w każdej kolumnie. Udało mi się utworzyć wykres, ALE muszę dodać adnotację dla każdego kawałka każdej kolumny (nie znam jej właściwej nazwy), wskazując procent całości reprezentowanej przez element w jego własnej kolumnie.

W poniższym przykładzie musiałbym ustawić adnotacje, tak aby pokazywały kolumny ułożone w stos, a pierwsza kolumna powinna mieć adnotację w obszarze „Dobry” z wartością „60%” i inną adnotacją „Zły” obszar „40%” i tak dalej.

Do tej pory udało mi się zawrzeć jedną adnotację, która pokazuje wartość procentową dla obszaru „Bad”, który unosi się na górę każdej kolumny. Potrzebowałbym pomocy, aby poprawnie zdefiniować adnotację dla każdego obszaru kolumny i, miejmy nadzieję, umieść ją w środku na danym obszarze.

Z góry dziękuję za pomoc.

TL; DR: Potrzebuję wycentrowanych adnotacji dla każdej części każdej kolumny.

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