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

【问题标题】：google charts api - column chart - percentage above vertical bar along with normal values on left side of vaxis谷歌图表 api - 柱形图 - 垂直条上方的百分比以及 vaxis 左侧的正常值
【发布时间】：2013-11-22 09:28:06
【问题描述】：

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

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.

我怎样才能得到这些百分比？

【问题讨论】：

标签： javascript google-visualization

【解决方案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/

这仅适用于具有单个数据系列的图表（因为如果有多个系列，标签将错位）。

【讨论】：