谷歌圖表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

回答

相關問題