Grafici a barre

Panoramica

I grafici a barre Google vengono visualizzati nel browser utilizzando SVG o VML, a seconda di quale sia appropriato per il browser dell'utente. Come per tutti i grafici Google, i grafici a barre mostrano le descrizioni comando quando l'utente passa il mouse sopra i dati. Per una versione verticale di questo grafico, consulta il grafico a colonne.

Esempi

Barre da colorare

Tracciamo la densità di quattro metalli preziosi:

Sopra, tutti i colori sono il blu predefinito. Questo perché fanno tutti parte della stessa serie; se ci fosse una seconda serie, questo dovrebbe essere di colore rosso. Possiamo personalizzare questi colori con il ruolo di stile:

Esistono tre modi diversi per scegliere i colori e la nostra tabella dei dati li mostra tutti: valori RGB, nomi dei colori inglesi e una dichiarazione simile a CSS:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],
         ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Stili barra

Il ruolo di stile consente di controllare diversi aspetti dell'aspetto della barra con dichiarazioni di tipo CSS:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

Sconsigliamo di combinare gli stili troppo liberamente in un grafico, scegliere uno stile e rispettarlo; tuttavia, per dimostrare tutti gli attributi di stile, ecco un'anteprima:

Le prime due barre utilizzano ciascuna una proprietà color specifica (la prima con un nome in inglese, la seconda con un valore RGB). Non è stato scelto alcun elemento opacity, pertanto viene utilizzato il valore predefinito 1.0 (completamente opaco); per questo motivo, la seconda barra oscura la griglia. Nella terza barra viene utilizzato opacity di 0, 2, rivelando la linea della griglia. Nella quarta barra vengono utilizzati tre attributi di stile: stroke-color e stroke-width per disegnare il bordo, mentre fill-color per specificare il colore del rettangolo all'interno. La barra più a destra utilizza inoltre stroke-opacity e fill-opacity per scegliere le opacità per il bordo e riempire:

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Barre di etichettatura

Nei grafici sono disponibili diversi tipi di etichette, ad esempio etichette di graduazioni, etichette di legenda ed etichette. In questa sezione, vedremo come inserire le etichette all'interno (o in prossimità) delle barre di un grafico a barre.

Supponiamo di voler annotare ogni barra con il simbolo chimico appropriato. Possiamo farlo con il ruolo annotazione:

Nella tabella dei dati, definiamo una nuova colonna contenente { role: 'annotation' } per contenere le etichette delle barre:

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Gli utenti possono passare il mouse sopra le barre per visualizzare i valori dei dati, ma potresti voler includerle nelle barre stesse:

La procedura è un po' più complicata di quella che dovrebbe essere, perché creiamo un DataView per specificare l'annotazione per ogni barra.

  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>

Se volessimo formattare il valore in modo diverso, potremmo definire un formatore e includerlo in una funzione come la seguente: 

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Quindi potremmo chiamarlo calc: getValueAt.bind(undefined, 1).

Se l'etichetta è troppo grande per rientrare interamente nella barra, viene visualizzata all'esterno:

Grafici a barre in pila

Un grafico a barre in pila è un grafico a barre che posiziona i valori correlati uno sopra l'altro. Se ci sono valori negativi, vengono posizionati in ordine inverso rispetto alla base dell'asse del grafico. I grafici a barre in pila vengono generalmente utilizzati quando una categoria si divide naturalmente in componenti. Ad esempio, prendi in considerazione alcune vendite di libri ipotetiche, divise per genere e confrontate nel tempo:

Puoi creare un grafico a barre in pila impostando l'opzione isStacked su true:

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true
      };

I grafici a barre in pila supportano inoltre lo stacking al 100%, dove gli stack di elementi in corrispondenza di ogni valore di dominio vengono ridimensionati in modo da sommarsi al 100%. Le opzioni sono isStacked: 'percent', che formatta ogni valore come percentuale del 100% e isStacked: 'relative', che formatta ogni valore come frazione di 1. Esiste anche un'opzione isStacked: 'absolute', che è equivalente a isStacked: true.

Nota nel grafico in pila 100% sulla destra: i valori dei segni di graduazione sono basati sulla scala 0-1 relativa come frazioni di 1, ma i valori dell'asse vengono visualizzati in percentuale. Questo perché i segni di graduazione dell'asse percentuale sono il risultato dell'applicazione di un formato di "#.##%" ai valori relativi della scala 0-1. Quando utilizzi isStacked: 'percent', assicurati di specificare eventuali segni di graduazione utilizzando la scala 0-1 relativa.

In pila
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {minValue: 0}
        };
100% in pila
        var options_fullStacked = {
          isStacked: 'percent',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          hAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };

Creare grafici a barre dei materiali

Nel 2014, Google ha annunciato linee guida pensate per supportare un aspetto comune nelle sue proprietà e app (come le app Android) che vengono eseguite sulle piattaforme Google. Chiamiamo questo lavoro Material Design. Forniremo le versioni "Material" di tutte le nostre classifiche principali; ti invitiamo a utilizzarle se ti piace.

La creazione di un grafico a barre dei materiali è simile a quella che chiamiamo grafico a barre "classico". Carichi l'API Visualizzazione Google (anche se con il pacchetto 'bar' invece del pacchetto 'corechart'), definisci la tua tabella di dati e poi crea un oggetto (ma di classe google.charts.Bar invece di google.visualization.BarChart).

Nota: i grafici dei materiali non funzionano nelle versioni precedenti di Internet Explorer. (IE8 e le versioni precedenti non supportano il file SVG, richiesto dai grafici materiali).

I grafici a barre dei materiali presentano molti piccoli miglioramenti rispetto ai grafici a barre classici, che includono una tavolozza dei colori migliorata, angoli arrotondati, formattazione più chiara delle etichette, spaziatura predefinita più ristretta tra le serie, righe e titoli più deboli (e l'aggiunta di sottotitoli).

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses', 'Profit'],
          ['2014', 1000, 400, 200],
          ['2015', 1170, 460, 250],
          ['2016', 660, 1120, 300],
          ['2017', 1030, 540, 350]
        ]);

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          },
          bars: 'horizontal' // Required for Material Bar Charts.
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

I grafici dei materiali sono in beta. L'aspetto e l'interattività sono in gran parte definitivi, ma molte delle opzioni disponibili nei grafici classici non sono ancora disponibili al loro interno. Puoi trovare un elenco delle opzioni non ancora supportate in questo problema.

Inoltre, il modo in cui vengono dichiarate le opzioni non è definitivo; pertanto, se utilizzi una delle opzioni della versione classica, devi convertirle in opzioni dei materiali sostituendo questa riga:

chart.draw(data, options);

...con questo:

chart.draw(data, google.charts.Bar.convertOptions(options));

L'utilizzo di google.charts.Bar.convertOptions() ti consente di sfruttare alcune funzionalità, come le opzioni preimpostate di hAxis/vAxis.format.

Grafici dual-X

Nota: gli assi dual-X sono disponibili solo per i grafici dei materiali, ovvero quelli con il pacchetto bar.

A volte potresti voler visualizzare due serie in un grafico a barre, con due assi X indipendenti: un asse superiore per una serie e un asse inferiore per un'altra:

Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { larghezza: 800, grafico: { title: 'Galassie vicine', subtitle: 'distanza a sinistra, luminosità a destra' } bar} serie: { 0: { asse: 'distance' }, // Associa serie 0 a un asse denominato 'distance'. 1: { asse: 'brightness' } // associare la serie 1 a un asse denominato 'brightness'. }, assi: { x: { distanze: {label: 'parsecs'}, // asse x inferiore. luminosità: {side: 'top', label: 'apparent magnitude'} // Asse X superiore. } }}}};

Tenete presente che non solo i nostri due assi x hanno un'etichetta diversa ("parsecs" rispetto a "magnitudo apparente"), ma hanno ognuno scale e linee di griglia indipendenti. Se vuoi personalizzare questo comportamento, utilizza le opzioni hAxis.gridlines.

Nel codice seguente, le opzioni axes e series specificano insieme l'aspetto della doppia X del grafico. L'opzione series specifica quale asse utilizzare per ciascuno ('distance' e 'brightness'; non hanno alcuna relazione con i nomi delle colonne nella tabella di dati). L'opzione axes rende quindi questo grafico un doppio grafico, posizionando l'asse 'apparent magnitude' in alto e l'asse 'parsecs' in basso. 

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var options = {
          width: 800,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
            }
          }
        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Grafici Top-X

Nota: gli assi Top-X sono disponibili solo per i grafici dei materiali (ovvero quelli con pacchetto bar).

Se vuoi inserire le etichette e il titolo dell'asse X nella parte superiore del grafico anziché nella parte inferiore, puoi farlo nei grafici Materiale con l'opzione axes.x: