web-dev-qa-db-fra.com

Étiquettes verticales avec API Google Maps?

Quelqu'un sait-il comment obtenir des étiquettes verticales sur l'axe des x avec l'API Google Maps?

J'ai besoin de ranger beaucoup d'étiquettes dans un petit tableau.

Merci

apichartsgraphgoogle-visualization
24
Tony

L'API ne fournit pas de toute façon pour obtenir des étiquettes d'axe X verticle (sauf si je l'ai raté car j'en ai besoin aussi) ce que nous avons fait était une combinaison d'étiquettes de points de données et d'étiquettes d'axe X régulières - pas parfait mais fonctionne

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

0
braindice

Ajouter des options de paramètre avec un angle de texte incliné: 90 degrés pour afficher l'étiquette verticalement

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

c'est un peu un vieux fil. mais je le cherchais moi-même et je suis tombé sur ça ...

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

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

17
clarson

C'est possible maintenant

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

Texte diagonal ici. C'est ma façon de le faire, j'espère que cela les aidera.

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);
    }
11
Gonzalo Del Carpio

Vous pouvez également contourner ce problème en ajoutant un axe x:

chxt=x,y

pourrait changer en:

chxt=x,y,x

(Assurez-vous que tout ce que vous avez fait sur votre axe x d'origine a la même application), puis définissez vos étiquettes tous les deux dans un axe et tous les autres décalés de un dans l'autre axe x (ou tous les trois selon la longueur 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:

Alpha    Gamma    Epsilon    Eta
    Beta      Delta      Zeta
11
xbakesx

Je n'ai pas trouvé un moyen de faire pivoter l'axe, cependant, ce que j'ai fait est de raccourcir les étiquettes puis de créer une légende pour expliquer ce que le les étiquettes représentent réellement.

Cliquez sur ici pour un exemple de graphique Google.

3
Zac

Oui!

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

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",

    });
3
Jason

L'astuce est dans le 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'
    }
  };
2
Gonzalo Del Carpio