Visualizzazione: grafico a colonne

Panoramica

Un grafico a colonne è un grafico a barre verticali visualizzato nel browser che utilizza SVG o VML, a seconda di quale sia appropriato per il browser dell'utente. Come per tutti i grafici di Google, i grafici a colonne mostrano le descrizioni comando quando l'utente passa il mouse sopra i dati. Per una versione orizzontale di questo grafico, consulta il grafico a barre.

Esempi

Colori delle colonne

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 colonna

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

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

Sconsigliamo di combinare troppo gli stili in un grafico: scegline uno e seguili, ma per dimostrare tutti gli attributi di stile, ecco un'anteprima:

Le prime due colonne utilizzano un color specifico (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). Ecco perché la seconda colonna oscura la linea della griglia sottostante. Nella terza colonna, viene utilizzato opacity di 0,2, rivelando la linea della griglia. Nel quarto sistema 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 colonna 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']
      ]);

Etichettare le colonne

I grafici hanno diversi tipi di etichette, ad esempio etichette di selezione, etichette di legenda ed etichette nelle descrizioni comando. In questa sezione, vedremo come inserire le etichette all'interno (o in prossimità) delle colonne di un grafico a colonne.

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

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

       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 colonne per visualizzare i valori dei dati, ma ti consigliamo di includerle nelle colonne stesse:

Questa operazione è un po' più complessa di quanto dovrebbe, perché creiamo un elemento DataView per specificare l'annotazione per ogni colonna.

  <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(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.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_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 colonna, viene visualizzata all'esterno:

Grafici a colonne in pila

Un grafico a colonne in pila è un grafico a colonne che posiziona i valori correlati uno sopra l'altro. Eventuali valori negativi vengono impilati in ordine inverso rispetto alla base di riferimento del grafico. Viene in genere utilizzata 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 colonne 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 colonne in pila supportano inoltre lo stacking al 100%, dove gli stack di elementi in ciascun 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 valori di segni di graduazione/asse utilizzando la scala 0-1 relativa.

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

Creare grafici a colonne 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 colonne materiali è simile a quella che chiamiamo grafico a colonne "classico". Carichi l'API Visualizzazione Google (anche se con il pacchetto 'bar' invece del pacchetto 'corechart'), definisci la tua tabella dati e poi crea un oggetto (ma di classe google.charts.Bar invece di google.visualization.ColumnChart).

Poiché i grafici a barre e a colonne sono sostanzialmente identici ma per orientamento, li chiamiamo entrambi Grafici a barre dei materiali, indipendentemente dal fatto che le barre siano verticali (classicamente un grafico a colonne) o orizzontali (un grafico a barre). In Material, l'unica differenza è nell'opzione bars. Se impostata su 'horizontal', l'orientamento sarà simile al grafico a barre classico tradizionale; in caso contrario, le barre saranno verticali.

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 colonne materiali presentano molti piccoli miglioramenti rispetto ai grafici a colonne classici, tra cui una tavolozza dei colori migliorata, gli angoli arrotondati, una formattazione più chiara delle etichette, una spaziatura predefinita più ristretta tra le serie, titoli e linee della griglia più morbidi (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',
          }
        };

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

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; 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 qualsiasi delle opzioni classiche, devi convertire le opzioni in 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 a doppia Y

A volte potresti voler visualizzare due serie in un grafico a colonne, con due assi Y indipendenti: un asse sinistro per una serie e un asse destro per un'altra:

Tenete presente che non solo i nostri due assi Y sono etichettati in modo diverso ("parsecs" rispetto a "magnitudo apparente"), ma hanno ognuno scale e linee di griglia indipendenti. Se vuoi personalizzare questo comportamento, utilizza le opzioni vAxis.gridlines.

Nel codice seguente, le opzioni axes e series specificano insieme l'aspetto a doppia Y 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 grafico a doppia Y, posizionando l'asse 'distance' a sinistra (con etichetta "parsecs") e l'asse 'brightness' a destra (con etichetta "apparenza di grandezza").

<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', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = 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 materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; 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:

<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([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

Caricamento

Il nome del pacchetto google.charts.load è "corechart". Il nome della classe della visualizzazione è google.visualization.ColumnChart.

  google.charts.load("current", {packages: ["corechart"]});
  var visualization = new google.visualization.ColumnChart(container);

Per i grafici a colonne materiali, il nome del pacchetto google.charts.load è "bar". Non è un errore di battitura: il grafico a barre dei materiali gestisce entrambi gli orientamenti. Il nome della classe della visualizzazione è google.charts.Bar. Non è un errore di battitura: il grafico a barre dei materiali gestisce entrambi gli orientamenti.

  google.charts.load("current", {packages: ["bar"]});
  var chart = new google.charts.Bar(container);

Formato dei dati

Ogni riga della tabella rappresenta un gruppo di barre adiacenti.

Righe:ogni riga nella tabella rappresenta un gruppo di barre.

Colonne:

  Colonna 0 Colonna 1 Colonna N
Finalità: Valori della barra 1 in questo gruppo Valori della barra N in questo gruppo
Tipo di dati: number number
Ruolo: dominio dati dati
Ruoli di colonna facoltativi:

 

Opzioni di configurazione

Nome
animazione.durata

La durata dell'animazione espressa in millisecondi. Per maggiori dettagli, consulta la documentazione relativa all'animazione.

Tipo: numero
Predefinito: 0
animazione.Misure

La funzione di adattamento applicata all'animazione. Sono disponibili le seguenti opzioni:

  • "lineare": la velocità costante.
  • 'in' - Facilità in - Inizia lentamente e accelera.
  • 'out' - Facilità di uscita - Inizia velocemente e rallenta.
  • "inAndOut" - Facilità di entrata e uscita: avvia lentamente, accelera e poi rallenta.
Tipo: stringa
Predefinito: "lineare"
animazione.avvio

Determina se il grafico verrà animato durante il disegno iniziale. Se true, il grafico inizierà dal valore basale e eseguirà l'animazione fino allo stato finale.

Tipo: booleano
Predefinito falso
annotazioni.sempreEsterno

Nei grafici a bar e a colonna, se è impostata su true, vengono tracciate tutte le annotazioni al di fuori della barra/colonna.

Tipo: booleano
Predefinito: falso
annot.boxStyle

Per i grafici che supportano le annotazioni, l'oggetto annotations.boxStyle controlla l'aspetto delle caselle che circondano le annotazioni:

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};
    

Questa opzione è attualmente supportata per i grafici ad area, a barre, a colonne, combinati, a linee e a dispersione. Non è supportato dal grafico delle annotazioni.

Tipo: oggetto
Predefinito: null
annotazioni.datum
Per i grafici che supportano le annotazioni, l'oggetto annotations.datum ti consente di sostituire la scelta di Google Tables per le annotazioni fornite per i singoli elementi di dati (ad esempio, i valori visualizzati con ogni barra su un grafico a barre). Puoi controllare il colore con annotations.datum.stem.color, la lunghezza dello stelo con annotations.datum.stem.length e lo stile con annotations.datum.style.
Tipo: oggetto
Predefinito: il colore è "nero"; la lunghezza è 12; lo stile è "punto".
annotazioni.dominio
Per i grafici che supportano le annotazioni, l'oggetto annotations.domain consente di sostituire la scelta di Google Tables per le annotazioni fornite per un dominio (l'asse principale del grafico, come l'asse X su un grafico a linee tipico). Puoi controllare il colore con annotations.domain.stem.color, la lunghezza dello stelo con annotations.domain.stem.length e lo stile con annotations.domain.style.
Tipo: oggetto
Predefinito: il colore è "nero"; la lunghezza è 5; lo stile è "punto".
annotazioni.alto contrasto
Per i grafici che supportano le annotazioni, il valore booleano annotations.highContrast consente di sostituire la scelta del colore dell'annotazione in Google grafici. Per impostazione predefinita, annotations.highContrast è true, consentendo ai grafici di selezionare un colore dell'annotazione con un buon contrasto: colori chiari su sfondi scuri e scuri sulla luce. Se imposti annotations.highContrast su false e non specifichi il colore dell'annotazione, Google Tables utilizza il colore predefinito della serie per l'annotazione:
Tipo: booleano
Predefinito: true
annotazioni.stem
Per i grafici che supportano le annotazioni, l'oggetto annotations.stem ti consente di sostituire la scelta di Google Class per lo stile della radice. Puoi controllare il colore con annotations.stem.color e la lunghezza dello stelo con annotations.stem.length. Tieni presente che l'opzione relativa alla lunghezza dello stelo non ha alcun effetto sulle annotazioni con stile 'line': per le annotazioni con origine 'line', la lunghezza dello stelo è sempre la stessa del testo e, per le annotazioni del dominio 'line', si estende su tutto il grafico.
Tipo: oggetto
Valore predefinito: il colore è "nero"; la lunghezza è 5 per le annotazioni di dominio e 12 per le annotazioni di riferimento.
annotazioni.style
Per i grafici che supportano le annotazioni, l'opzione annotations.style consente di ignorare la scelta del tipo di annotazione in Google Tables. Può essere 'line' o 'point'.
Tipo: stringa
Predefinito: "point"
annotazioni.textStyle
Per i grafici che supportano le annotazioni, l'oggetto annotations.textStyle controlla l'aspetto del testo dell'annotazione:
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};
    

Questa opzione è attualmente supportata per i grafici ad area, a barre, a colonne, combinati, a linee e a dispersione. Non è supportato dal grafico delle annotazioni .

Tipo: oggetto
Predefinito: null
posizione vari titoli

Dove posizionare i titoli degli assi rispetto all'area del grafico. Valori supportati:

  • in - Disegna i titoli degli assi all'interno dell'area del grafico.
  • out - Disegna i titoli degli assi al di fuori dell'area del grafico.
  • none: ometti i titoli degli assi.
Tipo: stringa
Predefinito: "out"
coloredisfondo

Il colore dello sfondo dell'area principale del grafico. Può essere una semplice stringa di colore HTML, ad esempio 'red' o '#00cc00' oppure un oggetto con le seguenti proprietà.

Tipo: stringa o oggetto
Predefinito: "bianco"
coloreColore sfondo

Il colore del bordo del grafico, come stringa di colore HTML.

Tipo: stringa
Predefinito: "#666"
sfondoColore.LarghezzaLarghezza

La larghezza del bordo, in pixel.

Tipo: numero
Predefinito: 0
sfondocolore.fill

Il colore di riempimento del grafico, come stringa del colore HTML.

Tipo: stringa
Predefinito: "bianco"
Larghezza bar.group
La larghezza di un gruppo di barre, specificato in uno dei seguenti formati:
  • Pixel (ad es. 50)
  • La percentuale della larghezza disponibile per ciascun gruppo (ad esempio "20%"), dove "100%" indica che i gruppi non hanno uno spazio tra un gruppo e l'altro.
Tipo: numero o stringa
Predefinito: il rapporto d'oro, circa "61,8%".
bar

Indica se le barre in un materialegrafico a barre sono verticali o orizzontali. Questa opzione non ha effetto sui grafici a barre classici o sulle colonne classiche.

Tipo: "orizzontale" o "verticale"
Predefinito: "verticale"
area grafico

Un oggetto con membri per configurare il posizionamento e le dimensioni dell'area del grafico (dove viene tracciato il grafico stesso, escludendo l'asse e le legende). Sono supportati due formati: un numero o un seguito da %. Un numero semplice è un valore in pixel; un numero seguito da % è una percentuale. Esempio: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Tipo: oggetto
Predefinito: null
graficoArea.Sfondo Colore
Colore sfondo area grafico. Una stringa utilizzata può essere una stringa esadecimale (ad es. "#fdc") o un nome di colore inglese. Quando si utilizza un oggetto, è possibile fornire le seguenti proprietà:
  • stroke: il colore, fornito come stringa esadecimale o nome di colore inglese.
  • strokeWidth: se fornito, disegna un bordo intorno all'area del grafico della larghezza specificata (e con il colore di stroke).
Tipo: stringa o oggetto
Predefinito: "bianco"
chartArea.left

La distanza desiderata dal bordo sinistro.

Tipo: numero o stringa
Predefinito: automatica
chartArea.top

La distanza da cui tracciare il grafico dal bordo superiore.

Tipo: numero o stringa
Predefinito: automatica
graficoarea.larghezza

Larghezza area grafico.

Tipo: numero o stringa
Predefinito: automatica
graficoArea.altezza

Altezza area grafico.

Tipo: numero o stringa
Predefinito: automatica
grafico.sottotitolo

Per Grafici material, questa opzione specifica il sottotitolo. Solo i grafici Material supportano i sottotitoli.

Tipo: stringa
Predefinito: null
titolo_grafico

Per i grafici materiale, questa opzione specifica il titolo.

Tipo: stringa
Predefinito: null
colori

I colori da utilizzare per gli elementi del grafico. Un array di stringhe, dove ogni elemento è una stringa di colore HTML, ad esempio colors:['red','#004411'].

Tipo: matrice di stringhe
Predefinito: colori predefiniti
Opacità dati

La trasparenza dei punti dati, con 1,0 completamente opaco e 0,0 completamente trasparente. Nei grafici a dispersione, a istogrammi, a barre e a colonne, fanno riferimento ai dati visibili: punti nel grafico a dispersione e rettangoli negli altri. Nei grafici in cui la selezione dei dati crea un punto, ad esempio i grafici a linee e ad area, si riferisce ai cerchi che vengono visualizzati al passaggio del mouse o alla selezione. Il grafico combinato mostra entrambi i comportamenti e questa opzione non ha alcun effetto su altri grafici. Per modificare l'opacità di una linea di tendenza, consulta opacità della linea di tendenza .

Tipo: numero
Predefinito: 1,0
EnableInteractivity

Indica se il grafico genera eventi basati sugli utenti o reagisce alle interazioni degli utenti. Se il valore è false, il grafico non mostrerà "seleziona" o altri eventi basati sulle interazioni (ma verrà generato eventi di errore o pronti) e non mostrerà il testo al passaggio del mouse o non cambierà in base all'input dell'utente.

Tipo: booleano
Predefinito: true
explorer

L'opzione explorer consente agli utenti di eseguire panoramica e zoom dei grafici Google. explorer: {} fornisce il comportamento predefinito di Esplorazione, consentendo agli utenti di eseguire una panoramica orizzontalmente e verticalmente tramite trascinamento e per aumentare o diminuire lo zoom scorrendo.

Questa funzionalità è sperimentale e potrebbe cambiare nelle release future.

Nota: l'Explorer funziona solo con assi continui, come numeri o date.

Tipo: oggetto
Predefinito: null
explorer.actions

Lo strumento Esplorazione grafici di Google supporta tre azioni:

  • dragToPan: trascina il grafico per spostarti in orizzontale e in verticale. Per eseguire la panoramica solo lungo l'asse orizzontale, utilizza explorer: { axis: 'horizontal' }. Analogamente per l'asse verticale.
  • dragToZoom: per impostazione predefinita l'explorer è aumentare e diminuire lo zoom quando l'utente scorre la pagina. Se explorer: { actions: ['dragToZoom', 'rightClickToReset'] } viene utilizzato, il trascinamento su un'area rettangolare aumenta lo zoom su quell'area. Consigliamo di utilizzare rightClickToReset ogni volta che dragToZoom viene utilizzato. Visualizza explorer.maxZoomIn, explorer.maxZoomOut e explorer.zoomDelta per personalizzazioni dello zoom.
  • rightClickToReset: facendo clic con il tasto destro del mouse sul grafico, torni al livello di panoramica e zoom originale.
Tipo: matrice di stringhe
Predefinito: ['dragToPan', 'rightClickToReset']
explorer.asse

Per impostazione predefinita, gli utenti possono eseguire una panoramica sia in orizzontale sia in verticale quando viene utilizzata l'opzione explorer. Se vuoi che gli utenti eseguano la panoramica solo in orizzontale, utilizza explorer: { axis: 'horizontal' }. Analogamente, explorer: { axis: 'vertical' } consente la panoramica solo verticale.

Tipo: stringa
Predefinito:panoramica orizzontale e verticale
explorer.keepInBounds

Per impostazione predefinita, gli utenti possono eseguire una panoramica ovunque, indipendentemente da dove si trovano i dati. Per assicurarti che gli utenti non eseguano una panoramica oltre il grafico originale, utilizza explorer: { keepInBounds: true }.

Tipo: booleano
Predefinito: falso
explorer.maxZoomIn

Il massimo che l'explorer può ingrandire. Per impostazione predefinita, gli utenti potranno aumentare lo zoom a sufficienza da visualizzare solo il 25% della visualizzazione originale. L'impostazione di explorer: { maxZoomIn: .5 } consente agli utenti di aumentare lo zoom solo a un livello sufficiente a vedere la vista originale.

Tipo: numero
Predefinito: 0,25
Explorer.maxZoomOut

Il massimo che l'explorer può diminuire. Per impostazione predefinita, gli utenti potranno diminuire lo zoom a una distanza tale da occupare solo 1/4 dello spazio disponibile. L'impostazione di explorer: { maxZoomOut: 8 } consentirebbe agli utenti di diminuire lo zoom abbastanza da far sì che il grafico occupi solo 1/8 dello spazio disponibile.

Tipo: numero
Predefinito: 4
explorer.zoomDelta

Quando gli utenti aumentano o diminuiscono lo zoom, explorer.zoomDelta determina di quanto aumentare lo zoom. Più basso è il numero, più fluido e lento sarà lo zoom.

Tipo: numero
Predefinito: 1,5
focustarget

Il tipo di entità che riceve lo stato attivo al passaggio del mouse. Influisce anche sull'entità selezionata dal clic del mouse e sull'elemento della tabella dati associato agli eventi. Può essere uno dei seguenti:

  • 'datum': concentrati su un singolo punto dati. Corrisponde a una cella della tabella dati.
  • "categoria": imposta lo stato attivo su un raggruppamento di tutti i punti dati lungo l'asse principale. Corrisponde a una riga nella tabella dati.

La descrizione comando in "TargetTarget "categoria" mostra tutti i valori delle categorie. Ciò può essere utile per confrontare i valori di serie diverse.

Tipo: stringa
Predefinito: "datum"
Dimensione carattere

Le dimensioni predefinite dei caratteri, in pixel, di tutto il testo nel grafico. Puoi eseguire l'override utilizzando le proprietà per specifici elementi del grafico.

Tipo: numero
Predefinito: automatica
Nome carattere

Il tipo di carattere predefinito per tutto il testo nel grafico. Puoi eseguire l'override utilizzando le proprietà per specifici elementi del grafico.

Tipo: stringa
Predefinito: "iframe"
forceIFrame

Disegna il grafico all'interno di un frame in linea. Tieni presente che su IE8, questa opzione viene ignorata, mentre tutti i grafici IE8 vengono disegnati negli i-frame.

Tipo: booleano
Predefinito: falso
asse

Un oggetto con membri in grado di configurare vari elementi dell'asse orizzontale. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Tipo: oggetto
Predefinito: null
valore di riferimento base hAxis

La base di riferimento per l'asse orizzontale.

Questa opzione è supportata solo per un asse continuous.

Tipo: numero
Predefinito: automatica
ColoreAsse.BaselineAxi

Il colore della base di riferimento per l'asse orizzontale. Può essere qualsiasi stringa di colore HTML, ad esempio: 'red' o '#00cc00'.

Questa opzione è supportata solo per un asse continuous.

Tipo: numero
Predefinito: "nero"
hAxis.direction

La direzione in cui crescono i valori lungo l'asse orizzontale. Specifica -1 per invertire l'ordine dei valori.

Tipo: 1 o -1
Predefinito: 1
Formato hAxis.format

Una stringa di formato per le etichette numeriche o per assi data.

Per le etichette dell'asse numerico, questo è un sottoinsieme della formattazione decimale del set di pattern ICU . Ad esempio, {format:'#,###%'} mostrerà i valori "1000%", "750%" e "50%" per i valori 10, 7,5 e 0,5. Puoi anche fornire quanto segue:

  • {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'}: visualizza 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)

Per le etichette dell'asse delle date, questo è un sottoinsieme della formattazione della data Set di pattern ICU . Ad esempio, {format:'MMM d, y'} mostrerà il valore "1 luglio 2011" per la data di luglio 2011.

La formattazione effettiva applicata all'etichetta deriva dalla lingua in cui è stata caricata l'API. Per maggiori dettagli, consulta la pagina relativa al caricamento di grafici con impostazioni internazionali specifiche .

Per il calcolo dei valori tick e delle linee della griglia, verranno prese in considerazione diverse combinazioni alternative di tutte le opzioni della griglia pertinenti e le alternative verranno rifiutate se le etichette dei segni di spunta formattate sono duplicate o sovrapposte. Puoi quindi specificare format:"#" se vuoi mostrare solo valori di segno di spunta interi, ma tieni presente che se nessuna alternativa soddisfa questa condizione, non verranno mostrate linee di griglia o segni di spunta.

Questa opzione è supportata solo per un asse continuous.

Tipo: stringa
Predefinito: automatica
Linee hAxis.grid

Un oggetto con proprietà per configurare le linee della griglia sull'asse orizzontale. Tieni presente che le linee della griglia dell'asse orizzontale vengono tracciate verticalmente. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito:

{color: '#333', minSpacing: 20}

Questa opzione è supportata solo per un asse continuous.

Tipo: oggetto
Predefinito: null
hAxis.gridlines.color

Il colore delle linee della griglia orizzontale all'interno dell'area del grafico. Specifica una stringa di colore HTML valida.

Tipo: stringa
Predefinito: "#CCC"
hAxis.gridlines.count

Il numero approssimativo di linee orizzontali della griglia all'interno dell'area del grafico. Se specifichi un numero positivo per gridlines.count, questo verrà utilizzato per calcolare il minSpacing tra le linee della griglia. Puoi specificare un valore di 1 per tracciare una sola linea della griglia oppure 0 per non tracciare alcuna linea della griglia. Specifica -1, che è l'impostazione predefinita, per calcolare automaticamente il numero di linee della griglia in base ad altre opzioni.

Tipo: numero
Predefinito: -1
hAxis.gridlines.interval

Un array di dimensioni (come valori dei dati, non pixel) tra le linee della griglia adiacenti. Al momento, questa opzione è destinata solo agli assi numerici, ma è analoga alle opzioni gridlines.units.<unit>.interval utilizzate solo per date e ore. Per le scale lineari, il valore predefinito è [1, 2, 2.5, 5] il che significa che i valori della griglia possono rientrare in ogni unità (1), nelle unità pari (2) o in multipli di 2,5 o 5. Viene considerata anche la potenza di 10 volte questi valori (ad esempio [10, 20, 25, 50] e [.1, .2, .25, .5]). Per le scale di log, il valore predefinito è [1, 2, 5].

Tipo: numero compreso tra 1 e 10, escluso 10.
Predefinito: calcolato
hAxis.gridlines.minSSpaziatura

Lo spazio minimo dello schermo, in pixel, tra le linee della griglia principale di hAxis. Il valore predefinito per le linee della griglia principale è 40 per le scale lineari e 20 per le scale dei log. Se specifichi count e non minSpacing, il valore di minSpacing viene calcolato a partire dal conteggio. Al contrario, se specifichi minSpacing e non count, il conteggio viene calcolato dalla spaziatura minima. Se specifichi entrambi, viene eseguito l'override di minSpacing.

Tipo: numero
Predefinito: calcolato
hAxis.gridlines.multi

Tutti i valori della griglia e della selezione devono essere un multiplo del valore di questa opzione. A differenza degli intervalli, le potenze 10 volte il multiplo non vengono prese in considerazione. Puoi forzare l'inserimento dei tick in numeri interi specificando gridlines.multiple = 1 oppure forzarli in multipli di 1000 specificando gridlines.multiple = 1000.

Tipo: numero
Predefinito: 1
hhAxis.gridlines.units

Esegue l'override del formato predefinito per vari aspetti dei tipi di dati data/ora/ora del giorno quando utilizzato con le linee della griglia calcolate dal grafico. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi.

Il formato generale è:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Ulteriori informazioni sono disponibili in Date e ore.

Tipo: oggetto
Predefinito: null
Linee griglia hAxis.minor

Un oggetto con membri per configurare le linee della griglia minori sull'asse orizzontale, in modo simile all'opzione hAxis.gridlines.

Questa opzione è supportata solo per un asse continuous.

Tipo: oggetto
Predefinito: null
coloreAH.MinorGridlines.color

Il colore delle linee della griglia secondaria orizzontale all'interno dell'area del grafico. Specifica una stringa di colore HTML valida.

Tipo: stringa
Predefinito: una combinazione dei colori della linea di griglia e dello sfondo
hhAxis.minorGridlines.count

L'opzione minorGridlines.count è per lo più deprecata, ad eccezione della disattivazione delle linee della griglia secondaria impostando il conteggio su 0. Il numero di linee della griglia secondarie dipende completamente dall'intervallo tra le linee della griglia principali (vedi hAxis.gridlines.interval) e dallo spazio minimo richiesto (vedi hAxis.minorGridlines.minSpacing).

Tipo: numero
Predefinito: 1
hAxis.minorGridlines.interval

L'opzione minorGridlines.interval è come l'opzione dell'intervallo principale delle linee della griglia, ma l'intervallo scelto sarà sempre un divisore uniforme dell'intervallo della griglia principale. L'intervallo predefinito per le scale lineari è [1, 1.5, 2, 2.5, 5], mentre per le scale di log è [1, 2, 5].

Tipo: numero
Predefinito: 1
hAxis.minorGridlines.minSSpaziatura

Lo spazio minimo richiesto, in pixel, tra le linee della griglia secondaria adiacenti e tra le linee della griglia secondaria e principale. Il valore predefinito è 1/2 del valore di minSSpaziatura delle linee della griglia principale per le scale lineari e 1/5 del valore di spaziatura minima per le scale di log.

Tipo: numero
Predefinito:calcolato
hAxis.minorGridlines.more

Come nel caso del gridlines.multiple principale.

Tipo: numero
Predefinito: 1
hAxis.minorGridlines.units

Sostituisce il formato predefinito per vari aspetti dei tipi di dati data/ora/ora del giorno quando viene utilizzato con linee griglia secondarie calcolate. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi.

Il formato generale è:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Ulteriori informazioni sono disponibili in Date e ore.

Tipo: oggetto
Predefinito: null
Scala hAxis.log

Proprietà hAxis che rende l'asse orizzontale una scala logaritmica (richiede tutti i valori per essere positivi). Impostato su vero per sì.

Questa opzione è supportata solo per un asse continuous.

Tipo: booleano
Predefinito: falso
TipoAHAxis.scale

Proprietà hAxis che rende l'asse orizzontale una scala logaritmica. Può corrispondere a uno dei seguenti:

  • null - Non viene eseguita la scalabilità logaritmica.
  • 'log' - Scalabilità logaritmica. I valori negativi e zero non vengono tracciati. Questa opzione è uguale all'impostazione hAxis: { logscale: true }.
  • 'mirrorLog' - Scalabilità logaritmica in cui vengono tracciati valori negativi e pari a zero. Il valore tracciato di un numero negativo è il negativo del log del valore assoluto. I valori vicini a 0 vengono tracciati su una scala lineare.

Questa opzione è supportata solo per un asse continuous.

Tipo: stringa
Valore predefinito: null
hAxis.textPosition

Posizione del testo dell'asse orizzontale rispetto all'area del grafico. Valori supportati: "out", "in", "nessuno".

Tipo: stringa
Predefinito: "out"
Stile testoAxis.

Un oggetto che specifica lo stile di testo dell'asse orizzontale. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color può essere una qualsiasi stringa di colore HTML, ad esempio: 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo: oggetto
Predefinito: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

Sostituisce i segni di graduazione dell'asse X generati automaticamente con l'array specificato. Ogni elemento della matrice deve essere un valore di segno di spunta valido (ad esempio numero, data, data/ora o ora del giorno) o un oggetto. Se si tratta di un oggetto, deve avere una proprietà v per il valore tick e una proprietà f facoltativa contenente la stringa letterale da visualizzare come etichetta.

La visualizzazione di finestra verrà espansa automaticamente in modo da includere i segni di graduazione minimo e massimo a meno che non specifichi un valore viewWindow.min o viewWindow.max per la sostituzione.

Esempi:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

Questa opzione è supportata solo per un asse continuous.

Tipo: array di elementi
Predefinito: automatica
titolo.axis.

hAxis che specifica il titolo dell'asse orizzontale.

Tipo: stringa
Predefinito: null
StileAnonim.titoloTesto

Un oggetto che specifica lo stile del testo del titolo dell'asse orizzontale. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color può essere una qualsiasi stringa di colore HTML, ad esempio: 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo: oggetto
Predefinito: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowContainerBoundaryTextCutoff

Se il valore è false, le etichette più esterne verranno nascoste invece di consentire che vengano ritagliate dal contenitore del grafico. Se true, consentirà il ritaglio delle etichette.

Questa opzione è supportata solo per un asse discrete.

Tipo: booleano
Predefinito: falso
Testo hAxis.slanted

Se true, traccia il testo dell'asse orizzontale su un'angolazione per facilitare l'adattamento di più testo lungo l'asse; se è false, disegna il testo sull'asse orizzontale in verticale. Per impostazione predefinita, il testo è inclinato se non può adattarsi a tutte le esigenze quando viene disegnato in verticale. Tieni presente che questa opzione è disponibile solo quando hAxis.textPosition è impostato su "out" (impostazione predefinita). Il valore predefinito è false per date e ore.

Tipo: booleano
Predefinito: automatica
Angolo testo hAxis.slanted

L'angolo del testo dell'asse orizzontale, se è disegnato. Ignorato se hAxis.slantedText è false o è in modalità automatica e il grafico ha deciso di tracciare il testo orizzontalmente. Se l'angolo è positivo, la rotazione è in senso antiorario e, se negativo, in senso orario.

Tipo: numero, -90-90
Predefinito: 30
Alternativa hAxis.max

Numero massimo di livelli di testo dell'asse orizzontale. Se le etichette di testo dell'asse sono troppo affollate, il server potrebbe spostare le etichette vicine verso l'alto o verso il basso per far sì che le etichette siano più vicine tra loro. Questo valore specifica il numero massimo di livelli da utilizzare; il server può utilizzare meno livelli, se le etichette possono rientrare senza sovrapporsi. Per le date e gli orari, il valore predefinito è 1.

Tipo: numero
Predefinito: 2
Linee hAxis.maxTextLines

Numero massimo di righe consentite per le etichette di testo. Le etichette possono estendersi su più righe se sono troppo lunghe e il numero di righe è, per impostazione predefinita, limitato dall'altezza dello spazio disponibile.

Tipo: numero
Predefinito: automatica
Spaziatura min.AxiS.min

Spaziatura orizzontale minima, in pixel, consentita tra due etichette di testo adiacenti. Se le etichette sono distanziate troppo o sono troppo lunghe, la spaziatura può scendere al di sotto di questa soglia e in questo caso verrà applicata una delle misure di esclusione delle etichette, ad esempio troncandone o eliminandone alcune.

Tipo: numero
Predefinito: il valore di hAxis.textStyle.fontSize
hhAxis.showTextEvery

Numero di etichette dell'asse orizzontale da mostrare, dove 1 indica tutte le etichette, 2 indica le altre etichette e così via. L'impostazione predefinita prevede di mostrare il maggior numero possibile di etichette senza sovrapporsi.

Tipo: numero
Predefinito: automatica
Valore max hAxis

Consente di spostare il valore massimo dell'asse orizzontale al valore specificato; sarà a destra nella maggior parte dei grafici. Ignorato se è impostato su un valore inferiore al valore x massimo dei dati. hAxis.viewWindow.max sostituisce questa proprietà.

Questa opzione è supportata solo per un asse continuous.

Tipo: numero
Predefinito: automatica
Valore minimo hAxis

Sposta il valore minimo dell'asse orizzontale sul valore specificato, che sarà spostato verso sinistra nella maggior parte dei grafici. Ignorato se è impostato su un valore maggiore del valore x minimo dei dati. hAxis.viewWindow.min sostituisce questa proprietà.

Questa opzione è supportata solo per un asse continuous.

Tipo: numero
Predefinito: automatica
hhAxis.viewWindowMode

Specifica come scalare l'asse orizzontale per eseguire il rendering dei valori all'interno dell'area del grafico. Sono supportati i seguenti valori di stringa:

  • "pretty": scala i valori orizzontali in modo che i valori massimi e minimi dei dati vengano visualizzati leggermente all'interno dell'area del grafico a sinistra e a destra. La viewWindow viene espansa nella linea della griglia principale più vicina per i numeri o nella griglia secondaria più vicina per le date e gli orari.
  • "maximized": consente di scalare i valori orizzontali in modo che i valori massimo e minimo dei dati tocchino l'area sinistra e destra dell'area del grafico. Verranno ignorati haxis.viewWindow.min e haxis.viewWindow.max.
  • "explicit": un'opzione deprecata per specificare i valori di scala sinistra e destra dell'area del grafico. (Deprecato perché ridondante con haxis.viewWindow.min e haxis.viewWindow.max). I valori dei dati al di fuori di questi valori verranno ritagliati. Devi specificare un oggetto hAxis.viewWindow che descriva i valori massimo e minimo da mostrare.

Questa opzione è supportata solo per un asse continuous.

Tipo: stringa
Predefinita: equivalente a "pretty", ma haxis.viewWindow.min e haxis.viewWindow.max hanno la precedenza, se utilizzati.
hhAxis.viewWindow

Specifica l'intervallo di ritaglio dell'asse orizzontale.

Tipo: oggetto
Predefinito: null
hhAxis.viewWindow.max
  • Per un asse continuous :

    Il valore massimo di dati orizzontali da visualizzare.

  • Per un asse discrete:

    L'indice di riga basato su zero in cui termina la finestra di ritaglio. I punti dati a questo indice e a quelli superiori verranno ritagliati. In combinazione con vAxis.viewWindowMode.min, definisce un intervallo semiaperto [min, max] che indica gli indici degli elementi da visualizzare. In altre parole, verrà visualizzato ogni indice tale che min <= index < max.

Ignorato quando hAxis.viewWindowMode è 'pretty' o 'maimized'.

Tipo: numero
Predefinito: automatica
hhAxis.viewWindow.min
  • Per un asse continuous:

    Il valore minimo dei dati orizzontali da visualizzare.

  • Per un asse discrete:

    L'indice della riga basato su zero da cui inizia la finestra di ritaglio. I punti dati negli indici inferiori a questo valore verranno ritagliati. In combinazione con vAxis.viewWindowMode.max, definisce un intervallo semiaperto [min, max] che indica gli indici degli elementi da visualizzare. In altre parole, verrà visualizzato ogni indice tale che min <= index < max.

Ignorato quando hAxis.viewWindowMode è 'pretty' o 'maimized'.

Tipo: numero
Predefinito: automatica
height

Altezza del grafico in pixel.

Tipo: numero
Predefinito: altezza dell'elemento contenitore
in pila

Se è impostato su true, consente di impilare gli elementi per tutte le serie a ogni valore di dominio. Nota: nei grafici Colonna, Area e SteppedArea, Google Graph inverte l'ordine delle voci della legenda in modo che corrispondano meglio all'insieme degli elementi della serie (ad esempio, la serie 0 sarà l'elemento più in basso nella legenda). Questo non si applica ai grafici a barre.

L'opzione isStacked supporta anche lo stacking al 100%, dove gli stack di elementi per ogni valore di dominio vengono ridimensionati per ottenere fino al 100%.

Le opzioni per isStacked sono:

  • false: gli elementi non vengono raggruppati. È l'opzione predefinita.
  • true: impila gli elementi per tutte le serie a ogni valore di dominio.
  • 'percent': impila gli elementi per tutte le serie a ogni valore di dominio e li scala in modo da sommarsi al 100%, con il valore di ogni elemento calcolato come percentuale del 100%.
  • 'relative': impila gli elementi per tutte le serie a ogni valore di dominio e li scala in modo da sommarne fino a uno, con il valore di ogni elemento calcolato come frazione di 1.
  • 'absolute': funziona come isStacked: true.

Per la struttura al 100%, il valore calcolato per ciascun elemento viene visualizzato nella descrizione comando dopo il valore effettivo.

Per impostazione predefinita, l'asse target selezionerà i valori in base alla scala 0-1 relativa come frazioni di 1 per 'relative' e tra 0 e 100% per 'percent' (nota: quando si utilizza l'opzione 'percent', i valori degli assi/tick vengono visualizzati come percentuali, tuttavia i valori effettivi sono i valori di scala 0-1 relativi). Questo perché i segni di graduazione dell'asse percentuale sono il risultato dell'applicazione di un formato di "#.##%" ai relativi valori della scala 0-1. Quando utilizzi isStacked: 'percent', assicurati di specificare eventuali segni di graduazione/griglia utilizzando i relativi valori della scala 0-1. Puoi personalizzare le linee della griglia/i valori di selezione e la formattazione utilizzando le opzioni hAxis/vAxis appropriate.

Lo stack al 100% supporta solo valori di dati di tipo number e deve avere una base di riferimento pari a zero.

Tipo: booleano/stringa
Predefinito: falso
leggenda

Un oggetto con membri per configurare i vari aspetti della legenda. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo: oggetto
Predefinito: null
legend.pageIndex

Indice della pagina della legenda selezionato per la prima volta.

Tipo: numero
Predefinito: 0
posizione.legenda

Posizione della legenda. Può corrispondere a uno dei seguenti:

  • 'bottom': sotto il grafico.
  • "sinistra": a sinistra del grafico, a condizione che l'asse sinistro non abbia serie associate. Quindi, se vuoi che la legenda sia a sinistra, usa l'opzione targetAxisIndex: 1.
  • "in": all'interno del grafico, nell'angolo in alto a sinistra.
  • "nessuna": non viene visualizzata nessuna legenda.
  • "a destra": a destra del grafico. Incompatibile con l'opzione vAxes.
  • "top": sopra il grafico.
Tipo: stringa
Predefinito: "destra"
legenda.allineamento

Allineamento della legenda. Può corrispondere a uno dei seguenti:

  • 'start': allineato all'inizio dell'area allocata per la legenda.
  • "center": centrato nell'area allocata per la legenda.
  • "end": allineato alla fine dell'area allocata per la legenda.

L'inizio, la parte centrale e la fine sono relative allo stile (verticale o orizzontale) della legenda. Ad esempio, nella legenda "destra", "inizio" e "fine" si trovano rispettivamente all'inizio e alla fine; per una legenda "in alto", "inizio" e "fine" si trovano rispettivamente a sinistra e a destra dell'area.

Il valore predefinito dipende dalla posizione della legenda. Per le legende "in basso", il valore predefinito è "center"; le altre legende sono "start".

Tipo: stringa
Predefinito: automatica
legend.textStyle

Un oggetto che specifica lo stile del testo della legenda. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color può essere una qualsiasi stringa di colore HTML, ad esempio: 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo: oggetto
Predefinito: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
orientamento

L'orientamento del grafico. Se impostato su 'vertical', ruota gli assi del grafico in modo che, ad esempio, un grafico a colonne diventi un grafico a barre e un grafico ad area cresce verso destra anziché verso l'alto:

Tipo: stringa
Predefinito: "orizzontale"
categorieinverse

Se il criterio è impostato su true, disegna la serie da destra a sinistra. L'impostazione predefinita è il disegno da sinistra a destra.

Questa opzione è supportata solo per un asse discrete major.

Tipo: booleano
Predefinito: falso
series

Un array di oggetti, ognuno che descrive il formato della serie corrispondente nel grafico. Per utilizzare i valori predefiniti per una serie, specifica un oggetto vuoto {}. Se non viene specificato un valore o una serie, verrà utilizzato il valore globale. Ogni oggetto supporta le seguenti proprietà:

  • annotations: un oggetto da applicare alle annotazioni per questa serie. Può essere utilizzato per controllare, ad esempio, textStyle per la serie:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    Consulta le varie opzioni di annotations per un elenco più completo di cosa può essere personalizzato.

  • color: il colore da utilizzare per questa serie. Specifica una stringa di colore HTML valida.
  • targetAxisIndex: a quale asse assegnare questa serie, dove 0 è l'asse predefinito e 1 è l'asse opposto. Il valore predefinito è 0; impostato su 1 per definire un grafico in cui serie diverse vengono visualizzate su assi diversi. Almeno una serie è da allocare all'asse predefinito. Puoi definire una scala diversa per assi diversi.
  • visibleInLegend: un valore booleano, dove true significa che la serie deve avere una voce leggendaria, mentre false significa che non lo deve. Il valore predefinito è true.

Puoi specificare un array di oggetti, ognuno dei quali si applica alla serie nell'ordine specificato, oppure un oggetto in cui ogni elemento secondario ha una chiave numerica che indica a quale serie si applica. Ad esempio, le due dichiarazioni che seguono sono identiche e dichiarano la prima serie come nera e assente dalla legenda e la quarta come rossa e assente dalla legenda:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Tipo: array di oggetti o oggetti con oggetti nidificati
Predefinito: {}
tema

Un tema è un insieme di valori di opzione predefiniti che funzionano insieme per ottenere un comportamento visivo o un comportamento specifico del grafico. Attualmente è disponibile un solo tema:

  • "maximized": consente di massimizzare l'area del grafico e disegna la legenda e tutte le etichette all'interno dell'area del grafico. Imposta le seguenti opzioni:
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
Tipo: stringa
Predefinito: null
title

Testo da visualizzare sopra il grafico.

Tipo: stringa
Predefinito: nessun titolo
titoloPosizione

Dove posizionare il titolo del grafico rispetto all'area del grafico. Valori supportati:

  • in - Disegna il titolo all'interno dell'area del grafico.
  • out - Traccia il titolo fuori dall'area del grafico.
  • none: ometti il titolo.
Tipo: stringa
Predefinito: "out"
titoloTestoStile

Un oggetto che specifica lo stile del testo del titolo. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color può essere una qualsiasi stringa di colore HTML, ad esempio: 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo: oggetto
Predefinito: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
descrizione comando

Un oggetto con membri che possono configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo: oggetto
Predefinito: null
tooltip.ignoreBounds

Se impostato su true, il disegno delle descrizioni comando può uscire dai confini del grafico su tutti i lati.

Nota: questo vale solo per le descrizioni comando HTML. Se questa funzionalità è abilitata con le descrizioni comando SVG, l'eventuale overflow oltre i limiti del grafico verrà ritagliato. Per ulteriori dettagli, consulta la sezione Personalizzare i contenuti della descrizione comando.

Tipo: booleano
Predefinito: falso
descrizione comando.isHTML

Se è impostato su true, utilizza le descrizioni comando visualizzate in HTML (anziché il rendering SVG). Per ulteriori dettagli, consulta la sezione Personalizzare i contenuti della descrizione comando.

Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dati della colonna Descrizione comando non è supportata dalla visualizzazione Grafico a bolle.

Tipo: booleano
Predefinito: falso
descrizione comando.showColorCode

Se true, mostra i riquadri colorati accanto alle informazioni sulla serie nella descrizione comando. Il valore predefinito è true quando focusTarget è impostato su "category", altrimenti è false.

Tipo: booleano
Predefinito: automatica
tooltip.textStyle

Un oggetto che specifica lo stile di testo della descrizione comando. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color può essere una qualsiasi stringa di colore HTML, ad esempio: 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo: oggetto
Predefinito: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
descrizione comando.trigger

L'interazione dell'utente che determina la visualizzazione della descrizione comando:

  • " stato attivo": la descrizione comando viene visualizzata quando l'utente passa il mouse sopra l'elemento.
  • "none": la descrizione comando non viene visualizzata.
  • 'selection' - La descrizione comando viene visualizzata quando l'utente seleziona l'elemento.
Tipo: stringa
Predefinito: "concentrazione"
linee di tendenza

Visualizza le linee di tendenza sui grafici che le supportano. Per impostazione predefinita vengono utilizzate le linee di tendenza lineari, ma possono essere personalizzate con l'opzione trendlines.n.type.

Le linee di tendenza sono specificate in base alla serie, perciò la maggior parte delle opzioni sarà simile a questa:

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
    
Tipo: oggetto
Predefinito: null
linee di tendenza.n.colore

Il colore della linea di tendenza, espresso come nome del colore inglese o stringa esadecimale.

Tipo: stringa
Predefinito: colore della serie predefinita
tendenze.n.grado

Per le linee di tendenza di type: 'polynomial', il grado del polinomio (2 per quadratico, 3 per cubico e così via). (il grado predefinito potrebbe cambiare da 3 a 2 in una futura release di Google Classifiche).

Tipo: numero
Predefinito: 3
Trendslines.n.labelInLegend

Se impostata, la linea di tendenza apparirà nella legenda come questa stringa.

Tipo: stringa
Predefinito: null
Trendslines.n.lineWidth

Lo spessore della linea della linea di tendenza, in pixel.

Tipo: numero
Predefinito: 2
Trendslines.n.opacity

La trasparenza della linea di tendenza , da 0,0 (trasparente) a 1,0 (opaca).

Tipo: numero
Predefinito: 1,0
tendenzelines.n.pointSize

Le linee di tendenza vengono costituite stampando un gruppo di punti sul grafico; questa opzione richiesta raramente consente di personalizzare le dimensioni dei punti. In genere, è preferibile l'opzione lineWidth della linea di tendenza. Tuttavia, questa opzione è necessaria se utilizzi l'opzione pointSize globale e vuoi che la misura delle linee di tendenza abbia dimensioni diverse.

Tipo: numero
Predefinito: 1
Trendslines.n.pointsVisible

Le linee di tendenza vengono costituite stampando un gruppo di punti sul grafico. L'opzione pointsVisible della linea di tendenza determina se i punti di una determinata linea di tendenza sono visibili.

Tipo: booleano
Predefinito: true
Trendslines.n.showR2

Indica se mostrare il coefficiente di determinazione nella legenda o nella descrizione comando della linea di tendenza.

Tipo: booleano
Predefinito: falso
tendenze.n.tipo

Indica se le linee di tendenza sono 'linear' (valore predefinito), 'exponential' o 'polynomial'.

Tipo: stringa
Predefinito: lineare
Trendslines.n.visibleInLegend

Indica se l'equazione della linea di tendenza è visualizzata nella legenda. Verrà visualizzato nella descrizione comando della linea di tendenza.

Tipo: booleano
Predefinito: falso
vAx

Specifica le proprietà per i singoli assi verticali se il grafico ha più assi verticali. Ogni oggetto secondario è un oggetto vAxis e può contenere tutte le proprietà supportate da vAxis. Questi valori sostituiscono tutte le impostazioni globali per la stessa proprietà.

Per specificare un grafico con più assi verticali, innanzitutto definisci un nuovo asse utilizzando series.targetAxisIndex, quindi configura l'asse utilizzando vAxes. L'esempio riportato di seguito assegna la serie 2 all'asse destro e specifica un titolo e uno stile di testo personalizzati:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Questa proprietà può essere un oggetto o un array: l'oggetto è una raccolta di oggetti, ciascuno con un'etichetta numerica che specifica l'asse che definisce, questo è il formato mostrato sopra; la matrice è un array di oggetti, uno per asse. Ad esempio, la seguente notazione in stile array è identica all'oggetto vAxis mostrato sopra:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Tipo: array di oggetti o oggetti con oggetti secondari.
Predefinito: null
vAxi

Un oggetto con membri in grado di configurare vari elementi dell'asse verticale. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Tipo: oggetto
Predefinito: null
Basebase vAxis

vAxis che specifica la base di riferimento per l'asse verticale. Se la linea di base è più grande della linea della griglia più alta o più piccola della linea della griglia più bassa, sarà arrotondata alla linea della griglia più vicina.

Tipo: numero
Predefinito: automatica
Colorev.base.vAxis

Specifica il colore della base di riferimento per l'asse verticale. Può essere qualsiasi stringa di colore HTML, ad esempio: 'red' o '#00cc00'.

Tipo: numero
Predefinito: "nero"
vAxis.direction

La direzione in cui crescono i valori lungo l'asse verticale. Per impostazione predefinita, i valori bassi si trovano in fondo al grafico. Specifica -1 per invertire l'ordine dei valori.

Tipo: 1 o -1
Predefinito: 1
Formato vAxis.format

Una stringa di formato per le etichette degli assi numerici. Questo è un sottoinsieme del set di pattern ICU . Ad esempio, {format:'#,###%'} mostrerà i valori "1000%", "750%" e "50%" per i valori 10, 7,5 e 0,5. Puoi anche fornire quanto segue:

  • {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'}: visualizza 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)

La formattazione effettiva applicata all'etichetta deriva dalla lingua in cui è stata caricata l'API. Per maggiori dettagli, consulta la pagina relativa al caricamento di grafici con impostazioni internazionali specifiche .

Per il calcolo dei valori tick e delle linee della griglia, verranno prese in considerazione diverse combinazioni alternative di tutte le opzioni della griglia pertinenti e le alternative verranno rifiutate se le etichette dei segni di spunta formattate sono duplicate o sovrapposte. Puoi quindi specificare format:"#" se vuoi mostrare solo valori di segno di spunta interi, ma tieni presente che se nessuna alternativa soddisfa questa condizione, non verranno mostrate linee di griglia o segni di spunta.

Tipo: stringa
Predefinito: automatica
Linee vAxis.grid

Un oggetto con membri per configurare le linee della griglia sull'asse verticale. Tieni presente che le linee della griglia dell'asse verticale vengono tracciate orizzontalmente. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito:

{color: '#333', minSpacing: 20}
Tipo: oggetto
Predefinito: null
vAxis.gridlines.color;

Il colore delle linee della griglia verticale all'interno dell'area del grafico. Specifica una stringa di colore HTML valida.

Tipo: stringa
Predefinito: "#CCC"
vAxis.gridlines.count

Il numero approssimativo di linee orizzontali della griglia all'interno dell'area del grafico. Se specifichi un numero positivo per gridlines.count, questo verrà utilizzato per calcolare il minSpacing tra le linee della griglia. Puoi specificare un valore di 1 per tracciare una sola linea della griglia oppure 0 per non tracciare alcuna linea della griglia. Specifica -1, che è l'impostazione predefinita, per calcolare automaticamente il numero di linee della griglia in base ad altre opzioni.

Tipo: numero
Predefinito: -1
vAxis.gridlines.interval

Un array di dimensioni (come valori dei dati, non pixel) tra le linee della griglia adiacenti. Al momento, questa opzione è destinata solo agli assi numerici, ma è analoga alle opzioni gridlines.units.<unit>.interval utilizzate solo per date e ore. Per le scale lineari, il valore predefinito è [1, 2, 2.5, 5] il che significa che i valori della griglia possono rientrare in ogni unità (1), nelle unità pari (2) o in multipli di 2,5 o 5. Viene considerata anche la potenza di 10 volte questi valori (ad esempio [10, 20, 25, 50] e [.1, .2, .25, .5]). Per le scale di log, il valore predefinito è [1, 2, 5].

Tipo: numero compreso tra 1 e 10, escluso 10.
Predefinito: calcolato
vAxis.gridlines.minSSpaziatura

Lo spazio minimo dello schermo, in pixel, tra le linee della griglia principale di hAxis. Il valore predefinito per le linee della griglia principale è 40 per le scale lineari e 20 per le scale dei log. Se specifichi count e non minSpacing, il valore di minSpacing viene calcolato a partire dal conteggio. Al contrario, se specifichi minSpacing e non count, il conteggio viene calcolato dalla spaziatura minima. Se specifichi entrambi, viene eseguito l'override di minSpacing.

Tipo: numero
Predefinito: calcolato
vAxis.gridlines.multi

Tutti i valori della griglia e della selezione devono essere un multiplo del valore di questa opzione. A differenza degli intervalli, le potenze 10 volte il multiplo non vengono prese in considerazione. Puoi forzare l'inserimento dei tick in numeri interi specificando gridlines.multiple = 1 oppure forzarli in multipli di 1000 specificando gridlines.multiple = 1000.

Tipo: numero
Predefinito: 1
vAxis.gridlines.units;

Esegue l'override del formato predefinito per vari aspetti dei tipi di dati data/ora/ora del giorno quando utilizzato con le linee della griglia calcolate dal grafico. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi.

Il formato generale è:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    

Ulteriori informazioni sono disponibili in Date e ore.

Tipo: oggetto
Predefinito: null
Linee griglia vAxis.minor

Un oggetto con membri per configurare le linee della griglia secondaria sull'asse verticale, in modo simile all'opzione vAxis.gridlines.

Tipo: oggetto
Predefinito: null
Colorev.MinorGridlines.color

Il colore delle linee della griglia secondaria verticale all'interno dell'area del grafico. Specifica una stringa di colore HTML valida.

Tipo: stringa
Predefinito: una combinazione dei colori della linea di griglia e dello sfondo
vAxis.minorGridlines.count

L'opzione minorGridlines.count è deprecata, ad eccezione della disattivazione delle linee della griglia secondaria impostando il conteggio su 0. Il numero di linee della griglia minori dipende dall'intervallo tra le linee della griglia principali (vedi vAxis.gridlines.interval) e dallo spazio minimo richiesto (vedi vAxis.minorGridlines.minSpacing).

Tipo: numero
Predefinito: 1
vAxis.minorGridlines.interval

L'opzione minorGridlines.interval è come l'opzione dell'intervallo principale delle linee della griglia, ma l'intervallo scelto sarà sempre un divisore uniforme dell'intervallo della griglia principale. L'intervallo predefinito per le scale lineari è [1, 1.5, 2, 2.5, 5], mentre per le scale di log è [1, 2, 5].

Tipo: numero
Predefinito: 1
vAxis.minorGridlines.minSSpaziatura

Lo spazio minimo richiesto, in pixel, tra le linee della griglia secondaria adiacenti e tra le linee della griglia secondaria e principale. Il valore predefinito è 1/2 del valore di minSSpaziatura delle linee della griglia principale per le scale lineari e 1/5 del valore di spaziatura minima per le scale di log.

Tipo: numero
Predefinito:calcolato
vAxis.minorGridlines.more

Come nel caso del gridlines.multiple principale.

Tipo: numero
Predefinito: 1
vAxis.minorGridlines.units

Sostituisce il formato predefinito per vari aspetti dei tipi di dati data/ora/ora del giorno quando viene utilizzato con linee griglia secondarie calcolate. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi.

Il formato generale è:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Ulteriori informazioni sono disponibili in Date e ore.

Tipo: oggetto
Predefinito: null
vAxis.logScale

Se true, rende l'asse verticale una scala logaritmica. Nota: tutti i valori devono essere positivi.

Tipo: booleano
Predefinito: falso
vAxis.scaleType

Proprietà vAxis che rende l'asse verticale una scala logaritmica. Può corrispondere a uno dei seguenti:

  • null - Non viene eseguita la scalabilità logaritmica.
  • 'log' - Scalabilità logaritmica. I valori negativi e zero non vengono tracciati. Questa opzione è uguale all'impostazione vAxis: { logscale: true }.
  • 'mirrorLog' - Scalabilità logaritmica in cui vengono tracciati valori negativi e pari a zero. Il valore tracciato di un numero negativo è il negativo del log del valore assoluto. I valori vicini a 0 vengono tracciati su una scala lineare.

Questa opzione è supportata solo per un asse continuous.

Tipo: stringa
Predefinito: null
vAxis.textPosition

Posizione del testo dell'asse verticale, rispetto all'area del grafico. Valori supportati: "out", "in", "nessuno".

Tipo: stringa
Predefinito: "out"
stileAV.testo

Un oggetto che specifica lo stile di testo dell'asse verticale. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color può essere una qualsiasi stringa di colore HTML, ad esempio: 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo: oggetto
Predefinito: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

Sostituisce i segni di graduazione dell'asse Y generati automaticamente con la matrice specificata. Ogni elemento della matrice deve essere un valore di segno di spunta valido (ad esempio numero, data, data/ora o ora del giorno) o un oggetto. Se si tratta di un oggetto, deve avere una proprietà v per il valore tick e una proprietà f facoltativa contenente la stringa letterale da visualizzare come etichetta.

La visualizzazione di finestra verrà espansa automaticamente in modo da includere i segni di graduazione minimo e massimo a meno che non specifichi un valore viewWindow.min o viewWindow.max per la sostituzione.

Esempi:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Tipo: array di elementi
Predefinito: automatica
Titolo vAxis

vAxis che specifica un titolo per l'asse verticale.

Tipo: stringa
Predefinito: nessun titolo
vAxis.titleTextStyle

Un oggetto che specifica lo stile del testo del titolo dell'asse verticale. L'oggetto ha questo formato:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color può essere una qualsiasi stringa di colore HTML, ad esempio: 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo: oggetto
Predefinito: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Valore massimo vAxis

Sposta il valore massimo dell'asse verticale al valore specificato; questo sarà verso l'alto nella maggior parte dei grafici. Ignorato se è impostato su un valore inferiore al valore y massimo dei dati. vAxis.viewWindow.max sostituisce questa proprietà.

Tipo: numero
Predefinito: automatica
Valorev.min.min

Sposta il valore minimo dell'asse verticale al valore specificato; questo sarà verso il basso nella maggior parte dei grafici. Ignorato se è impostato su un valore maggiore di quello y minimo dei dati. vAxis.viewWindow.min sostituisce questa proprietà.

Tipo: numero
Predefinito: null
vAxis.viewWindowMode

Specifica come scalare l'asse verticale per eseguire il rendering dei valori all'interno dell'area del grafico. Sono supportati i seguenti valori di stringa:

  • "pretty": scala i valori verticali in modo che i valori massimo e minimo dei dati vengano visualizzati leggermente all'interno dell'area inferiore e superiore dell'area del grafico. La viewWindow viene espansa nella linea della griglia principale più vicina per i numeri o nella griglia secondaria più vicina per le date e gli orari.
  • "maximized": consente di scalare i valori verticali in modo che i valori massimo e minimo dei dati tocchino la parte superiore e inferiore dell'area del grafico. Verranno ignorati vaxis.viewWindow.min e vaxis.viewWindow.max.
  • "explicit": un'opzione deprecata per specificare i valori di scala superiore e inferiore dell'area del grafico. (Deprecato perché ridondante con vaxis.viewWindow.min e vaxis.viewWindow.max). I valori dei dati al di fuori di questi valori verranno ritagliati. Devi specificare un oggetto vAxis.viewWindow che descriva i valori massimo e minimo da mostrare.
Tipo: stringa
Predefinita: equivalente a "pretty", ma vaxis.viewWindow.min e vaxis.viewWindow.max hanno la precedenza, se utilizzati.
vAxis.viewWindow

Specifica l'intervallo di ritaglio dell'asse verticale.

Tipo: oggetto
Predefinito: null
vAxis.viewWindow.max

Il valore massimo dei dati verticali da visualizzare.

Ignorato quando vAxis.viewWindowMode è 'pretty' o 'maimized'.

Tipo: numero
Predefinito: automatica
vAxis.viewWindow.min

Il valore minimo dei dati verticali da visualizzare.

Ignorato quando vAxis.viewWindowMode è 'pretty' o 'maimized'.

Tipo: numero
Predefinito: automatica
width

La larghezza del grafico in pixel.

Tipo: numero
Predefinito: larghezza dell'elemento che la contiene

Metodi

Metodo
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate ai metodi solo dopo l'attivazione dell'evento ready. Extended description.

Tipo di reso: nessuno
getAction(actionID)

Restituisce l'oggetto azione della descrizione comando con il actionID richiesto.

Tipo di reso: oggetto
getBoundingBox(id)

Restituisce un oggetto contenente i valori sinistro, superiore, larghezza e altezza dell'elemento del grafico id. Il formato per id non è ancora documentato (sono i valori di ritorno dei gestori di eventi), ma ecco alcuni esempi:

var cli = chart.getChartLayoutInterface();

Altezza dell'area del grafico
cli.getBoundingBox('chartarea').height
Larghezza della terza barra nella prima serie di un grafico a barre o a colonne
cli.getBoundingBox('bar#0#2').width
Riquadro di delimitazione del quinto cuneo di un grafico a torta
cli.getBoundingBox('slice#4')
Casella di delimitazione dei dati di un grafico verticale (ad es. a colonne):
cli.getBoundingBox('vAxis#0#gridline')
Riquadro di delimitazione dei dati del grafico orizzontale (ad es. a barre):
cli.getBoundingBox('hAxis#0#gridline')

I valori sono relativi al contenitore del grafico. Chiamalo dopo il disegno del grafico.

Tipo di reso: oggetto
getChartAreaBoundingBox()

Restituisce un oggetto contenente il lato sinistro, superiore, la larghezza e l'altezza dei contenuti del grafico (escluse le etichette e la legenda):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

I valori sono relativi al contenitore del grafico. Chiamalo dopo il disegno del grafico.

Tipo di reso: oggetto
getChartLayoutInterface()

Restituisce un oggetto contenente informazioni sul posizionamento sullo schermo del grafico e sui suoi elementi.

Nell'oggetto restituito possono essere richiamati i metodi seguenti:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Chiamalo dopo il disegno del grafico.

Tipo di reso: oggetto
getHAxisValue(xPosition, optional_axis_index)

Restituisce il valore dei dati orizzontali a xPosition, che è un offset di pixel dal bordo sinistro del container del grafico. Può essere negativo.

Esempio: chart.getChartLayoutInterface().getHAxisValue(400).

Chiamalo dopo il disegno del grafico.

Tipo di reso: numero
getImageURI()

Restituisce il grafico serializzato come URI immagine.

Chiamalo dopo il disegno del grafico.

Consulta la sezione Stampa di grafici PNG.

Tipo di reso: stringa
getSelection()

Restituisce una matrice delle entità del grafico selezionate. Le entità selezionabili sono barre, legende e categorie. Una barra corrisponde a una cella della tabella dati, una voce di legenda a una colonna (l'indice della riga è null) e una categoria a una riga (l'indice della colonna è null). Per questo grafico è possibile selezionare una sola entità alla volta. Extended description.

Tipo di reso: array di elementi di selezione
getVAxisValue(yPosition, optional_axis_index)

Restituisce il valore dei dati verticali in yPosition, che è un offset di pixel verso il basso dal bordo superiore del contenitore del grafico. Può essere negativo.

Esempio: chart.getChartLayoutInterface().getVAxisValue(300).

Chiamalo dopo il disegno del grafico.

Tipo di reso: numero
getXLocation(dataValue, optional_axis_index)

Restituisce la coordinata x di pixel di dataValue relativa al bordo sinistro del container del grafico.

Esempio: chart.getChartLayoutInterface().getXLocation(400).

Chiamalo dopo il disegno del grafico.

Tipo di reso: numero
getYLocation(dataValue, optional_axis_index)

Restituisce la coordinata y di pixel dataValue rispetto al bordo superiore del contenitore del grafico.

Esempio: chart.getChartLayoutInterface().getYLocation(300).

Chiamalo dopo il disegno del grafico.

Tipo di reso: numero
removeAction(actionID)

Rimuove dal grafico l'azione della descrizione comando con il actionID richiesto.

Tipo di reso: none
setAction(action)

Imposta un'azione della descrizione comando da eseguire quando l'utente fa clic sul testo dell'azione.

Il metodo setAction accetta un oggetto come parametro di azione. Questo oggetto deve specificare tre proprietà: id (l'ID dell'azione da impostare), text (il testo che dovrebbe essere visualizzato nella descrizione comando per l'azione) e action, la funzione che deve essere eseguita quando un utente fa clic sul testo dell'azione.

Tutte le azioni relative alla descrizione comando devono essere impostate prima di chiamare il metodo draw() del grafico. Descrizione estesa.

Tipo di reso: none
setSelection()

Seleziona le entità del grafico specificate. Annulla qualsiasi selezione precedente. Le entità selezionabili sono barre, legende e categorie. Una barra corrisponde a una cella della tabella dati, una voce di legenda a una colonna (l'indice della riga è null) e una categoria a una riga (l'indice della colonna è null). Per questo grafico è possibile selezionare una sola entità alla volta. Extended description.

Tipo di reso: nessuno
clearChart()

Cancella il grafico e rilascia tutte le risorse allocate.

Tipo di reso: nessuno

Eventi

Per saperne di più su come utilizzare questi eventi, consulta Interattività di base, Gestione degli eventi ed Eventi di attivazione.

Nome
animationfinish

Attivato quando l'animazione di transizione è completa.

Proprietà: nessuna
click

Attivato quando l'utente fa clic all'interno del grafico. Può essere utilizzato per identificare quando gli utenti fanno clic su titolo, elementi dati, voci di legenda, assi, linee di griglia o etichette.

Proprietà: targetID
error

Attivato quando si verifica un errore durante il tentativo di rendering del grafico.

Proprietà: id, messaggio
legendpagination

Attivato quando l'utente fa clic sulle frecce di impaginazione della legenda. Rimanda l'indice della pagina attuale con base zero e il numero totale di pagine.

Proprietà: currentPageIndex, totalpages
onmouseover

Attivato quando l'utente passa il mouse sopra un'entità visiva. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente.

Proprietà: riga, colonna
onmouseout

Attivato quando l'utente allontana il puntatore del mouse da un'entità visiva. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente.

Proprietà: riga, colonna
ready

Il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo draw e di chiamarlo solo dopo che è stato attivato l'evento.

Proprietà: nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere cosa è stato selezionato, chiama il numero getSelection().

Proprietà: nessuna

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato ad alcun server.