如何强制注释始终显示在列之上？

Question

我希望列上方的注释始终位于列上。我将 annotations.alwaysOutside 设置为 true ，但只要列到达图表的顶部，它就会将注释放在列中。如果你在JSFiddle上运行代码，你会明白我的意思。

那么，如何强制注释始终显示在列之上？

https://jsfiddle.net/y7ootfoo/

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ["Mana Cost", "Cards"],
      ["0", 1],
      ["1", 2],
      ["2", 3],
      ["3", 4],
      ["4", 4],
      ["5", 3],
      ["6", 2],
      ["7+", 1],
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
    }, ]);

    var options = {
      title: "Cards/Mana Cost",
      width: '750',
      height: '375',
      backgroundColor: "#FFF",
      enableInteractivity: false,
      bar: {
        groupWidth: "90%"
      },
      legend: {
        position: "none"
      },
      annotations: {
        alwaysOutside: true,
        stem: {
          color: "transparent"
        },
        textStyle: {
          fontName: 'Lato',
          fontSize: 18.75,
          bold: true,
          italic: false,
          auraColor: 'transparent',
          color: "#000"
        }
      },
      chartArea: {
        backgroundColor: "#FFF"
      },
      titleTextStyle: {
        color: "#000",
        fontName: "Lato",
        fontSize: 25,
        bold: true,
        italic: false
      },
      vAxis: {
        gridlines: {
          color: 'transparent'
        },
        textPosition: "none"
      },
      hAxis: {
        textStyle: {
          color: "#000",
          fontName: "Lato",
          fontSize: 18.75,
          bold: true,
          italic: false
        }
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
  }

</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Answer 1

设置

var options = {
    vAxis: {
        viewWindow:{
            max: maxV, //maximum value of annotations + 1
        },
    }}

我也添加了

chartArea: {
        width: '95%',
}

https://jsfiddle.net/damiantt/y7ootfoo/1/

完整代码：

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ["Mana Cost", "Cards"],
      ["0", 1],
      ["1", 2],
      ["2", 3],
      ["3", 4],
      ["4", 4],
      ["5", 3],
      ["6", 2],
      ["7+", 1],
    ]);

    var maxV = 0;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
            if(data.getValue(i, 1) > maxV) {
                maxV = data.getValue(i, 1);
        }
    }
    maxV++;

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
    }, ]);

    var options = {
      title: "Cards/Mana Cost",
      width: '750',
      height: '375',
      backgroundColor: "#FFF",
      enableInteractivity: false,
      bar: {
        groupWidth: "90%"
      },
      legend: {
        position: "none"
      },
      annotations: {
        alwaysOutside: true,
        stem: {
          color: "transparent"
        },
        textStyle: {
          fontName: 'Lato',
          fontSize: 18.75,
          bold: true,
          italic: false,
          auraColor: 'transparent',
          color: "#000"
        }
      },
      chartArea: {
        width: '95%',
        backgroundColor: "#FFF"
      },
      titleTextStyle: {
        color: "#000",
        fontName: "Lato",
        fontSize: 25,
        bold: true,
        italic: false
      },
      vAxis: {
        viewWindow:{
            max:maxV,
        },
        gridlines: {
          color: 'transparent'
        },
        textPosition: "none"
      },
      hAxis: {
        textStyle: {
          color: "#000",
          fontName: "Lato",
          fontSize: 18.75,
          bold: true,
          italic: false
        }
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
  }

</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>