Etiquettes verticales avec google charts API?

Question

Quelqu'un sait comment faire pour que les étiquettes de l'axe x soient verticales avec google charts API?

Je dois placer beaucoup d'étiquettes dans une petite carte.

Merci

Answer 1

L'API ne fournit pas de toute façon à obtenir verticle étiquettes x-axe (à moins que je l'ai raté parce que je besoin aussi) ce que nous avons fait était une combinaison d'étiquettes de points de points de données et les étiquettes régulières x-axes - pas parfait, mais fonctionne

pouvez essayer quelque chose comme les graphiques Dundas si vous avez besoin de plus de contrôle

Answer 2

J'ai pas trouver un moyen de faire tourner l'axe, mais, ce que je l'ai fait est écourter les étiquettes et créer une légende pour expliquer ce que les étiquettes représentent réellement. Cliquez sur here pour un exemple de graphique Google.

Answer 3

Une autre façon possible, vous pouvez « contourner » ce problème est d'ajouter un axe x:

chxt=x,y 

pourrait changer à:

chxt=x,y,x 

(Faire quelque chose que vous avez à votre x originale l'axe a la même application) puis placez vos étiquettes tous les deux dans un axe et tous les autres décalés d'un dans l'autre axe x (ou tous les tiers selon la durée de vos étiquettes).

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

Notez les deux || pour une étiquette vide entre. De cette façon, sur votre graphique, les étiquettes désactivent les axes et vous avez un peu plus d'espace:

Answer 4

Ceci est un peu un ancien thread. mais je cherchais moi-même et suis tombé sur ce ...

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

Rechercher: hAxis.slantedTextAngle et hAxis.slantedText. Réglez votre angle à 90 pour l'affichage vertical (ou n'importe quoi entre les deux pour une inclinaison).

Answer 5

Il est maintenant possible

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

Answer 6

Ajouter des options de paramètres avec slantedtextangle: 90 degrés pour montrer l'étiquette verticalement

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

Answer 7

Oui!

Définissez hAxis.slantedText sur true, puis définissez hAxis.slantedTextAngle = 90. Comme si ...

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

L'astuce est dans la chartArea.height = 300 et chartArea.top = 100, hauteur: 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

Texte Diagonal ici. C'est ma façon de le faire, j'espère que ça va les aider.

https://jsfiddle.net/8tvm9qk5/

Le code:

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

et

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