Google堆积柱形图：每组显示的值

Question

使用Google 堆积列/条形图，有没有办法在每个组上显示价值：

我尝试了注释，但如果我没有错，它只允许我们注释整个列，就像在这个代码开放中http://codepen.io/anon/pen/xLIuB

...
var data = google.visualization.arrayToDataTable([
    ['API Category', 'Social', 'Music', 'File Sharing', 'Storage',
     'Weather', { role: 'annotation' } ],
    ['2011', 98, 53, 12, 16, 6, '15'],
    ['2012', 151, 34, 26, 36, 49, '14'],
    ['2013', 69, 27, 22, 17, 15, '14'],
]);
...

泰

Answer 1

您可以在类别之间添加更多“{role：'annotation'}”类型：

var data = google.visualization.arrayToDataTable([
    ['API Category', 
        'Social', { role: 'annotation' }, 
        'Music', { role: 'annotation' }, 
        'File Sharing', { role: 'annotation' }, 
        'Storage', { role: 'annotation' },
        'Weather', { role: 'annotation' } 
    ],
    ['2011', 98, '98', 53, '53', 12, '12', 16, '16', 6, '6'],
    ['2012', 151, '151', 34, '34', 26, '26', 36, '36', 49, '49'],
    ['2013', 69, '69', 27, '27', 22, '22', 17, '17', 15, '15'],
]);

来源：Google Charts stacked columns with different annotations for each piece of the column

Answer 2

您可以在每列的列上显示值。

＆＃13;

＆＃13;

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['API Category', 'Social', {
            role: 'annotation'
        }, 'Music', {
            role: 'annotation'
        }, 'File Sharing', {
            role: 'annotation'
        }, 'Storage', {
            role: 'annotation'
        },
            'Weather', {
            role: 'annotation'
        }],
        ['2011', 98, 'Social', 53, 'Music', 22, 'File Sharing', 16, 'Storage', 26, 'Weather'],
        ['2012', 151, 'Social', 34, 'Music', 26, 'File Sharing', 36, 'Storage', 49, 'Weather'],
        ['2013', 69, 'Social', 27, 'Music', 22, 'File Sharing', 27, 'Storage', 25, 'Weather'], ]);

    var options = {
        width: 1000,
        height: 550,
        legend: {
            position: 'top',
            maxLines: 3,
            textStyle: {
                color: 'black',
                fontSize: 16
            }
        },
        isStacked: true,

        // Displays tooltip on selection.
        // tooltip: { trigger: 'selection' }, 
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);

    // Selects a set point on chart.
    // chart.setSelection([{row:0,column:1}]) 

    // Renders chart as PNG image 
    // chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
}

＆＃13;

body {
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    color: #000;
}
a:link, a:visited {

＆＃13;

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>

＆＃13;

＆＃13;

＆＃13;

参见工作示例（JsFiddle）：http://jsfiddle.net/majaharshaikh/bspd7gjt/1/