Question

我尝试使用Google图表显示调查结果。一切看起来都很好，除了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));
  };

我有一个小提琴： https://jsfiddle.net/SBComms/pa4yLcb3/

Answer 1

使用核心图表，您可以调整chartArea的大小，以便为标题留出空间。

但是，这似乎不适用于材料图表。

另外，我建议使用loader.js加载较旧的库jsapi。

参见以下示例...

＆＃13;

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);
};

＆＃13;

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

＆＃13;

Answer 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;
}

我在这里更新了小提琴：https://jsfiddle.net/SBComms/pa4yLcb3/1/

谷歌图表vAxis标题被切断，需要靠近轴线

2 个答案: