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

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.在 View 中添加值为 0 的数据列，该列将显示为 0 高度条。

3.接下来将注释列添加到 View 中，这样注释将显示在高度为 0 的上一个柱附近。

更新 fiddle :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>