javascript - 谷歌图表 API - 柱形图 - 垂直条上方的百分比以及 vaxis 左侧的正常值

Question

我正在使用谷歌图表生成柱形图，如下图所示:

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/

这只适用于具有单系列数据的图表(因为如果有多个系列，标签将会错位)。