谷歌圖表API-柱形圖-豎線上方的百分比以及vaxis左側的正常值

Question

我正在使用Google圖表生成此圖所示的柱形圖：

http://postimg.org/image/mt7tzwwob/

在這里，數據將類似於[['a'，1]，['b'，2]，['c'，3]]

在這里，我在vaxis的左側獲得值1,2,3，這對我來說是可以的。

我想要的是：豎線頂部的百分比。

x+2x+3x = 100, means, x=16, 2x=33, 3x=50. So, 16% should be at top of vertical bar with value 1.  

如何獲得這些百分比？

Answer 1

ColumnChart不支持在列上方添加諸如百分比之類的標簽，但是有一種變通方法，涉及使用ComboChart和隱藏線將其添加到其中。這是在標簽中添加一些示例代碼（您可以替換標簽）您想要的百分比）：

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn({type: 'string', role: 'annotation'});

    data.addRows([
        ['Foo', 53, 'Foo text'],
        ['Bar', 71, 'Bar text'],
        ['Baz', 36, 'Baz text'],
        ['Cad', 42, 'Cad text'],
        ['Qud', 87, 'Qud text'],
        ['Pif', 64, 'Pif text']
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 1, 2]);

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    chart.draw(view, {
        height: 400,
        width: 600,
        series: {
            0: {
                type: 'bars'
            },
            1: {
                type: 'line',
                color: 'grey',
                lineWidth: 0,
                pointSize: 0,
                visibleInLegend: false
            }
        },
        vAxis: {
            maxValue: 100
        }
    });
}

看到它在這里工作： http : //jsfiddle.net/asgallant/QjQNX/

這僅適用於具有單個數據系列的圖表（因為如果有多個數據系列，標簽將不對齊）。