haxis - ¿Etiquetas verticales con google charts API?

haxis google chart

Question

¿Alguien sabe cómo hacer que las etiquetas del eje X sean verticales con la API de Google Charts?

Necesito colocar muchas etiquetas en un pequeño cuadro.

Gracias

Answer 1

¡Sí!

Establezca hAxis.slantedText en true y luego configure hAxis.slantedTextAngle = 90. Al igual que...

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 2

Agregue opciones de parámetros con slantedtextangle: 90 grados para mostrar la etiqueta verticalmente

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

Answer 3

De todos modos, la API no proporciona las etiquetas del eje x del artículo (a menos que lo haya perdido porque también lo necesito). Lo que hicimos fue una combinación de etiquetas de puntos de punto de datos y etiquetas del eje x regulares. No es perfecto pero funciona

Podrías probar algo como los gráficos de Dundas si necesitas más control.

Answer 4

El truco está en chartArea.height = 300 y 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''
    }
  };

Answer 5

Es posible ahora

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

Answer 6

Esto es un poco de un hilo viejo. pero yo estaba buscando esto y me encontré con esto ...

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

Busque: hAxis.slantedTextAngle y hAxis.slantedText. Establezca su ángulo en 90 para la visualización vertical (o cualquier cosa intermedia para una inclinación).

Answer 7

No he encontrado una forma de rotar el eje, sin embargo, lo que he hecho es acortar las etiquetas y luego crear una leyenda para explicar lo que realmente representan las etiquetas.

Haga clic aquí para ver un ejemplo de Google chart.

Answer 8

Otra forma posible de "solucionar" este problema es agregar un eje x:

chxt=x,y

podría cambiar a:

chxt=x,y,x

(Asegúrese de que todo lo que haya hecho en su eje x original tenga aplicado lo mismo), luego configure sus etiquetas cada una en un eje y todas las demás desviaciones en uno en el otro eje x (o en cada tercera parte dependiendo de la longitud de las etiquetas).

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

Tenga en cuenta los dos || para una etiqueta vacía entre. De esa manera en su gráfico, las etiquetas desactivan los ejes y usted tiene un poco más de espacio:

Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta

Answer 9

Texto en diagonal aquí. Esta es mi forma de hacerlo, espero que les ayude.

https://jsfiddle.net/8tvm9qk5/

El código:

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

y

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