Google visualization 谷歌图表vAxis标题被删除,需要向axis靠拢

Google visualization 谷歌图表vAxis标题被删除,需要向axis靠拢,google-visualization,Google Visualization,我正在尝试使用谷歌图表来显示调查结果。一切似乎都很好,除了vAxis的标题被稍微删掉了,我不知道如何把它移近轴心 代码如下: google.load("visualization", "1.0", {packages:["bar"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['

我正在尝试使用谷歌图表来显示调查结果。一切似乎都很好,除了vAxis的标题被稍微删掉了,我不知道如何把它移近轴心

代码如下:

  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));
  };
我这里有一把小提琴:

使用核心图表,您可以调整
图表区域的大小,以便为标题留出空间

但是,这似乎不适用于材质图表

另外,我建议使用
loader.js
加载,而不要使用较旧的库
jsapi

请参阅下面的示例

google.charts.load('current'{
回调:图纸,
软件包:['bar','corechart']
});
函数绘图图(){
var data=google.visualization.arrayToDataTable([
[“问题标题在这里”,“百分比分数”],
[Always',40],
[“通常”,30],
[“很少”,10],
[Never',20]
]);
变量选项={
图表:{
标题:“章节标题”,
副标题:“部分副标题”,
},
图表区:{
背景颜色:“青色”,
身高:400,
左:60,,
前20名,
宽度:500
},
图例:{
位置:“无”
},
言辞:{
标题:“百分比”,
viewWindowMode:“显式”,
视图窗口:{
最高:100,
最低:0
}
},
酒吧:“垂直”,
宽度:600,
身高:500
};
var chart=new google.charts.Bar(document.getElementById('barchart_material');
绘制(数据,google.charts.Bar.convertOptions(选项));
var chart2=新的google.visualization.ColumnChart(document.getElementById('barchart_core');
图表2.绘制(数据、选项);
};

=======材料========
=============核心==========

我设法找到了解决这个问题的真正办法。我已更新图表脚本,使vAxis fontSize为18:

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));
};
然后,我添加了CSS设置,以强制字体大小恢复正常:

#barchart_material g text {
    font-size: 12px !important;
}
我在这里更新了小提琴: