etiquetas verticais com Google Charts API?

Question

Qualquer um sabe como chegar rótulos do eixo x para ser vertical com gráficos API do Google?

Eu preciso para caber um monte de rótulos em um gráfico pequeno.

Graças

Answer 1

A API não fornece uma maneira de obter etiquetas verticle do eixo x (a menos que eu perdi porque eu precisar dele também) o que fizemos foi uma combinação de rótulos de pontos DATAPOINT e rótulos do eixo x regulares - não é perfeito, mas funciona

Pode tentar algo como gráficos Dundas se você precisar de mais controle

Answer 2

Adicionar opções de parâmetros com slantedtextangle: 90 graus para mostrar o rótulo verticalmente

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

Answer 3

Este é um pouco de uma discussão antiga. mas eu estava procurando por isso mesmo e me deparei com isso ...

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

Procure: hAxis.slantedTextAngle e hAxis.slantedText. Defina o seu ângulo de 90 para exibição vertical (ou qualquer coisa entre para uma inclinação).

Answer 4

É possível agora

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

Answer 5

Outra maneira possível, você pode "trabalhar em torno de" este problema é adicionar um eixo X:

chxt=x,y

poderia mudar para:

chxt=x,y,x

(Certifique-se de qualquer coisa que você fez com o seu eixo x original tem as mesmas Aplicada), em seguida, definir as etiquetas todos os outros em um eixo e todos os outros compensado por um no outro eixo x (ou todos os terceiros dependendo de quanto tempo seus rótulos são ).

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

Observe os dois || para uma etiqueta vazio entre. Dessa forma, em seu gráfico dos rótulos desligar axises e você tem um pouco mais de espaço:

Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta

Answer 6

Texto Diagonal aqui. Esta é a minha maneira de fazê-lo, espero que irá ajudá-los.

https://jsfiddle.net/8tvm9qk5/

O código:

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

e

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 7

Eu tenho não encontrar uma maneira de girar o eixo, no entanto, o que eu fiz é encurtar os rótulos e, em seguida, criar uma legenda para explicar o que os rótulos realmente representam.

Clique em aqui para uma amostra Google gráfico.

Answer 8

Sim!

Set hAxis.slantedText como true e defina hAxis.slantedTextAngle = 90. Como assim ...

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

    });

Answer 9

O truque é no chartArea.height = 300 e chartArea.top = 100, altura: 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'
    }
  };