Google visualization 在酒吧内部和顶部贴上标签

我正在尝试用谷歌图表创建一个柱状图。我可以使用以下方法将值放在条的顶部：

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Estacionamento');
        data.addColumn('number', 'Valor');
        data.addColumn({type: 'number', role:'annotation'});

以及创建视图：

chart.draw(view, {
                                height: 600,
                                width: 600,
                                series: {
                                    0: {
                                        type: 'bars'
                                    },
                                    1: {
                                        type: 'line',
                                        color: 'grey',
                                        lineWidth: 0,
                                        pointSize: 0,
                                        visibleInLegend: false
                                    }
                                },
});

我想知道是否有可能在条内也显示一个值。现在，它作为工具提示工作，但我想在没有工具提示的情况下显示值，如下图所示：

---

我有一个解决你问题的办法

我的解决方案：简单，添加一个大小为0的列，然后添加一个注释

为最后一列选择颜色透明

Javascript代码：

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn({type:'string', role:'annotation'});      
      data.addColumn('number', 'Energy Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn('number', 'test Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn('number', 'Motivation Level');
      data.addColumn({type:'string', role:'annotation'});

      data.addRows([
        [{v: [9, 0, 0], f: '8 am'},{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
        [{v: [10, 0, 0], f: '8 am'},{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
        [{v: [11, 0, 0], f: '8 am'},{v:100,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
      ]);

      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        isStacked: true,
        annotations: {
        alwaysOutside : false,
          textStyle: {
            fontSize: 14,
            color: '#000',
            auraColor: 'none'
          }
        },
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
        },
        vAxis: {
          title: 'Rating (scale of 1-10)',
          viewWindow:{
                max:200,
                min:0
              }
        },
        colors: ["blue","red","green","transparent"],
        bar: {groupWidth: "95%"},
      };

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

HTML代码：

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn({type:'string', role:'annotation'});      
      data.addColumn('number', 'Energy Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn('number', 'test Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn('number', 'Motivation Level');
      data.addColumn({type:'string', role:'annotation'});

      data.addRows([
        [{v: [9, 0, 0], f: '8 am'},{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
        [{v: [10, 0, 0], f: '8 am'},{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
        [{v: [11, 0, 0], f: '8 am'},{v:100,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
      ]);

      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        isStacked: true,
        annotations: {
        alwaysOutside : false,
          textStyle: {
            fontSize: 14,
            color: '#000',
            auraColor: 'none'
          }
        },
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
        },
        vAxis: {
          title: 'Rating (scale of 1-10)',
          viewWindow:{
                max:200,
                min:0
              }
        },
        colors: ["blue","red","green","transparent"],
        bar: {groupWidth: "95%"},
      };

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

---

没有找到一种方法，但是你可以把72.000（30%）作为注释，等等。注释将放在条内。你可以在选项中设置：

注释：{alwaysOutside:true}

或者如果你想在条内设置，我可以找到注释选项，但我的示例不起作用=（不可能有一个外部和一个内部，该选项仅适用于所有捐赠。不过，您可以这样做：