Etiquetas verticales con API de gráficos de Google?

Question

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

Necesito que quepan muchas etiquetas en una pequeña tabla.

Gracias

Answer 1

La API no proporciona todos modos para obtener etiquetas del eje x verticle (a menos que me lo perdí porque necesito también) lo que hicimos fue una combinación de etiquetas de puntos de datapoint y etiquetas regulares eje x - no es perfecto, pero funciona

podría tratar algo así como tablas de Dundas si necesita más control

Answer 2

he no encontrar una manera de hacer girar el eje, sin embargo, lo que he hecho es acortar las etiquetas y luego crea una leyenda para explicar lo que las etiquetas realmente representan.

Haga clic en here para obtener una muestra de la tabla de Google.

Answer 3

Otra posible manera se puede "solucionar" este problema es agregar un eje x:

chxt=x,y 

podría cambiar a:

chxt=x,y,x 

(Asegúrese de que cualquier cosa que le hizo a su original x el eje tiene el mismo aplicado) luego establece tus etiquetas una en la otra en un eje y todas las demás compensaciones en uno en el otro eje x (o cada tercio dependiendo de cuánto tiempo estén tus 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 4

esto es un poco viejo. pero yo estaba buscando esto por mí mismo y me encontré con esto ...

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

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

Answer 5

Es posible ahora

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

Answer 6

Añadir 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 7

Sí!

Establezca hAxis.slantedText en true y luego establezca 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 8

El truco está en la 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 9

texto Diagonal aquí. Esta es mi manera 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); 
    }