Google-Diagramm vAxis Titel abgeschnitten und muss näher an Achse

Question

Ich versuche, Google-Charts verwenden, um die Ergebnisse einer Umfrage anzuzeigen. Alles scheint in Ordnung zu sein, abgesehen davon, dass der Titel der vAxis leicht abgeschnitten wird und ich nicht herausfinden kann, wie ich ihn näher zur Achse bewegen kann.

Dies ist der Code:

google.load("visualization", "1.0", {packages:["bar"]}); 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Question title goes here', 'Percentage Score'], 
     ['Always', 40], 
     ['Usually', 30], 
     ['Rarely', 10], 
     ['Never', 20] 
    ]); 

    var options = { 
     chart: { 
     title: 'Section Title', 
     subtitle: 'Section subtitle', 
     }, 
     legend: { position: "none" }, 
     vAxis: { 
     title: 'Percentage', 
     viewWindowMode:'explicit', 
     viewWindow: { 
      max:100, 
      min:0 
     } 
    }, 
     bars: 'vertical', // Required for Material Bar Charts. 
     width: 600, 
     height: 500 
    }; 

    var chart = new google.charts.Bar(document.getElementById('barchart_material')); 


    chart.draw(data, google.charts.Bar.convertOptions(options)); 
    }; 

ich eine Geige haben hier: https://jsfiddle.net/SBComms/pa4yLcb3/

Answer 1

Mit einem Core-Diagramm, können Sie die Größe des chartArea einstellen kann Raum für den Titel zu ermöglichen.

Dies scheint jedoch nicht für eine Material Diagramm zu funktionieren.

Auch würde ich empfehlen, mit loader.js gegen die ältere Bibliothek jsapi laden.

Siehe Beispiel folgende ...

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Question title goes here', 'Percentage Score'], 
 
    ['Always', 40], 
 
    ['Usually', 30], 
 
    ['Rarely', 10], 
 
    ['Never', 20] 
 
    ]); 
 

 
    var options = { 
 
    chart: { 
 
     title: 'Section Title', 
 
     subtitle: 'Section subtitle', 
 
    }, 
 
    chartArea: { 
 
     backgroundColor: 'cyan', 
 
     height: 400, 
 
     left: 60, 
 
     top: 20, 
 
     width: 500 
 
    }, 
 
    legend: { 
 
     position: "none" 
 
    }, 
 
    vAxis: { 
 
     title: 'Percentage', 
 
     viewWindowMode:'explicit', 
 
     viewWindow: { 
 
     max:100, 
 
     min:0 
 
     } 
 
    }, 
 
    bars: 'vertical', 
 
    width: 600, 
 
    height: 500 
 
    }; 
 

 
    var chart = new google.charts.Bar(document.getElementById('barchart_material')); 
 
    chart.draw(data, google.charts.Bar.convertOptions(options)); 
 

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

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>========MATERIAL========</div> 
 
<div id="barchart_material"></div> 
 
<div>==========CORE==========</div> 
 
<div id="barchart_core"></div>

Answer 2

ich es geschafft, eine echte Geige für das Problem zu finden. Ich habe das Diagramm Skript aktualisiert, so dass die vAxis size 18:

#barchart_material g text { 
    font-size: 12px !important; 
} 

Ich aktualisiert die Geige hier:

google.load("visualization", "1.0", {packages:["bar"]}); 
google.setOnLoadCallback(drawChart); 

function drawChart() { 
var data = google.visualization.arrayToDataTable([ 
    ['', 'Percentage'], 
    ['Always', 40], 
    ['Usually', 30], 
    ['Rarely', 10], 
    ['Never', 20] 
]); 

var options = { 
    chart: { 
    title: 'Company Performance' 
    }, 
    legend: { position: "none" }, 
    vAxis: { 
    title: 'Percentage', 
    titleTextStyle: { 
     fontSize: '18', 
    }, 
    viewWindowMode:'explicit', 
    viewWindow: { 
     max:100, 
     min:0 
    } 
}, 
    bars: 'vertical', // Required for Material Bar Charts. 
    width: 400, 
    height: 400 
}; 

var chart = new google.charts.Bar(document.getElementById('barchart_material')); 


chart.draw(data, google.charts.Bar.convertOptions(options)); 
}; 

Ich habe dann eine CSS-Einstellung der Schriftgröße wieder normal zu zwingen hinzugefügt : https://jsfiddle.net/SBComms/pa4yLcb3/1/