Ek açıklamaları her zaman sütunların üzerinde görüntülemek için nasıl zorlayabilirim?

Question

Sütunların üstündeki açıklamaların her zaman YUKARIDAKİ sütunlar olmasını istiyorum. annotations.always'un nu'a doğru ayarladım, ancak bir sütun grafiğin çatısına ulaştığında, ek açıklama sütun içinde yer alacak. Kodu JSFiddle üzerinde çalıştırırsanız, ne demek istediğimi görürsünüz.

Peki, ek açıklamaları ALWAYS ekranının üstündeki sütunlara nasıl zorlayabilirim?

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

Ben de eklemek

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

set

chartArea: { 
     width: '95%', 
} 

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

tam kodu:

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