étiquettes verticales avec API graphiques google?

Question

Quelqu'un sait comment arriver à être vertical avec API graphiques google étiquettes x-axe?

Je dois adapter beaucoup d'étiquettes dans un petit tableau.

Merci

Answer 1

L'API ne fournit pas de toute façon d'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

Pourrait essayer quelque chose comme les cartes Dundas si vous avez besoin de plus de contrôle

Answer 2

Ajout d'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 3

est un peu un vieux fil. 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 quoi que ce soit entre les deux pour une pente).

Answer 4

Il est maintenant possible

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

Answer 5

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 axe x d'origine a la même appliquée) puis définissez vos étiquettes tous les autres dans un axe et tout autre compensé par un dans l'autre axe x (ou tous les trois en fonction de la durée de vos étiquettes sont ).

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

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

Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta

Answer 6

Texte Diagonal ici. Ceci est ma façon de le faire, je l'espère 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);
    }

Answer 7

J'ai pas trouver un moyen de faire tourner l'axe, mais, ce que je l'ai fait est écourter les étiquettes puis créer une légende pour expliquer ce que les étiquettes représentent en fait.

Cliquez sur ici pour un échantillon graphique Google.

Answer 8

Oui!

Set hAxis.slantedText 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 9

Le tour 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'
    }
  };