Google Säulendiagramm - außerhalb hat nicht funktioniert

Question

Was mache ich falsch? Ich möchte 1975 über der Spalte haben, nicht darauf.

[https://codepen.io/Serek/pen/QprYzP][1] 

Answer 1

eine Option wäre, den Maximalwert eingestellt (viewWindow.max) auf der v-Achse ...

vAxis: { 
    title: 'Amount', 
    viewWindow: { 
    max: vAxisMax 
    } 
}, 

sehen folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Year'); 
 
    data.addColumn('number', 'Q1'); 
 
    data.addColumn('number', 'Q2'); 
 
    data.addColumn('number', 'Q3'); 
 
    data.addColumn('number', 'Q4'); 
 

 
    data.addRow(['2016', 500, 100, 1200, 1000]); 
 
    data.addRow(['2016', 500, 100, 1975, 1000]); 
 
    data.addRow(['2016', 500, 100, 1200, 1000]); 
 
    data.addRow(['2016', 500, 100, 1200, 1000]); 
 

 
    // find v-axis max value 
 
    var vAxisMax = null; 
 
    for (var i = 1; i < data.getNumberOfColumns(); i++) { 
 
    var range = data.getColumnRange(i); 
 
    vAxisMax = vAxisMax || Math.ceil(range.max/1000) * 1000; 
 
    vAxisMax = Math.max(vAxisMax, Math.ceil(range.max/1000) * 1000); 
 
    } 
 
    // add buffer for annotation 
 
    vAxisMax += 400; 
 

 
    var options = { 
 
    chartArea: { 
 
     top: 12, 
 
     bottom: 24, 
 
     left: 72 
 
    }, 
 
    legend: { 
 
     position: 'none' 
 
    }, 
 
    colors: ['#9427E0'], 
 
    vAxis: { 
 
     title: 'Amount', 
 
     viewWindow: { 
 
     max: vAxisMax 
 
     } 
 
    }, 
 
    bar: { 
 
     groupWidth: '90%' 
 
    }, 
 
    annotations: { 
 
     style: 'point', 
 
     alwaysOutside: true 
 
    }, 
 
    width: 1100, 
 
    height: 300 
 
    }; 
 

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

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

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

Answer 2

Chart scheinen automatische Größenanpassung die vertikale Achse genug zu sein, um Platz für die höchste Bar zu verlassen, aber nicht für die Anmerkung darüber, auch wenn Sie alwaysOutside: true angegeben.

Eine Lösung wäre, die vertikalen Ticks explizit festzulegen. Das lässt Charts oben mehr Platz und passt dann zu der Anmerkung darüber. Hier ist eine Version des Codes Sie verknüpft, dass diese "Ticks" fügt hinzu:

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

    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Q1'); 
    data.addColumn('number', 'Q2'); 
    data.addColumn('number', 'Q3'); 
    data.addColumn('number', 'Q4'); 

    data.addRow(['2016', 500, 100, 1200, 1000]); 
    data.addRow(['2016', 500, 100, 1975, 1000]); 
    data.addRow(['2016', 500, 100, 1200, 1000]); 
    data.addRow(['2016', 500, 100, 1200, 1000]); 

    var options = { 
     'legend': { position: 'none' }, 
     'colors': ['#9427E0'], 
     'vAxis': {title: 'Amount', 
       // The addition: 
       // Set the largest tick bigger than the largest datum 
       ticks: [500,1000,1500,2000,2500]}, 
     'bar': { 
     groupWidth: '90%' 
     }, 
     'annotations': { 
      style: 'point', 
      alwaysOutside: true 
     }, 
     'width':1100, 
     'height':300}; 

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


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