Wie kann ich erzwingen, dass Anmerkungen immer über den Spalten angezeigt werden?

Question

Ich möchte, dass die Anmerkungen über Spalten immer Spalten über OBEN sein. Ich setze annotations.alwaysOutside bis true, aber sobald eine Spalte das Dach des Diagramms erreicht, positioniert sie die Anmerkung in der Spalte. Wenn Sie den Code auf JSFiddle ausführen, werden Sie sehen, was ich meine.

Also, wie kann ich erzwingen, dass Anmerkungen IMMER über den Spalten angezeigt werden?

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

gesetzt

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

Ich füge auch

chartArea: { 
     width: '95%', 
} 

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

vollständige Code:

<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>