Visualizzazione: grafico a dispersione

Panoramica

Grafico a dispersione di punti su un grafico. Quando l'utente passa il mouse sopra i punti, vengono visualizzate le descrizioni comando con ulteriori informazioni.

I grafici a dispersione di Google vengono visualizzati all'interno del browser utilizzando SVG o VML a seconda delle funzionalità del browser.

Esempio

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Age', 'Weight'],
          [ 8,      12],
          [ 4,      5.5],
          [ 11,     14],
          [ 4,      5],
          [ 3,      3.5],
          [ 6.5,    7]
        ]);

        var options = {
          title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
        };

        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));

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

Modificare e animare forme

Per impostazione predefinita, i grafici a dispersione rappresentano gli elementi del set di dati con cerchi. Puoi specificare altre forme con l'opzione pointShape, illustrate in modo dettagliato nella documentazione Personalizzazione dei punti.

Come con la maggior parte degli altri grafici Google, puoi animarli utilizzando gli eventi. Puoi aggiungere un listener di eventi per il primo evento ready e tracciare nuovamente il grafico dopo aver apportato le modifiche desiderate. Dopo il primo evento ready, puoi ascoltare l'evento animationfinish per ripetere la procedura, ottenendo un'animazione continua. L'opzione animation consente di controllare in che modo viene eseguito il nuovo rendering: immediatamente (nessuna animazione) o senza problemi e se la velocità e la velocità di un determinato comportamento vengono rispettate.

Parti positive
  var options = {
    legend: 'none',
    colors: ['#087037'],
    pointShape: 'star',
    pointSize: 18,
    animation: {
      duration: 200,
      easing: 'inAndOut',
    }
  };

  // Start the animation by listening to the first 'ready' event.
  google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

  // Control all other animations by listening to the 'animationfinish' event.
  google.visualization.events.addListener(chart, 'animationfinish', randomWalk);
  ...
  function randomWalk() {
    ...
  }
HTML completo
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number');
      data.addColumn('number');

      var radius = 100;
      for (var i = 0; i < 6.28; i += 0.1) {
        data.addRow([radius * Math.cos(i), radius * Math.sin(i)]);
      }

      // Our central point, which will jiggle.
      data.addRow([0, 0]);

      var options = {
        legend: 'none',
        colors: ['#087037'],
        pointShape: 'star',
        pointSize: 18,
        animation: {
          duration: 200,
          easing: 'inAndOut',
        }
      };

      var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));

      // Start the animation by listening to the first 'ready' event.
      google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk);

      // Control all other animations by listening to the 'animationfinish' event.
      google.visualization.events.addListener(chart, 'animationfinish', randomWalk);

      chart.draw(data, options);

      function randomWalk() {
        var x = data.getValue(data.getNumberOfRows() - 1, 0);
        var y = data.getValue(data.getNumberOfRows() - 1, 1);
        x += 5 * (Math.random() - 0.5);
        y += 5 * (Math.random() - 0.5);
        if (x * x + y * y > radius * radius) {
          // Out of bounds. Bump toward center.
          x += Math.random() * ((x < 0) ? 5 : -5);
          y += Math.random() * ((y < 0) ? 5 : -5);
        }
        data.setValue(data.getNumberOfRows() - 1, 0, x);
        data.setValue(data.getNumberOfRows() - 1, 1, y);
        chart.draw(data, options);
      }
    }
  </script>
  </head>
  <body>
    <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div>
  </body>
</html>

Creare grafici a dispersione di materiali

Nel 2014, Google ha annunciato linee guida pensate per supportare lo stile e il design comune nelle sue proprietà e app (come le app per Android) eseguite sulle piattaforme Google. Chiamiamo questo sforzo Material Design. Forniremo le versioni "Material" di tutti i nostri grafici principali, quindi utilizzatele se volete.

La creazione di un grafico a dispersione di materiali è simile alla creazione di un grafico a dispersione "classico". Carichi l'API Visualizzazione Google (anche se con il pacchetto 'scatter' anziché il pacchetto 'corechart'), definisci la tua tabella di dati, quindi crea un oggetto (ma di classe google.charts.Scatter invece di google.visualization.ScatterChart).

Nota: i grafici dei materiali non funzionano nelle versioni precedenti di Internet Explorer. IE8 e le versioni precedenti non supportano SVG, che è necessario per i grafici di materiali.

I grafici a dispersione di materiali presentano molti piccoli miglioramenti rispetto ai grafici a dispersione classici, tra cui l'opacità variabile per una leggibilità dei punti sovrapposti, una tavolozza dei colori migliorata, una formattazione più chiara delle etichette, una spaziatura predefinita più ristretta, linee della griglia più deboli e titoli (e l'aggiunta di sottotitoli). 

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67], [1, 88], [2, 77],
          [3, 93], [4, 85], [5, 91],
          [6, 71], [7, 78], [8, 93],
          [9, 80], [10, 82],[0, 75],
          [5, 80], [3, 90], [1, 72],
          [5, 75], [6, 68], [7, 98],
          [3, 82], [9, 94], [2, 79],
          [2, 95], [2, 86], [3, 67],
          [4, 60], [2, 80], [6, 92],
          [2, 81], [8, 79], [9, 83],
          [3, 75], [1, 80], [3, 71],
          [3, 89], [4, 92], [5, 85],
          [6, 92], [7, 78], [6, 95],
          [3, 81], [0, 64], [4, 85],
          [2, 83], [3, 96], [4, 77],
          [5, 89], [4, 89], [7, 84],
          [4, 92], [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          hAxis: {title: 'Hours Studied'},
          vAxis: {title: 'Grade'}
        };

        var chart = new google.charts.Scatter(document.getElementById('scatterchart_material'));

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

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.Scatter.convertOptions(options));

Grafici a doppia Y

A volte potresti voler visualizzare due serie in un grafico a dispersione, 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 diversamente ("Valutazione dell'esame finale" rispetto a "Ore studiate"), ma ognuno ha le proprie scale e griglie indipendenti. Se vuoi personalizzare questo comportamento, utilizza le opzioni vAxis.gridlines.

Nel codice seguente, le opzioni axes e series specificano insieme l'aspetto a due y del grafico. L'opzione series specifica quale asse utilizzare per ciascun elemento ('final grade' e 'hours studied'; non devono avere alcuna relazione con i nomi delle colonne nella tabella dati). L'opzione axes rende questo grafico un doppio asse Y, che posiziona l'asse 'Final Exam Grade' a sinistra e l'asse 'Hours Studied' a destra. 

      google.charts.load('current', {'packages':['corechart', 'scatter']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

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

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Student ID');
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 0, 67],  [1, 1, 88],   [2, 2, 77],
          [3, 3, 93],  [4, 4, 85],   [5, 5, 91],
          [6, 6, 71],  [7, 7, 78],   [8, 8, 93],
          [9, 9, 80],  [10, 10, 82], [11, 0, 75],
          [12, 5, 80], [13, 3, 90],  [14, 1, 72],
          [15, 5, 75], [16, 6, 68],  [17, 7, 98],
          [18, 3, 82], [19, 9, 94],  [20, 2, 79],
          [21, 2, 95], [22, 2, 86],  [23, 3, 67],
          [24, 4, 60], [25, 2, 80],  [26, 6, 92],
          [27, 2, 81], [28, 8, 79],  [29, 9, 83]
        ]);

        var materialOptions = {
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          width: 800,
          height: 500,
          series: {
            0: {axis: 'hours studied'},
            1: {axis: 'final grade'}
          },
          axes: {
            y: {
              'hours studied': {label: 'Hours Studied'},
              'final grade': {label: 'Final Exam Grade'}
            }
          }
        };

        var classicOptions = {
          width: 800,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Students\' Final Grades - based on hours studied',

          vAxes: {
            // Adds titles to each axis.
            0: {title: 'Hours Studied'},
            1: {title: 'Final Exam Grade'}
          }
        };

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

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

        drawMaterialChart();
    };

Grafici Top-X

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

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: 

      google.charts.load('current', {'packages':['scatter']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart () {

        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Hours Studied');
        data.addColumn('number', 'Final');

        data.addRows([
          [0, 67],  [1, 88],  [2, 77],
          [3, 93],  [4, 85],  [5, 91],
          [6, 71],  [7, 78],  [8, 93],
          [9, 80],  [10, 82], [0, 75],
          [5, 80],  [3, 90],  [1, 72],
          [5, 75],  [6, 68],  [7, 98],
          [3, 82],  [9, 94],  [2, 79],
          [2, 95],  [2, 86],  [3, 67],
          [4, 60],  [2, 80],  [6, 92],
          [2, 81],  [8, 79],  [9, 83],
          [3, 75],  [1, 80],  [3, 71],
          [3, 89],  [4, 92],  [5, 85],
          [6, 92],  [7, 78],  [6, 95],
          [3, 81],  [0, 64],  [4, 85],
          [2, 83],  [3, 96],  [4, 77],
          [5, 89],  [4, 89],  [7, 84],
          [4, 92],  [9, 98]
        ]);

        var options = {
          width: 800,
          height: 500,
          chart: {
            title: 'Students\' Final Grades',
            subtitle: 'based on hours studied'
          },
          axes: {
            x: {
              0: {side: 'top'}
            }
          }
        };

        var chart = new google.charts.Scatter(document.getElementById('scatter_top_x'));

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

Caricamento

Il nome del pacchetto google.charts.load è "corechart", mentre il nome della classe della visualizzazione è google.visualization.ScatterChart. 

  google.charts.load("current", {packages: ["corechart"]});

  var visualization = new google.visualization.ScatterChart(container);

Per i grafici a dispersione di materiali, il nome del pacchetto google.charts.load è "scatter" e il nome della classe della visualizzazione è google.charts.Scatter. 

  google.charts.load("current", {packages: ["scatter"]});

  var visualization = new google.charts.Scatter(container);

Formato dei dati

Righe: ogni riga nella tabella rappresenta un insieme di punti dati con lo stesso valore dell'asse X.

Colonne:

  Colonna 0 Colonna 1 … Colonna N
Finalità: Valori del punto dati X Valori Y serie 1 … Valori serie N Y
Tipo di dati: stringa, numero o data/ora/ora del giorno stringa, numero o data/ora/ora del giorno … stringa, numero o data/ora/ora del giorno
Ruolo: dati dati … dati
Ruoli di colonna facoltativi:

Assente

 …

Per specificare più serie, specifica due o più colonne dell'asse Y e i valori Y solo in una colonna Y:

Valori X Valori serie 1 Y Valori serie 2 Y
10 null 75
20 null 18
33 null 22
55 16 null
14 61 null
48 3 null

 

Opzioni di configurazione

Nome
AggregaTarget
Come vengono raggruppate più selezioni di dati in descrizioni comando:
  • 'category': raggruppa i dati selezionati in base al valore x.
  • 'series': raggruppa i dati selezionati in base alla serie.
  • 'auto': raggruppa i dati selezionati in base al valore x se tutte le selezioni hanno lo stesso valore x e altrimenti in serie.
  • 'none': mostra solo una descrizione comando per selezione.
aggregationTarget verrà spesso utilizzato in coppia con selectionMode e tooltip.trigger, ad esempio: 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
Tipo: stringa
Predefinito: "auto"
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
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"
titolo_grafico

Per i grafici materiale, questa opzione specifica il titolo.

Tipo: stringa
Predefinito: null
grafico.sottotitolo

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

Tipo: stringa
Predefinito: null
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
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
mirino

Un oggetto contenente le proprietà crosshair per il grafico.

Tipo: oggetto
Predefinito: null
colorecromo

Il colore del mirino, indicato con il nome del colore (ad es. "blu") o un valore RGB (ad es. "#adf").

Tipo: stringa
Tipo: valore predefinito
mirino

Un oggetto contenente le proprietà del mirino alla messa a fuoco.
Esempio: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Tipo: oggetto
Predefinito: valore predefinito
crosshair.opacity

L'opacità del mirino, con 0.0 completamente trasparente e 1.0 completamente opaco.

Tipo: numero
Predefinito: 1,0
orientamento.

L'orientamento del mirino, che può essere "verticale" solo per i capelli verticali, "orizzontale" solo per i peli orizzontali o "entrambi" per i mirini tradizionali.

Tipo: stringa
Predefinito: "entrambi"
crosshair.selected

Un oggetto contenente le proprietà del mirino al momento della selezione.
Esempio: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Tipo: oggetto
Predefinito: valore predefinito
crosshair.trigger

Quando mostrare i mirini: 'focus', 'selection' o 'both'.

Tipo: stringa
Predefinito: "entrambi"
tipo curva

Controlla la curva delle linee quando la larghezza della linea è diversa da zero. Può corrispondere a uno dei seguenti:

  • "nessuna": linee rette senza curva.
  • 'function' - Gli angoli della linea saranno levigati.
Tipo:stringa
Predefinito: "nessuno"
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
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.

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'.

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 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 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}
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
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.

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.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ì.

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.
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] }
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>}
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à.

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à.

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.
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

Il valore massimo di dati orizzontali da visualizzare.

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

Tipo: numero
Predefinito: automatica
hhAxis.viewWindow.min

Il valore minimo dei dati orizzontali da visualizzare.

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

Tipo: numero
Predefinito: automatica
height

Altezza del grafico in pixel.

Tipo: numero
Predefinito: altezza dell'elemento contenitore
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
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
legenda.maxRighe

Numero massimo di righe nella legenda. Impostalo su un numero maggiore di uno per aggiungere righe alla legenda. Nota: la logica esatta utilizzata per determinare il numero effettivo di righe visualizzate è ancora in evoluzione.

Al momento questa opzione funziona solo quando legend.position è "top".

Tipo: numero
Predefinito: 1
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"
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>}
larghezza di riga

Spessore della linea in pixel. Utilizza zero per nascondere tutte le righe e mostrare solo i punti.

Tipo: numero
Predefinito: 0
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"
Forma punto

La forma dei singoli elementi dei dati: "cerchio", "triangolo", "quadrato", "diamante", "a stella" o "poligono". Consulta la documentazione sui punti per esempi.

Tipo: stringa
Predefinito: "cerchio"
dimensionePunto

Diametro dei punti dati, in pixel. Usa il tasto zero per nascondere tutti i punti. Puoi sostituire i valori per le singole serie utilizzando la proprietà series. Se utilizzi una linea di tendenza, questa opzione influisce anche sui pointSize punti di cui è composta, che modifica la larghezza apparente della linea di tendenza. Per evitare che ciò accada, puoi sostituirlo con l'opzione trendlines.n.pointsize.

Tipo: numero
Predefinito: 7
punti visibili

Determina se verranno visualizzati i punti. Imposta su false per nascondere tutti i punti. Puoi sostituire i valori per le singole serie utilizzando la proprietà series. Se utilizzi una linea di tendenza, l'opzione pointsVisible influirà sulla visibilità dei punti su tutte le linee di tendenza, a meno che non la sostituisci con l'opzione trendlines.n.pointsVisible.

Puoi anche eseguire l'override usando il ruolo di stile nel formato "point {visible: true}".

Tipo: booleano
Predefinito: true
selezionemodalità

Quando selectionMode è 'multiple', gli utenti possono selezionare più punti dati.

Tipo: stringa
Predefinito: "singolo"
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à:

  • color: il colore da utilizzare per questa serie. Specifica una stringa di colore HTML valida.
  • labelInLegend: la descrizione della serie da visualizzare nella legenda del grafico.
  • lineWidth: sostituisce il valore globale di lineWidth per questa serie.
  • pointShape: sostituisce il valore globale di pointShape per questa serie.
  • pointSize: sostituisce il valore globale di pointSize per questa serie.
  • pointsVisible: sostituisce il valore globale di pointsVisible per questa serie.
  • 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.

Tipo: booleano
Predefinito: falso
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
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.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.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.
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 voci di punti e legende. Un punto corrisponde a una cella della tabella dati e una voce di legenda a una colonna (l'indice della riga è 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 voci di punti e legende. Un punto corrisponde a una cella della tabella dati e una voce di legenda a una colonna (l'indice della riga è 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. I dati non vengono inviati ad alcun server.