谷歌图表API - 柱形图 - 百分比上面上vaxis

我使用谷歌图表生成柱形图的左侧正常值沿垂直条如图此图像中：谷歌图表API - 柱形图 - 百分比上面上vaxis

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

这里，数据将像[[ '一个'，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.

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

来源

2013-11-22 user2139745

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/

这只非常适用于有一个单一的一系列数据（如标签的时候，如果不重合的图表有不止一个系列）。

来源

2013-11-22 17:15:36 asgallant

谷歌图表API - 柱形图 - 百分比上面上vaxis

回答

相关问题