如何垂直显示Google柱形图x轴标签？

Question

我正在使用Google chart库来显示列条形图。我的问题是隐藏了一些x轴标签的字符，只显示了一些字符，我怎样才能显示所有字符？

我当前的柱形图，其中隐藏了x轴标签的某些字符。

我想显示如下图片，是否可能

提前致谢

Answer 1

您可以尝试几件事。

1）textPosition: 'in'
你可以在列内打印轴标签，但我认为它不适用于倾斜文本 （见第一个例子）

2）chartArea
您可以调整图表区域的大小，以便为标签留出空间 （参见第二个例子 - 添加背景颜色以突出显示）

＆＃13;

＆＃13;

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

function drawAnnotations() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Company');
  data.addColumn('number', 'Score');

  data.addRows([
    ['Company A', .80],
    ['Company B', .80],
    ['Company C', .74],
    ['Company D', .74],
  ]);

  var options = {
    bar: {
      groupWidth: 100
    },
    hAxis: {
      textPosition: 'in'
    }
  };

  var chart1 = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
  chart1.draw(data, options);


  var options = {
    bar: {
      groupWidth: 100
    },
    chartArea: {
      backgroundColor: 'cyan',
      height: 300,
      left: 32,
      top: 40,
      width: 434
    },
    height: 400,
    width: 600,
    hAxis: {
      slantedText: true
    }
  };

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;