2009-04-24 6 views
17

Qualcuno sa come ottenere le etichette dell'asse X per essere verticale con l'API di Google Maps?Etichette verticali con API di Google Maps?

Ho bisogno di inserire molte etichette in una piccola tabella.

Grazie

+0

'slantedText: vero,' 'slantedTextAngle: 90,' –

risposta

1

L'API non fornisce in ogni caso per ottenere verticle etichette di asse x (a meno che ho perso perché ho bisogno di troppo) quello che abbiamo fatto è stata una combinazione di etichette dei punti Datapoint e regolari etichette di asse x - non perfetto, ma funziona

potrebbe provare qualcosa di simile grafici Dundas se avete bisogno di un maggiore controllo

+0

si può specificare la rotazione di un'etichetta punto di dati ? hai un URL di esempio che puoi pubblicare? Grazie! – Tony

+0

No, non c'è nulla che abbia mai trovato per ruotare nessuna delle etichette – braindice

+1

per lo scopo del visualizzatore, ora è disponibile, vedere risposte Morey. – CaffeineShots

3

ho non trovare un modo per ruotare l'asse, però, quello che ho fatto è accorciare le etichette e poi creare una legenda per spiegare cosa rappresentano effettivamente le etichette.

Fare clic su here per un grafico di esempio di Google.

10

Un altro modo possibile è possibile "risolvere" questo problema è quello di aggiungere un asse x:

chxt=x,y 

potrebbe cambiare a:

chxt=x,y,x 

(Assicurati di qualcosa che hai fatto al tuo x originale l'asse ha lo stesso valore applicato) quindi imposta le etichette una sull'altra in un asse e ogni altra sfalsata di una nell'altra asse x (o ogni tre in base alla lunghezza delle etichette).

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

Nota i due || per un'etichetta vuota tra. In questo modo sul tuo grafico le etichette disattivano gli assi e hai un po 'più di spazio:

Alpha Gamma Epsilon Eta 
    Beta  Delta  Zeta 
+0

E 'possibile utilizzare l'API di visualizzazione di google ??? – vs4vijay

11

E 'possibile ora

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

Aggiungere opzioni dei parametri con slantedtextangle: 90 gradi per mostrare un'etichetta verticale

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

direzione -1 non è correlato e inversione dell'asse h – Somatik

+0

Grazie per questa soluzione ma Qualche idea su come avvolgere il testo .. nel mio caso è grande. – Jaikrat

+1

Per le etichette inclinate: hAxis: {slantedText: true, slantedTextAngle: 45}, –

3

Sì!

Impostare hAxis.slantedText su true e quindi impostare hAxis.slantedTextAngle = 90. Come così ...

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

    }); 
2

Il trucco è nel chartArea.height = 300 e chartArea.top = 100, height: 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' 
    } 
    }; 
7

Diagonal testo qui. Questo è il mio modo di farlo, spero che possa aiutarli.

https://jsfiddle.net/8tvm9qk5/

Il codice:

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

e

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