使用Google Charts API如何实现垂直标签？

Question

有人知道如何使用Google图表API使x轴标签垂直显示吗？

我需要在一个小图表中放置很多标签。

谢谢

- Tony

Answer 1

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

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

- Milind Morey

---

方向为-1与水平轴无关且将反转h轴。 - Somatik

谢谢您提供的解决方案，但是您有什么办法可以换行文本吗？在我的情况下，文本很长。 - Jaikrat

对于斜体标签: hAxis: { slantedText:true, slantedTextAngle:45 }, 翻译：水平轴：{倾斜文本：是，倾斜文本角度：45} - Danny Schoemann

Answer 2

这是一个有点陈旧的讨论。但我自己在搜索这个问题时发现了这个...

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

查找：hAxis.slantedTextAngle 和 hAxis.slantedText。将您的角度设置为90以进行垂直显示（或任何中间值以进行斜体显示）。

- clarson

Answer 3

这里是斜对角文本。这是我的做法，希望能帮助到他们。

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

- Gonzalo Del Carpio

Answer 4

现在已经可以了

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

- Mehul Gayate

Answer 5

你可以“解决”这个问题的另一种可能的方法是添加一个 x 轴：

chxt=x,y

可以改为：

chxt=x,y,x

确保您对原始x轴所做的任何更改都得到了相同的应用,然后在一个轴上每隔一次设置标签，在另一个x轴上每隔一次偏移一个（或者每三个，具体取决于标签的长度）。

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

注意两个 || 用于表示空标签。这样在您的图表上，标签将关闭坐标轴，您将获得更多的空间：

Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta

- xbakesx

Answer 6

是的！

将hAxis.slantedText设置为true，然后设置hAxis.slantedTextAngle=90。就像这样...

var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
    ac.draw(data, {
      title : 'Equipment Performance Chart',
      isStacked:true,
      vAxis: {
        viewWindowMode: 'explicit',
        viewWindow: {
            max: 100
            },
        title: "Percentage"
        },
      hAxis: {
        title: "Area",
        slantedText:true,
        slantedTextAngle:90
        },
      seriesType: "bars",

    });

- Jason

Answer 7

我没有找到旋转轴的方法，但我所做的是缩短标签，然后创建一个图例来解释标签实际代表的内容。

点击这里查看示例Google图表。

- Zac

Answer 8

这个技巧在于 chartArea.height = 300 和 chartArea.top = 100, height:600。

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

- Gonzalo Del Carpio

Answer 9

这个 API 并没有提供任何方法来获取垂直 X 轴标签（除非我错过了，因为我也需要它），我们所做的是将数据点标签和常规 X 轴标签结合起来 - 不完美但可行。

如果你需要更多的控制，可以尝试一些像 Dundas 图表这样的工具。

- braindice

---

你能指定数据点标签的旋转吗？你有可以发布的示例URL吗？谢谢！ - Tony

没有找到任何可以旋转标签的方法。 - braindice

对于观众而言，Milind Morey的答案现在已经可用。 - CaffeineShots