Personalizzazione degli assi

  1. Panoramica
  2. Terminologia
  3. Discreto e continuo
  4. Scala dell'asse
  5. Formati numerici

Panoramica

Le dimensioni nei dati sono spesso visualizzate sugli assi, orizzontali e verticali. Questo è il caso di: Grafico ad area, Grafico a barre, Grafico a candele, Grafico a colonne, Grafico combinato, Grafico a linee, Grafico ad area con rientri e Grafico a dispersione.

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

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

Terminologia

Asse maggiore/minore:

  • L'asse maggiore è l'asse lungo l'orientamento naturale del grafico. Per i grafici a linee, ad area, a colonne, combinati, ad area con rientri e a candele, questo è l'asse orizzontale. Per un grafico a barre è quello verticale. I grafici a dispersione e a torta non hanno un asse principale.
  • L'asse minore è l'altro asse.

Asse discreto/continua:

  • Un asse discreto ha un numero finito di valori a spaziatura uniforme, chiamati categorie.
  • Un asse continua ha un numero infinito di valori possibili.

Discreto e continuo

L'asse principale di un grafico può essere discreto o continuo. Quando utilizzi un asse discreto, i punti dati di ogni serie sono distribuiti uniformemente sull'asse, in base al relativo indice di riga. Quando si utilizza un asse continuo, i punti dati vengono posizionati in base al valore del dominio.

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

I seguenti assi sono sempre continui:

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

Nei grafici a linee, ad area, a barre, a colonne e a candele (e nei 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 uno dei seguenti: number, date, datetime o timeofday.
Discreto / continua Tipo di prima colonna Esempio
Discreto stringa
Continuo numero
Continuo date

Scala dell'asse

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

  vAxis: {
        scaleType: 'log'
  }

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

Se i dati contengono valori zero o negativi, puoi tracciare i punti utilizzando l'opzione scaleType: 'mirrorLog'. Nel mirroring della scala logaritmica, il valore tracciato di un numero negativo è meno il logaritmo del valore assoluto del numero. I valori vicini a 0 sono tracciati su una scala lineare.

L'esempio seguente mostra i numeri di Fibonacci positivi e negativi tracciati sia nella scala logaritmica speculare che nella scala lineare.

[1.0.10-grav-to-to-type-to-toly, Chart-0. [1-to-not-to] ,

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 uno dei seguenti valori preimpostati:

  • {format: 'none'}: visualizza i numeri senza formattazione (ad es. 8000000)
  • {format: 'decimal'}: mostra i numeri con separatori delle migliaia (ad es. 8.000.000)
  • {format: 'scientific'}: visualizza i numeri in notazione scientifica (ad es. 8e6)
  • {format: 'currency'}: mostra numeri nella valuta locale (ad es. 8.000.000,00 $)
  • {format: 'percent'}: visualizza i numeri in percentuale (ad es. 800.000.000%)
  • {format: 'short'}: mostra numeri abbreviati (ad es. 8 Mln)
  • {format: 'long'}: visualizza i numeri come parole complete (ad es. 8 milioni)

Nel grafico seguente, puoi scegliere tra le preimpostazioni:

Segue una pagina web completa per il grafico riportato 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 include testo (ad es. il formato long, che visualizzerà 8.000.000 di unità come "8 milioni", puoi localizzare le stringhe in altre lingue specificando un codice lingua quando carichi la libreria di Google Classifiche). Ad esempio, per cambiare "8 million" con il 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>