谷歌图表API的垂直标签？

Question

任何人都知道如何使用谷歌图表API使x轴标签垂直？

我需要在一个小图表中放入很多标签.

谢谢

Answer 1

使用slantedtextangle添加参数选项:90度以垂直显示标签

var options ={ hAxis: {title: "Years" , direction:-1, slantedText:true, slantedTextAngle:90 }}

Answer 2

这是一个旧线程.但我自己也在寻找这个并且遇到了这个......

https://developers.google.com/chart/interactive/docs/gallery/areachart#Configuration_Options

查找:hAxis.slantedTextAngle和hAxis.slantedText.将垂直显示的角度设置为90(或倾斜之间的任何角度).

Answer 3

现在有可能

var options = {
  title: "Test",
   hAxis: {
        direction:-1,
        slantedText:true,
        slantedTextAngle:90 // here you can even use 180
    }
};

Answer 4

另一种可以"解决"此问题的方法是添加x轴:

chxt=x,y

可以改为:

chxt=x,y,x

(确保您对原始x轴所做的任何操作都相同)然后在一个轴上相互设置标签,在另一个轴上相互偏移一个(或者每三个一个,取决于标签的长度).

chx1=0:|Alpha||Gamma||Epsilon||Eta|2:||Beta||Delta||Zeta

注意两个|| 用于之间的空标签.在图表上,标签会关闭轴,你会有更多的空间:

Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta

Answer 5

这里有对角线文字.这是我的方式,我希望它会帮助他们.

https://jsfiddle.net/8tvm9qk5/

代码:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

和

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

function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Departamentos');
      data.addColumn('number', 'Entregados');
      data.addColumn('number', 'En Stock');

      data.addRows([
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786],
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786]


      ]);

      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        isStacked: true,
        height:600,
        chartArea: {
            height:300,
          top:100,
        },
        hAxis: {
          title: 'Departamentos',
          titleTextStyle: {
            color: '#FF0000',            
          },

          slantedText:true,
          slantedTextAngle:45,

        },
        vAxis: {
          title: 'Kits'
        }
      };

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

Answer 6

API 无论如何都不提供获取垂直 x 轴标签（除非我错过了它，因为我也需要它）我们所做的是数据点标签和常规 x 轴标签的组合 - 不完美但有效

如果您需要更多控制，可以尝试邓达斯图表之类的东西