Personalizzazione degli assi

  1. Panoramica
  2. Terminologia
  3. Discreta e continua
  4. Scala dell'asse
  5. Formati numeri

Panoramica

Le dimensioni nei dati sono spesso visualizzate sugli assi, orizzontali e verticali. È il caso dei seguenti: grafico ad area, grafico a barre, grafico a candele, grafico a colonne, grafico combinato, grafico a linee, grafico ad area e grafico a dispersione.

Quando crei un grafico con gli assi, puoi personalizzarne alcune proprietà:

  • Discreta e continua
  • Direzione: puoi personalizzare la direzione utilizzando l'opzione hAxis/vAxis.direction.
  • Stile e posizionamento delle etichette: puoi personalizzare il posizionamento e lo stile delle etichette utilizzando le opzioni hAxis/vAxis.textPosition e hAxis/vAxis.textStyle.
  • Stile e testo del titolo dell'asse: puoi personalizzare lo stile e il testo del titolo dell'asse utilizzando le opzioni hAxis/vAxis.title e hAxis/vAxis.titleTextStyle.
  • Scala dell'asse: puoi impostare la scala di un asse sulla scala logaritmica (log) utilizzando le opzioni hAxis/vAxis.logScale o hAxis/vAxis.scaleType.
  • Per un elenco completo delle opzioni di configurazione degli assi, consulta le opzioni relative a hAxis e vAxis nella documentazione del tuo grafico specifico.

Terminologia

Asse principale/minore:

  • L'asse principale è l'asse lungo l'orientamento naturale del grafico. Per i grafici a linee, ad area, a colonne, combinati, ad passi e a candele, si tratta dell'asse orizzontale. Per i grafici a barre è quella verticale. I grafici a dispersione e a torta non hanno un asse principale.
  • L'asse minore è l'altro asse.

Asse discreto/continuo:

  • Un asse discreto ha un numero limitato di valori equidistanti, chiamati categorie.
  • Un asse continuo ha un numero infinito di valori possibili.

Discreta e continua

L'asse principale di un grafico può essere discreto o continuo. Quando utilizzi un asse discreto, i punti dati di ogni serie sono equamente distanziati tra loro sull'asse, in base all'indice della riga corrispondente. Quando utilizzi un asse continuo, i punti dati vengono posizionati in base al loro valore di dominio.

Anche l'etichettatura è diversa. In un asse discreto, i nomi delle categorie (specificate nella colonna di dominio dei dati) sono utilizzati come etichette. In un asse continuo, le etichette vengono generate automaticamente: il grafico mostra le linee della griglia a spaziatura uniforme, in cui ogni riga è etichettata in base al valore che rappresenta.

I seguenti assi sono sempre continui:

  • Entrambi gli assi dei grafici a bolle.
  • L'asse secondario.

Nei grafici a linee, ad area, a barre, a colonne e a candela (e grafici combinati contenenti solo tali serie), puoi controllare il tipo di asse principale:

  • Per un asse discreto, imposta il tipo di colonna di dati su string.
  • Per un asse continuo, imposta il tipo di colonna di dati su number, date, datetime o timeofday.
Discreta / continua Tipo di prima colonna Esempio
Contenuti discreti string
Continua number
Continua date

Scala dell'asse

Puoi impostare la scala di un asse utilizzando l'opzione scaleType. Ad esempio, per impostare la scala dell'asse verticale per la registrazione del log, utilizza la seguente opzione:

  vAxis: {
        scaleType: 'log'
  }

Il seguente grafico a linee mostra la crescita della popolazione mondiale sia su scala lineare (standard) che su scala logaritmica.

Formati numerici

Puoi controllare la formattazione dei numeri delle etichette con hAxis.format e vAxis.format. Ad esempio, {hAxis: { format:'#,###%'} } mostra i valori "1000%", "750%" e "50%" per i valori 10, 7,5 e 0,5. Puoi anche fornire una delle seguenti preimpostazioni:

  • {format: 'none'}: visualizza i numeri senza formattazione (ad es. 800.000
  • {format: 'decimal'}: mostra i numeri con separatori di migliaia (ad es. 8.000.000)
  • {format: 'scientific'}: mostra i numeri in notazione scientifica (ad es. 8e6).
  • {format: 'currency'}: mostra i numeri nella valuta locale (ad es. 8.000.000.00 $)
  • {format: 'percent'}: mostra i numeri in percentuale (ad esempio 800.000.000%)
  • {format: 'short'}: visualizza i numeri abbreviati (ad es. 8 milioni)
  • {format: 'long'}: mostra i numeri sotto forma di parole intere (ad esempio 8 milioni)

Nel grafico che segue puoi scegliere tra le preimpostazioni:

Segue la pagina web completa del grafico sopra.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

Quando utilizzi un formato che utilizza testo (ad esempio, il formato long, che restituirà 8.000.000 come "8 milioni"), puoi localizzare le stringhe in altre lingue specificando un codice lingua quando carichi la libreria di Google Tables. Ad esempio, per cambiare "8 milioni" in russo "8 миллиона", chiama la libreria in questo modo:

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>