Visualizzazione: grafico a dispersione

Panoramica

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

I grafici a dispersione di Google vengono visualizzati all'interno del browser tramite 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 le 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, descritta in dettaglio nella documentazione Personalizzazione dei punti.

Come la maggior parte degli altri grafici Google, puoi animarli utilizzando eventi. Puoi aggiungere un listener di eventi per il primo evento ready e ridisporre il grafico dopo aver apportato le modifiche desiderate. Dopo il primo evento ready, puoi ascoltare l'evento animationfinish per ripetere il processo, generando un'animazione continua. L'opzione animation controlla come avviene il nuovo disegno: immediatamente (nessuna animazione) o uniforme e, in caso affermativo, quanto rapidamente e con quale comportamento.

Parti buone
  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 dei materiali

Nel 2014, Google ha annunciato linee guida destinate a supportare un aspetto comune nelle sue proprietà e app (ad esempio le app per Android) eseguite sulle piattaforme Google. Questa iniziativa si chiama Material Design. Forniremo versioni "materiali" di tutti i nostri grafici principali; puoi utilizzarle se ti soddisfa.

La creazione di un grafico a dispersione dei materiali è simile a quella che ora chiameremo un grafico a dispersione "classico". Carica l'API di visualizzazione di Google (anche se con il pacchetto 'scatter' anziché il pacchetto 'corechart'), definisci la tabella dati e quindi crei un oggetto (ma di classe google.charts.Scatter anziché google.visualization.ScatterChart).

Nota:i grafici Material non funzionano nelle versioni precedenti di Internet Explorer. IE8 e le versioni precedenti non supportano il formato SVG, necessario per i grafici Material.

I grafici a dispersione dei materiali presentano molti piccoli miglioramenti rispetto ai grafici a dispersione classici, tra cui un'opacità variabile per la leggibilità dei punti sovrapposti, una tavolozza dei colori migliorata, una formattazione più chiara delle etichette, una spaziatura predefinita più stretta, linee della griglia e titoli più morbidi (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 Material sono in versione beta. L'aspetto e l'interattività sono in gran parte definitivi, ma molte delle opzioni disponibili nelle classifiche classiche non sono ancora disponibili. In questo problema puoi trovare un elenco di opzioni non ancora supportate.

Inoltre, le modalità di dichiarazione delle opzioni non sono definitive, perciò se utilizzi una qualsiasi delle opzioni classiche, devi convertirle in opzioni materiali sostituendo questa riga:

chart.draw(data, options);

...con questa:

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

Grafici Dual-Y

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

Tieni presente che i nostri due assi y non solo sono etichettati in modo diverso ("Voto dell'esame finale" rispetto a "Ore di studio"), ma hanno ciascuno le proprie scale e linee della griglia indipendenti. Se vuoi personalizzare questo comportamento, utilizza le opzioni vAxis.gridlines.

Nel codice seguente, le opzioni axes e series insieme specificano l'aspetto con doppio Y del grafico. L'opzione series specifica quale asse utilizzare per ognuno ('final grade' e 'hours studied'; non è necessario che abbia alcuna relazione con i nomi delle colonne nella tabella dati). L'opzione axes rende questo grafico un grafico con doppio Y, con 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();
    };

Classifiche Top X

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

Se vuoi inserire le etichette e il titolo dell'asse X nella parte superiore del grafico anziché in basso, puoi farlo nei grafici materiali 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 in corso...

Il nome del pacchetto google.charts.load è "corechart" e 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 della tabella rappresenta un insieme di punti dati con lo stesso valore dell'asse x.

Colonne:

  Colonna 0 Colonna 1 ... Colonna N
Scopo: Valori X dei punti dati 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 colonna facoltativi:

Assente

 ...

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

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

 

Opzioni di configurazione

Nome
aggregationTarget
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 per serie.
  • 'auto': raggruppa i dati selezionati per valore x se tutte le selezioni hanno lo stesso valore x, altrimenti per serie.
  • 'none': mostra solo una descrizione comando per selezione.
aggregationTarget viene 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: "automatico"
animation.duration

La durata dell'animazione, in millisecondi. Per maggiori dettagli, consulta la documentazione sull'animazione.

Tipo:numero
Predefinito:0
animation.easing

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

  • 'linear' - Velocità costante.
  • 'in' - Facilità in entrata - Inizia piano e accelera.
  • 'out' - Facilità di uscita - Inizia velocemente e rallenta.
  • 'inAndOut' - Facilità di entrata e uscita - Inizia piano, accelera e poi rallenta.
Tipo:stringa
Predefinito: "lineare"
animation.startup

Determina se il grafico si anima sul disegno iniziale. Se true, il grafico inizierà dalla base di riferimento e si anima fino al suo stato finale.

Tipo: booleano
Predefinito: false
annotations.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
annotations.datum
Per i grafici che supportano le annotazioni, l'oggetto annotations.datum consente di ignorare la scelta di Google Graph per le annotazioni fornite per i singoli elementi dei dati (come i valori visualizzati con ogni barra di 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 è "point".
annotations.domain
Per i grafici che supportano le annotazioni, l'oggetto annotations.domain consente di ignorare la scelta di Google Graph per le annotazioni fornite per un dominio (l'asse principale del grafico, ad esempio l'asse X in un tipico grafico a linee). 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".
annotations.highContrast
Per i grafici che supportano le annotazioni, il valore booleano annotations.highContrast consente di sostituire la scelta di Google Graph per il colore dell'annotazione. Per impostazione predefinita, il valore annotations.highContrast è true e i grafici selezionano un colore dell'annotazione con un buon contrasto: colori chiari su sfondi scuri e scuri su sfondo chiaro. Se imposti annotations.highContrast su false e non specifichi un colore personalizzato per l'annotazione, i grafici di Google utilizzeranno il colore predefinito delle serie per l'annotazione:
Tipo: booleano
Predefinito:true
annotations.stem
Per i grafici che supportano le annotazioni, l'oggetto annotations.stem consente di sostituire la scelta di Google Graph 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 della lunghezza della radice non influisce sulle annotazioni con stile 'line': per le annotazioni del punto di origine 'line', la lunghezza della radice è sempre uguale al testo e, per le annotazioni del dominio 'line', la radice si estende sull'intero grafico.
Tipo:oggetto
Predefinito:il colore è "nero"; la lunghezza è 5 per le annotazioni del dominio e 12 per le annotazioni dei datum.
annotations.style
Per i grafici che supportano le annotazioni, l'opzione annotations.style consente di ignorare la scelta di Google relativa al tipo di annotazione. Può essere 'line' o 'point'.
Tipo:stringa
Predefinito: "point"
annotations.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 di annotazione .

Tipo:oggetto
Predefinito:null
axisTitlesPosition

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

  • in: consente di tracciare i titoli degli assi all'interno dell'area del grafico.
  • all'esterno: traccia i titoli degli assi al di fuori dell'area del grafico.
  • nessuno: ometti i titoli degli assi.
Tipo:stringa
Predefinito: 'out'
backgroundColor

Il colore di sfondo per l'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"
backgroundColor.stroke

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

Tipo:stringa
Predefinito: "#666"
backgroundColor.strokeWidth

Lo spessore del bordo, in pixel.

Tipo:numero
Predefinito:0
backgroundColor.fill

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

Tipo:stringa
Predefinito: "bianco"
chart.title

Per i grafici materiali, questa opzione specifica il titolo.

Tipo:stringa
Predefinito:null
chart.subtitle

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

Tipo:stringa
Predefinito:null
chartArea

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

Tipo:oggetto
Predefinito:null
chartArea.backgroundColor
Colore di sfondo dell'area del grafico. Quando si utilizza una stringa, 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 colore inglese.
  • strokeWidth: se fornito, disegna un bordo intorno all'area del grafico della larghezza specificata (e con il colore stroke).
Tipo: stringa o oggetto
Predefinito: "bianco"
chartArea.left

Quanto è distante il grafico dal bordo sinistro.

Tipo:numero o stringa.
Predefinita: automatica
chartArea.top

Quanto è distante il grafico dal bordo superiore.

Tipo:numero o stringa.
Predefinita: automatica
chartArea.width

Larghezza dell'area del grafico.

Tipo:numero o stringa.
Predefinita: automatica
chartArea.height

Altezza dell'area del grafico.

Tipo:numero o stringa.
Predefinita: automatica
colori

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

Tipo: array di stringhe
Predefinito:colori predefiniti
mirino

Un oggetto contenente le proprietà del mirino per il grafico.

Tipo:oggetto
Predefinito:null
crosshair.color

Il colore del mirino, espresso come nome di colore (ad es. "blu") o un valore RGB (ad es. "#adf").

Tipo:stringa
Tipo: predefinito
crosshair.focused

Un oggetto che contiene le proprietà del mirino attivato.
Esempio: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Tipo:oggetto
Predefinita: valore predefinito
crosshair.opacity

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

Tipo:numero
Predefinita: 1,0
crosshair.orientation

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

Tipo:stringa
Predefinito: "entrambe"
crosshair.selected

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

Tipo:oggetto
Predefinita: valore predefinito
crosshair.trigger

Quando visualizzare i mirino: su 'focus', 'selection' o 'both'.

Tipo:stringa
Predefinito: "entrambe"
curveType

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

  • "none": linee rette senza curve.
  • 'function' - Gli angoli della linea verranno smussati.
Tipo: stringa
Predefinito: "nessuno"
dataOpacity

La trasparenza dei punti dati, dove 1,0 corrisponde a completamente opaco e 0,0 a completamente trasparente. Nei grafici a dispersione, a istogramma, a barre e a colonne, si riferisce ai dati visibili: i punti nel grafico a dispersione e i rettangoli negli altri. Nei grafici in cui la selezione dei dati crea un punto, come 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 sugli altri grafici. Per modificare l'opacità di una linea di tendenza, consulta opacità della linea di tendenza .

Tipo:numero
Predefinita: 1,0
enableInteractivity

Indica se il grafico genera eventi basati sugli utenti o reagisce all'interazione dell'utente. Se il valore è false, il grafico non genera eventi di tipo "select" o altri eventi basati sull'interazione (ma genera eventi pronti o di errore) e non mostra il testo del passaggio del mouse o altri eventi basati sull'input dell'utente.

Tipo: booleano
Predefinito:true
explorer

L'opzione explorer consente agli utenti di eseguire la panoramica e lo zoom dei grafici di Google. explorer: {} offre il comportamento predefinito di esplorazione, che consente agli utenti di eseguire una panoramica orizzontale e verticale tramite trascinamento e di aumentare e diminuire lo zoom tramite scorrimento.

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

Nota: Explorer funziona solo con assi continui (come numeri o date).

Tipo:oggetto
Predefinito:null
explorer.actions

Esplora grafici di Google supporta tre azioni:

  • dragToPan: trascina per eseguire la panoramica del grafico orizzontalmente e verticalmente. Per eseguire la panoramica solo sull'asse orizzontale, utilizza explorer: { axis: 'horizontal' }. Analogamente, per l'asse verticale.
  • dragToZoom: il comportamento predefinito di Explorer prevede l'aumento e la riduzione dello zoom quando l'utente scorre. Se utilizzi explorer: { actions: ['dragToZoom', 'rightClickToReset'] }, trascini in un'area rettangolare lo zoom su quell'area. Ti consigliamo di utilizzare rightClickToReset ogni volta che viene usato dragToZoom. Consulta explorer.maxZoomIn, explorer.maxZoomOut e explorer.zoomDelta per le personalizzazioni dello zoom.
  • rightClickToReset: se fai clic con il tasto destro del mouse sul grafico, viene ripristinato il livello di panoramica e zoom originale.
Tipo: array di stringhe
Predefinito: ['dragToPan', 'rightClickToReset']
explorer.axis

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

Tipo:stringa
Predefinito:panoramica sia orizzontale che verticale
explorer.keepInBounds

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

Tipo: booleano
Predefinito:false
explorer.maxZoomIn

Il valore massimo che l'esplorazione può aumentare lo zoom. Per impostazione predefinita, gli utenti saranno in grado di aumentare lo zoom abbastanza da vedere solo il 25% della visualizzazione originale. L'impostazione explorer: { maxZoomIn: .5 } consentiva agli utenti di aumentare lo zoom solo abbastanza per vedere la metà della visualizzazione originale.

Tipo:numero
Predefinito:0,25
explorer.maxZoomOut

Il valore massimo consentito dall'explorer di zoom. Per impostazione predefinita, gli utenti saranno in grado di diminuire lo zoom abbastanza da far occupare solo 1/4 dello spazio disponibile al grafico. L'impostazione di explorer: { maxZoomOut: 8 } permetteva agli utenti di diminuire lo zoom abbastanza lontano da far occupare solo 1/8 dello spazio disponibile al grafico.

Tipo:numero
Predefinito:4
explorer.zoomDelta

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

Tipo:numero
Predefinita: 1,5
fontSize

La dimensione predefinita dei caratteri, in pixel, di tutto il testo nel grafico. Puoi eseguire l'override di questa preferenza utilizzando le proprietà per elementi specifici del grafico.

Tipo:numero
Predefinito:automatico
fontName

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

Tipo:stringa
Predefinito: 'Arial'
forceIFrame

Disegna il grafico all'interno di un frame in linea. Tieni presente che in IE8 questa opzione viene ignorata; tutti i grafici di IE8 vengono tracciati in i-frame.

Tipo: booleano
Predefinito:false
hAxis

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
Tipo:oggetto
Predefinito:null
hAxis.baseline

La base di riferimento per l'asse orizzontale.

Tipo:numero
Predefinito:automatico
hAxis.baselineColor

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

Una stringa di formato per le etichette dell'asse numerico. Questo è un sottoinsieme del set di pattern di ICU . Ad esempio, {format:'#,###%'} mostrerà i valori "1000%", "750%" e "50%" per i valori 10, 7,5 e 0,5. Puoi anche fornire uno qualsiasi dei seguenti elementi:

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

La formattazione effettiva applicata all'etichetta deriva dalle impostazioni internazionali con cui è stata caricata l'API. Per maggiori dettagli, consulta la sezione sul caricamento dei grafici con impostazioni internazionali specifiche .

Per il calcolo dei valori di selezione e delle linee della griglia, verranno prese in considerazione diverse combinazioni alternative di tutte le opzioni pertinenti delle linee della griglia e verranno rifiutate le alternative se le etichette di selezione formattate venissero duplicate o si sovrappongano. Pertanto, puoi specificare format:"#" se vuoi mostrare solo valori di selezione interi, ma tieni presente che se nessuna alternativa soddisfa questa condizione, non verranno mostrate linee della griglia o segni di graduazione.

Tipo:stringa
Predefinita: automatica
hAxis.gridlines

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

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

Il colore delle linee della griglia orizzontali 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 della griglia orizzontali all'interno dell'area del grafico. Se specifichi un numero positivo per gridlines.count, verrà utilizzato per calcolare il valore minSpacing tra le linee della griglia. Puoi specificare il valore 1 per tracciare una sola linea della griglia o 0 per non tracciare linee della griglia. Specifica -1 (impostazione predefinita) per calcolare automaticamente il numero di linee della griglia in base ad altre opzioni.

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

Sostituisce il formato predefinito per vari aspetti dei tipi di dati con 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
hAxis.minorGridlines

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
hAxis.minorGridlines.color

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

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

L'opzione minorGridlines.count è in gran parte deprecata, ad eccezione della disattivazione delle linee della griglia minori impostando il conteggio su 0. Il numero di linee della griglia secondarie ora dipende interamente dall'intervallo tra le linee della griglia principali (vedi hAxis.gridlines.interval) e lo spazio minimo richiesto (vedi hAxis.minorGridlines.minSpacing).

Tipo:numero
Predefinita:1
hAxis.minorGridlines.units

Consente di eseguire l'override del formato predefinito per vari aspetti dei tipi di dati con data/ora/ora del giorno quando utilizzato con linee di griglia minori calcolate nel 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
hAxis.logScale

hAxis che rende l'asse orizzontale una scala logaritmica (richiede che tutti i valori siano positivi). Imposta il valore su true per indicare sì.

Tipo: booleano
Predefinito:false
hAxis.scaleType

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

  • null: non viene eseguita alcuna scala logaritmica.
  • "log" - Scala logaritmica. I valori negativi e pari a zero non vengono rappresentati. Questa opzione equivale all'impostazione di hAxis: { logscale: true }.
  • "MirrorLog" - Scala logaritmica in cui sono tracciati valori negativi e zero. Il valore tracciato di un numero negativo è il negativo del logaritmo del valore assoluto. I valori vicini a 0 sono tracciati su una scala lineare.
Tipo:stringa
Predefinito: nullo
hAxis.textPosition

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

Tipo:stringa
Predefinito: 'out'
hAxis.textStyle

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 qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

Tipo:oggetto
Predefinita: {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 dell'array deve essere un valore di selezione valido (ad esempio un numero, una data, una data/ora o un'ora del giorno) oppure un oggetto. Se si tratta di un oggetto, deve avere una proprietà v per il valore di spunta e una proprietà f facoltativa contenente la stringa letterale da visualizzare come etichetta.

viewWindow verrà espanso automaticamente per includere i segni di graduazione minimo e massimo, a meno che non specifichi un valore viewWindow.min o viewWindow.max da sostituire.

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
Predefinita: automatica
hAxis.title

hAxis che specifica il titolo dell'asse orizzontale.

Tipo:stringa
Predefinito:null
hAxis.titleTextStyle

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

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

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

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

Sposta il valore massimo dell'asse orizzontale sul valore specificato. Questo sarà verso 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:automatico
hAxis.minValue

Sposta il valore minimo dell'asse orizzontale sul valore specificato. Questo sarà 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:automatico
hAxis.viewWindowMode

Consente di specificare come ridimensionare l'asse orizzontale per visualizzare i valori all'interno dell'area del grafico. Sono supportati i seguenti valori di stringa:

  • "pretty": scala i valori orizzontali in modo che i valori massimo e minimo dei dati vengano visualizzati un po' all'interno dei lati sinistro e destro dell'area del grafico. viewWindow viene espanso alla linea della griglia principale più vicina per i numeri o alla linea della griglia secondaria più vicina per date e orari.
  • "massimizzato": scala i valori orizzontali in modo che i valori massimo e minimo dei dati tocchino il lato sinistro e destro dell'area del grafico. haxis.viewWindow.min e haxis.viewWindow.max verranno ignorati.
  • "explicit": un'opzione deprecata per specificare i valori di scala sinistro e destro 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 visualizzare.
Tipo:stringa
Predefinita: equivale a "pretty", ma haxis.viewWindow.min e haxis.viewWindow.max hanno la precedenza, se utilizzati.
hAxis.viewWindow

Specifica l'intervallo di ritaglio dell'asse orizzontale.

Tipo:oggetto
Predefinito:null
hAxis.viewWindow.max

Il valore orizzontale massimo dei dati da visualizzare.

Ignorato quando il valore di hAxis.viewWindowMode è "Abbastanza" o "massimizzato".

Tipo:numero
Predefinita: automatica
hAxis.viewWindow.min

Il valore minimo orizzontale dei dati da visualizzare.

Ignorato quando il valore di hAxis.viewWindowMode è "Abbastanza" o "massimizzato".

Tipo:numero
Predefinita: automatica
altezza

Altezza del grafico, in pixel.

Tipo:numero
Predefinita: altezza dell'elemento contenitore
leggenda

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

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

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

  • "start" - Allineato all'inizio dell'area assegnata alla legenda.
  • "center": centrato nell'area assegnata alla legenda.
  • "end" - Allineato alla fine dell'area assegnata alla legenda.

Inizio, centro e fine sono relativi allo stile (verticale o orizzontale) della legenda. Ad esempio, in una legenda "a destra", "start" ed "end" si trovano rispettivamente in alto e in basso; per una legenda "in alto", "start" ed "end" si trovano rispettivamente a sinistra e a destra dell'area.

Il valore predefinito dipende dalla posizione della legenda. Per le legende "bottom", il valore predefinito è "center", mentre per le altre legende è "start".

Tipo:stringa
Predefinito:automatico
legend.maxLines

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

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

Tipo:numero
Predefinito:1
legend.pageIndex

Indice di pagina in base zero selezionato iniziale della legenda.

Tipo:numero
Predefinito:0
legend.position

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

  • "bottom": sotto il grafico.
  • "sinistra": a sinistra del grafico, a condizione che all'asse sinistro non siano associate serie. Pertanto, se vuoi la legenda a sinistra, utilizza l'opzione targetAxisIndex: 1.
  • "in": all'interno del grafico, nell'angolo in alto a sinistra.
  • "none": non viene visualizzata alcuna legenda.
  • "destra": a destra del grafico. Incompatibile con l'opzione vAxes.
  • 'top' - Sopra il grafico.
Tipo:stringa
Predefinito: "right"
legend.textStyle

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

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

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

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

Spessore linea in pixel. Utilizza il valore zero per nascondere tutte le linee e mostrare solo i punti.

Tipo:numero
Predefinito:0
orientamento

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

Tipo:stringa
Predefinito: "orizzontale"
pointShape

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

Tipo:stringa
Predefinito: "cerchio"
pointSize

Diametro dei punti dati, in pixel. Utilizza il valore zero per nascondere tutti i punti. Puoi eseguire l'override dei valori per singole serie utilizzando la proprietà series. Se utilizzi una linea di tendenza, questa opzione influirà anche sul pointSize dei punti che la include, che modificherà la larghezza apparente della linea di tendenza. Per evitare che ciò accada, puoi eseguirne l'override con l'opzione trendlines.n.pointsize.

Tipo:numero
Predefinito:7
pointsVisible

Consente di stabilire se visualizzare o meno i punti. Imposta su false per nascondere tutti i punti. Puoi eseguire l'override dei valori per singole serie utilizzando la proprietà series. Se stai utilizzando una linea di tendenza, l'opzione pointsVisible influisce sulla visibilità dei punti su tutte le linee di tendenza, a meno che non la sostituisci con l'opzione trendlines.n.pointsVisible.

È anche possibile eseguire l'override di questo tipo utilizzando il ruolo di stile nel formato "point {visible: true}".

Tipo: booleano
Predefinito:true
selectionMode

Se il valore di selectionMode è 'multiple', gli utenti possono selezionare più punti dati.

Tipo:stringa
Predefinito: "singolo"
serie

Un array di oggetti, ognuno dei quali 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 lineWidth per questa serie.
  • pointShape: esegue l'override del valore globale pointShape per questa serie.
  • pointSize: sostituisce il valore globale pointSize per questa serie.
  • pointsVisible: esegue l'override del valore globale pointsVisible per questa serie.
  • visibleInLegend: un valore booleano in cui true significa che la serie deve avere una voce di legenda, mentre false indica che non deve farlo. Il valore predefinito è true.

Puoi specificare un array di oggetti, ognuno dei quali si applica alla serie nell'ordine specificato oppure puoi specificare un oggetto in cui ogni elemento figlio ha una chiave numerica che indica a quale serie si applica. Ad esempio, le due dichiarazioni seguenti 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 oppure oggetto con oggetti nidificati
Predefinito: {}
tema

Un tema è un insieme di valori di opzioni predefiniti che funzionano insieme per ottenere un comportamento o un effetto visivo specifico del grafico. Al momento è disponibile un solo tema:

  • "maximized": ingrandisce l'area del grafico e disegna la legenda e tutte le etichette al suo interno. Consente di impostare 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
titlePosition

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

  • in: disegna il titolo all'interno dell'area del grafico.
  • all'esterno: traccia il titolo fuori dall'area del grafico.
  • nessuno: ometti il titolo.
Tipo:stringa
Predefinito: 'out'
titleTextStyle

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

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

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

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

Un oggetto con membri per configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

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

Se impostato su true, consente al disegno delle descrizioni comando di scorrere al di fuori dei limiti del grafico su tutti i lati.

Nota:questo vale solo per le descrizioni comando HTML. Se questa funzionalità è abilitata con le descrizioni comando SVG, qualsiasi overflow al di fuori dei limiti del grafico verrà ritagliato. Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando.

Tipo: booleano
Predefinito:false
tooltip.isHtml

Se il criterio viene impostato su true, utilizza le descrizioni comando per il rendering HTML (anziché SVG). Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando.

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

Tipo: booleano
Predefinito:false
tooltip.showColorCode

Se il valore è vero, mostra i quadrati colorati accanto alle informazioni sulla serie nella descrizione comando.

Tipo: booleano
Predefinito:false
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 qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

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

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

  • "focus" - La descrizione comando viene visualizzata quando l'utente passa il mouse sopra l'elemento.
  • "nessuno" - La descrizione comando non verrà visualizzata.
  • "selection" - La descrizione comando verrà visualizzata quando l'utente selezionerà l'elemento.
Tipo:stringa
Predefinito: "focus"
linee di tendenza

Visualizza le linee di tendenza nei grafici che le supportano. Per impostazione predefinita vengono utilizzate linee di tendenza lineari, ma questa opzione può essere personalizzata con l'opzione trendlines.n.type.

Le linee di tendenza sono specificate in base alla serie, quindi la maggior parte delle volte le opzioni saranno simili alla seguente: 

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

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

Tipo:stringa
Predefinito:colore predefinito della serie
trendlines.n.degree

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 prossima versione di Google Classifiche).

Tipo:numero
Predefinito:3
trendlines.n.labelInLegend

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

Tipo:stringa
Predefinito:null
trendlines.n.lineWidth

Lo spessore della linea di tendenza , in pixel.

Tipo:numero
Predefinito:2
trendlines.n.opacity

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

Tipo:numero
Predefinita: 1,0
trendlines.n.pointSize

Le linee di tendenza sono costruite inserendo una serie di punti sul grafico; questa opzione raramente necessaria ti consente di personalizzare la dimensione dei punti. In genere è preferibile l'opzione lineWidth della linea di tendenza. Tuttavia, questa opzione è necessaria se utilizzi l'opzione globale pointSize e vuoi una dimensione in punti diversa per le linee di tendenza.

Tipo:numero
Predefinito:1
trendlines.n.pointsVisible

Le linee di tendenza sono costruite tracciando una serie 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
trendlines.n.showR2

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

Tipo: booleano
Predefinito:false
trendlines.n.type

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

Tipo:stringa
Predefinito:lineare
trendlines.n.visibleInLegend

Indica se l'equazione della linea di tendenza compare nella legenda. Apparirà nella descrizione comando della linea di tendenza.

Tipo: booleano
Predefinito:false
vAxis

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

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

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

Tipo:numero
Predefinito:automatico
vAxis.baselineColor

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 nella parte inferiore del grafico. Specifica -1 per invertire l'ordine dei valori.

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

Una stringa di formato per le etichette dell'asse numerico. Questo è un sottoinsieme del set di pattern di ICU . Ad esempio, {format:'#,###%'} mostrerà i valori "1000%", "750%" e "50%" per i valori 10, 7,5 e 0,5. Puoi anche fornire uno qualsiasi dei seguenti elementi:

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

La formattazione effettiva applicata all'etichetta deriva dalle impostazioni internazionali con cui è stata caricata l'API. Per maggiori dettagli, consulta la sezione sul caricamento dei grafici con impostazioni internazionali specifiche .

Per il calcolo dei valori di selezione e delle linee della griglia, verranno prese in considerazione diverse combinazioni alternative di tutte le opzioni pertinenti delle linee della griglia e verranno rifiutate le alternative se le etichette di selezione formattate venissero duplicate o si sovrappongano. Pertanto, puoi specificare format:"#" se vuoi mostrare solo valori di selezione interi, ma tieni presente che se nessuna alternativa soddisfa questa condizione, non verranno mostrate linee della griglia o segni di graduazione.

Tipo:stringa
Predefinita: automatica
vAxis.gridlines

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

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

Il colore delle linee della griglia verticali 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 della griglia orizzontali all'interno dell'area del grafico. Se specifichi un numero positivo per gridlines.count, verrà utilizzato per calcolare il valore minSpacing tra le linee della griglia. Puoi specificare il valore 1 per tracciare una sola linea della griglia o 0 per non tracciare linee della griglia. Specifica -1 (impostazione predefinita) per calcolare automaticamente il numero di linee della griglia in base ad altre opzioni.

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

Sostituisce il formato predefinito per vari aspetti dei tipi di dati con 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
vAxis.minorGridlines

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

Tipo:oggetto
Predefinito:null
vAxis.minorGridlines.color

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

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

L'opzione minorGridlines.count è in gran parte deprecata, ad eccezione della disattivazione delle linee della griglia minori 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 lo spazio minimo richiesto (vedi vAxis.minorGridlines.minSpacing).

Tipo:numero
Predefinito:1
vAxis.minorGridlines.units

Consente di eseguire l'override del formato predefinito per vari aspetti dei tipi di dati con data/ora/ora del giorno quando utilizzato con linee di griglia minori calcolate nel 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
vAxis.logScale

Se il valore è true, l'asse verticale diventa una scala logaritmica. Nota: tutti i valori devono essere positivi.

Tipo: booleano
Predefinito:false
vAxis.scaleType

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

  • null: non viene eseguita alcuna scala logaritmica.
  • "log" - Scala logaritmica. I valori negativi e pari a zero non vengono rappresentati. Questa opzione equivale all'impostazione di vAxis: { logscale: true }.
  • "MirrorLog" - Scala logaritmica in cui sono tracciati valori negativi e zero. Il valore tracciato di un numero negativo è il negativo del logaritmo del valore assoluto. I valori vicini a 0 sono 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", "none".

Tipo:stringa
Predefinito: 'out'
vAxis.textStyle

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 qualsiasi stringa di colore HTML, ad esempio 'red' o '#00cc00'. Vedi anche fontName e fontSize.

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

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

viewWindow verrà espanso automaticamente per includere i segni di graduazione minimo e massimo, a meno che non specifichi un valore viewWindow.min o viewWindow.max da sostituire.

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
Predefinita: automatica
vAxis.title

Proprietà vAxis che specifica un titolo per l'asse verticale.

Tipo:stringa
Predefinito:nessun titolo
vAxis.titleTextStyle

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

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

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

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

Sposta il valore massimo dell'asse verticale sul valore specificato; 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:automatico
vAxis.minValue

Sposta il valore minimo dell'asse verticale sul valore specificato. Sarà verso il basso nella maggior parte dei grafici. Ignorato se impostato su un valore maggiore del valore y minimo dei dati. vAxis.viewWindow.min sostituisce questa proprietà.

Tipo:numero
Predefinito:null
vAxis.viewWindowMode

Consente di specificare come scalare l'asse verticale per visualizzare i 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 un po' all'interno della parte inferiore e superiore dell'area del grafico. viewWindow viene espanso alla linea della griglia principale più vicina per i numeri o alla linea della griglia secondaria più vicina per date e orari.
  • "massimizzato": scala i valori verticali in modo che i valori massimo e minimo dei dati tocchino la parte superiore e inferiore dell'area del grafico. vaxis.viewWindow.min e vaxis.viewWindow.max verranno ignorati.
  • "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 visualizzare.
Tipo:stringa
Predefinita: equivale 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 verticale massimo dei dati da visualizzare.

Ignorato quando il valore di vAxis.viewWindowMode è "Abbastanza" o "massimizzato".

Tipo:numero
Predefinita: automatica
vAxis.viewWindow.min

Il valore verticale minimo dei dati da visualizzare.

Ignorato quando il valore di vAxis.viewWindowMode è "Abbastanza" o "massimizzato".

Tipo:numero
Predefinita: automatica
larghezza

Larghezza del grafico, in pixel.

Tipo:numero
Predefinita: larghezza dell'elemento contenitore

Metodi

Metodo
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato l'evento ready. Extended description.

Tipo di reso: nessuno
getAction(actionID)

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

Tipo restituito: oggetto
getBoundingBox(id)

Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dell'elemento del grafico id. Il formato per id non è ancora documentato (sono i valori restituiti 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 segmento di un grafico a torta
cli.getBoundingBox('slice#4')
Riquadro di delimitazione dei dati di un grafico verticale (ad es. a colonne):
cli.getBoundingBox('vAxis#0#gridline')
Riquadro di delimitazione dei dati di un grafico orizzontale (ad es. a barre):
cli.getBoundingBox('hAxis#0#gridline')

I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato.

Tipo restituito: oggetto
getChartAreaBoundingBox()

Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dei contenuti del grafico (ovvero, escludendo etichette e 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. Viene chiamato dopo che il grafico è stato disegnato.

Tipo restituito: oggetto
getChartLayoutInterface()

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

I seguenti metodi possono essere chiamati sull'oggetto restituito:

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

Viene chiamato dopo che il grafico è stato disegnato.

Tipo restituito: oggetto
getHAxisValue(xPosition, optional_axis_index)

Restituisce il valore orizzontale dei dati in xPosition, ovvero un offset di pixel dal bordo sinistro del contenitore del grafico. Può essere negativo.

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

Viene chiamato dopo che il grafico è stato disegnato.

Tipo di reso:number
getImageURI()

Restituisce il grafico serializzato come URI immagine.

Viene chiamato dopo che il grafico è stato disegnato.

Consulta la sezione Stampa di grafici PNG.

Tipo di ritorno:stringa
getSelection()

Restituisce un array delle entità del grafico selezionate. Le entità selezionabili sono punti e voci legenda. Un punto corrisponde a una cella nella tabella dati e a una voce di legenda a una colonna (l'indice di riga è nullo). Per questo grafico, è possibile selezionare una sola entità alla volta. Extended description

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

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

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

Viene chiamato dopo che il grafico è stato disegnato.

Tipo di reso:number
getXLocation(dataValue, optional_axis_index)

Restituisce la coordinata x dei pixel di dataValue rispetto al bordo sinistro del contenitore del grafico.

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

Viene chiamato dopo che il grafico è stato disegnato.

Tipo di reso:number
getYLocation(dataValue, optional_axis_index)

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

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

Viene chiamato dopo che il grafico è stato disegnato.

Tipo di reso:number
removeAction(actionID)

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

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 prende un oggetto come parametro di azione. Questo oggetto deve specificare tre proprietà: id: l'ID dell'azione da impostare, text, il testo da visualizzare nella descrizione comando dell'azione, e action, la funzione da eseguire quando un utente fa clic sul testo dell'azione.

Qualsiasi azione della descrizione comando deve essere impostata prima di chiamare il metodo draw() del grafico. Descrizione estesa.

Tipo di reso: none
setSelection()

Seleziona le entità del grafico specificate. Annulla la selezione precedente. Le entità selezionabili sono punti e voci legenda. Un punto corrisponde a una cella nella tabella dati e a una voce di legenda a una colonna (l'indice di riga è nullo). 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 maggiori informazioni su come utilizzare questi eventi, consulta Interattività di base, Gestione degli eventi e Attivazione degli eventi.

Nome
animationfinish

Attivato al termine dell'animazione della transizione.

Proprietà:nessuna
click

Attivato quando l'utente fa clic all'interno del grafico. Può essere utilizzato per identificare quando viene fatto clic su titolo, elementi di dati, voci della legenda, assi, linee della 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. Restituisce l'indice di pagina in base zero della legenda attuale e il numero totale di pagine.

Proprietà: currentPageIndex, totalPages
onmouseover

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

Proprietà:riga, colonna
onmouseout

Attivato quando l'utente allontana il mouse dall'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente.

Proprietà:riga, colonna
ready

Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo draw e richiamarli solo dopo l'attivazione dell'evento.

Proprietà:nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama getSelection().

Proprietà:nessuna

Norme sui dati

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