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