Google Chart标签旋转配置无效求助：如何实现45度标签旋转？

问题原因 #

你使用的是Google Charts Material版柱状图（google.charts.Bar），但slantedText、slantedTextAngle这类轴标签旋转配置属于经典Core Charts的属性，Material版图表并不支持这些配置，导致设置不生效。

解决方案 #

改用经典版柱状图（google.visualization.ColumnChart），它完全支持你设置的轴标签旋转配置。修改后的完整代码如下：

<body>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>
</body>
<script>
  google.charts.load('current', {
    callback: drawBasic,
    packages: ['corechart'] // 替换为corechart包
  });

  function drawBasic() {
    var data = google.visualization.arrayToDataTable([
      ['Example', 'Example'],
      ["a", 12],
      ["b", 10],
      ["c", 15],
      ["d", 13],
      ["e", 54],
      ["f", 20],
      ["g", 30]
    ]);

    var options = {
      title: 'title',
      subtitle: "subtitle",
      vAxis: {
        title: 'vTitle',
      },
      hAxis: {
        title: 'hTitle',
        direction: -1,
        slantedText: true,
        slantedTextAngle: 45
      },
      colors: ['#e91e63'],
      bar: { groupWidth: '75%' }, // 可选，调整柱子宽度
      legend: { position: 'none' } // 可选，隐藏图例
    };

    // 改用经典版ColumnChart
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options); // 无需convertOptions转换
  }
</script>

关键修改点 #

• 加载包从['bar']改为['corechart']
• 图表实例从google.charts.Bar改为google.visualization.ColumnChart
• 移除google.charts.Bar.convertOptions，直接传递options给draw方法

这样修改后，水平轴的标签就会按照设置的45度角旋转显示了。

内容的提问来源于stack exchange，提问作者Pnmtriet