谷歌图表堆积的列，每一列都有不同的注释答案

【问题标题】：Google Charts stacked columns with different annotations for each piece of the column谷歌图表堆积的列，每一列都有不同的注释
【发布时间】：2014-01-16 22:03:42
【问题描述】：

希望你能帮我解决这个问题：

我有一个堆叠列的图表，所有这些列都有两个值要堆叠在每一列中。我已经成功创建了图表，但是我需要为每列的每一部分添加一个注释（我不知道它的正确名称），指示该部分在它自己的列中所代表的总数的百分比。

在下面给出的示例中，我需要设置注释，以便它显示堆叠列，并且对于第一列应该在“良好”区域有一个注释，值为“60%”，另一个注释用于“40%”的“坏”区域，以此类推。

到目前为止，我已经设法包含一个注释，该注释显示“坏”区域的百分比值，该区域浮动到每一列的顶部。我需要帮助来正确定义列的每个区域的注释，并希望将其放置在给定区域的中心。

提前感谢您的帮助。

TL;DR：我需要为每列的每一部分添加居中的注释。

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

【问题讨论】：

标签： annotations google-visualization stacked

【解决方案1】：

您需要在“好”列之后添加另一个注释列：

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() };
    }
}, {
    role: 'annotation',
    type: 'string',
    calc: function (dt, row) {
        var good = dt.getValue(row, 1);
        var bad = dt.getValue(row, 2);
        var perc = (good / (good + bad)) * 100;
        var ann = perc.toFixed(2) + "%";
        return ann;
    }
}, {
    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 = perc.toFixed(2) + "%";
        return ann;
    }
}]);

【讨论】：

我不敢相信它这么容易。非常感谢。