如何將注釋部分置於Google圖表的底部？

Question

我正在使用谷歌圖表。 我想在圖的底部顯示注釋部分，但默認值在頂部。 我該如何更改。 如果有人有任何想法，請與我分享。

Jsfiddle： http : //jsfiddle.net/6a9hpewr/

我的代碼：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
 google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Funds');
dataTable.addColumn('number', 'Percentage');
dataTable.addColumn({type: 'string', role: 'annotation'});


dataTable.addRows([
['AB1', 30.6, '30.6%'],

['AB2', 40.1,'40.1%'],

['AB3', 45.7,'45.7%'],

['AB4', 50.9,'50.9%']
]);


var options = {
title: 'ABCD',
hAxis: {title: 'List of AB', titleTextStyle: {color: 'black'}},
vAxis: {title: 'List of CD', titleTextStyle: {color: 'black'},           gridlines: {color: 'red', count: 4}, minValue: 0},    
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('tooltip'));
chart.draw(dataTable, options);
}

</script>
<div id="tooltip" style="width: 600px; height: 400px;"></div>

默認：

需要：

Answer 1

檢查此討論https://groups.google.com/forum/#!topic/google-visualization-api/1yWwsXV-Ysk 。 根據那個

1.創建堆疊的條形圖

2.在視圖中添加一個值為0的數據列，該列將顯示為0高度欄。

3.接下來，將注釋列添加到視圖，以便注釋將顯示在前一個高度為0的條附近。

更新的小提琴 ： http : //jsfiddle.net/6a9hpewr/7/

  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'Funds');
  dataTable.addColumn('number', 'Percentage');
  dataTable.addColumn({type: 'string', role: 'annotation'});


    var view = new google.visualization.DataView(dataTable);
    view.setColumns([0, 1, {
        type: 'number',
        calc: function (dt, row) {
            return 0;
        }
    },2]);


  dataTable.addRows([
    ['AB1', 30.6, '30.6%'],

    ['AB2', 40.1,'40.1%'],

    ['AB3', 45.7,'45.7%'],

    ['AB4', 50.9,'50.9%']
  ]);


  var options = {
    title: 'ABCD',
    hAxis: {title: 'List of AB', titleTextStyle: {color: 'black'},
         textStyle: {
        fontName: 'Times-Roman',
        //fontSize: 20,
        // bold: true,
        // italic: true,
        // color: '#BDBDBD',     // The color of the text.
        //opacity: 0.8          // The transparency of the text.
        }},
    vAxis: {title: 'List of CD', titleTextStyle: {color: 'black'},           gridlines: {color: 'red', count: 4}, minValue: 0},    
    legend: 'none',
        isStacked: true,
        annotations: {
          textStyle: {
        //fontName: 'Times-Roman',
        // fontSize: 18,
        // bold: true,
        // italic: true,
          color: '#fff',     // The color of the text.
          auraColor: 'transparent', // The color of the text outline.
        //opacity: 0.8          // The transparency of the text.
        }
}

  };
  var chart = new google.visualization.ColumnChart(document.getElementById('tooltip'));
  chart.draw(view, options);
}

    </script>
<div id="tooltip" style="width: 600px; height: 400px;"></div>