javascript - 如何将注释部分置于Google图表的底部？

我正在使用谷歌图表。我想在图的底部显示注释部分，但默认值在顶部。我该如何更改。如果有人有任何想法，请与我分享。

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>

默认：



需要：

最佳答案

检查此讨论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>

关于javascript - 如何将注释部分置于Google图表的底部？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27480196/