Istogramma

Panoramica

Un istogramma è un grafico che raggruppa i dati numerici in fasce, mostrandole come colonne segmentate. Sono usate per rappresentare la distribuzione di un set di dati, ovvero la frequenza con cui i valori rientrano in intervalli.

Google Chart sceglie automaticamente il numero di bin. Tutte le fasce hanno la stessa larghezza e un'altezza proporzionale al numero di punti dati nella fascia. Per altri aspetti, gli istogrammi sono simili ai grafici a colonne.

Esempio

Ecco un istogramma delle lunghezze dei dinosauri:

L'istogramma indica che la tana più comune è < 10 metri e che c'è un solo dinosauro al di sopra dei 40 metri. Possiamo passare il mouse sopra la barra per scoprire che si tratta del sismosauro (che potrebbe essere solo un Diplodocus molto grande; i paleontologi non ne sono sicuri).

Di seguito è riportato il codice per generare questo istogramma. Dopo aver definito i dati (qui, con google.visualization.arrayToDataTable), il grafico viene definito con una chiamata a google.visualization.Histogram e disegnato con il metodo draw.

<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([
          ['Dinosaur', 'Length'],
          ['Acrocanthosaurus (top-spined lizard)', 12.2],
          ['Albertosaurus (Alberta lizard)', 9.1],
          ['Allosaurus (other lizard)', 12.2],
          ['Apatosaurus (deceptive lizard)', 22.9],
          ['Archaeopteryx (ancient wing)', 0.9],
          ['Argentinosaurus (Argentina lizard)', 36.6],
          ['Baryonyx (heavy claws)', 9.1],
          ['Brachiosaurus (arm lizard)', 30.5],
          ['Ceratosaurus (horned lizard)', 6.1],
          ['Coelophysis (hollow form)', 2.7],
          ['Compsognathus (elegant jaw)', 0.9],
          ['Deinonychus (terrible claw)', 2.7],
          ['Diplodocus (double beam)', 27.1],
          ['Dromicelomimus (emu mimic)', 3.4],
          ['Gallimimus (fowl mimic)', 5.5],
          ['Mamenchisaurus (Mamenchi lizard)', 21.0],
          ['Megalosaurus (big lizard)', 7.9],
          ['Microvenator (small hunter)', 1.2],
          ['Ornithomimus (bird mimic)', 4.6],
          ['Oviraptor (egg robber)', 1.5],
          ['Plateosaurus (flat lizard)', 7.9],
          ['Sauronithoides (narrow-clawed lizard)', 2.0],
          ['Seismosaurus (tremor lizard)', 45.7],
          ['Spinosaurus (spiny lizard)', 12.2],
          ['Supersaurus (super lizard)', 30.5],
          ['Tyrannosaurus (tyrant lizard)', 15.2],
          ['Ultrasaurus (ultra lizard)', 30.5],
          ['Velociraptor (swift robber)', 1.8]]);

        var options = {
          title: 'Lengths of dinosaurs, in meters',
          legend: { position: 'none' },
        };

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

Le etichette (qui i nomi dei dinosauri) possono essere omesse, nel qual caso le descrizioni comando mostreranno solo il valore numerico.

Controllo dei colori

Ecco un istogramma delle popolazioni nazionali:

Ci sono oltre 200 paesi con popolazioni inferiori ai 100 milioni, seguite da una forte caduta.

Questo istogramma utilizza l'opzione colors per disegnare i dati in verde:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['green'],
  };

Come per tutti i grafici Google, i colori possono essere specificati come nomi in inglese o come valori esadecimali.

Controllo dei bucket

Per impostazione predefinita, Google Graph sceglie automaticamente la dimensione del bucket utilizzando un noto algoritmo per gli istogrammi. Tuttavia, potresti voler eseguire l'override di questa opzione e il grafico riportato sopra è un esempio. Con così tanti paesi nel primo bucket, è difficile esaminarli negli altri.

In situazioni come questa, l'istogramma fornisce due opzioni: histogram.bucketSize, che sostituisce l'algoritmo e definisce la dimensione del bucket come hardcoded e histogram.lastBucketPercentile. La seconda opzione richiede più spiegazione: modifica il calcolo delle dimensioni dei bucket per ignorare i valori superiori o inferiori ai valori rimanenti in base alla percentuale specificata. I valori sono comunque inclusi nell'istogramma, ma non influiscono sul modo in cui vengono suddivisi in bucket. Ciò è utile quando non vuoi che gli outlier vengano inseriti nei rispettivi bucket, perché verranno raggruppati con il primo o l'ultimo bucket.

Nel grafico riportato sopra, abbiamo ignorato i primi cinque e il cinque percento inferiore dei valori durante il calcolo delle dimensioni del bucket. I valori sono ancora riportati in un grafico; l'unica cosa a cambiare è la dimensione del bucket, ma rende più leggibile l'istogramma.

Questo esempio mostra anche come modificare la scala dell'asse verticale per utilizzare la scala di mirroring del log, che è utile anche per creare grafici di dati con una lunga coda di valori piccoli.

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { lastBucketPercentile: 5 },
    vAxis: { scaleType: 'mirrorLog' }
  };

Come puoi vedere, la rimozione del cinque per cento superiore e inferiore dal calcolo porta a una dimensione del bucket di 10.000.000 anziché 100.000.000 che sarebbe stato altrimenti. Se sapessi fin da subito che una dimensione del bucket pari a 10.000.000 era quella che volevi, avresti potuto utilizzare histogram.bucketSize per farlo:

  var options = {
    title: 'Country Populations',
    legend: { position: 'none' },
    colors: ['#e7711c'],
    histogram: { bucketSize: 10000000 }
  };

Nell'esempio seguente, viene illustrato come espandere l'intervallo dei bucket e visualizzare molti altri bucket senza spazi vuoti. L'opzione maxNumBuckets può essere utilizzata per aumentare il numero predefinito di bucket. Le opzioni histogram.minValue e histogram.maxValue ampliano l'intervallo dei bucket, ma tieni presente che, se esistono dati al di fuori di questo intervallo, queste opzioni non ridurranno l'intervallo.

Questo esempio mostra anche che puoi specificare i segni di graduazione da visualizzare per ciascuno dei bucket utilizzando l'opzione ticks esplicita per hAxis. Ciò non influisce sui bucket stessi, ma solo sulla modalità di visualizzazione dei segni di graduazione.

Tieni inoltre presente che specifichiamo il chartArea.width in modo che il numero di bucket si adatti in modo più preciso senza artefatti visivi. Ecco le opzioni disponibili per questo esempio.

  var options = {
    title: 'Approximating Normal Distribution',
    legend: { position: 'none' },
    colors: ['#4285F4'],

    chartArea: { width: 405 },
    hAxis: {
      ticks: [-1, -0.75, -0.5, -0.25, 0, 0.25, 0.5, 0.75, 1]
    },
    bar: { gap: 0 },

    histogram: {
      bucketSize: 0.01,
      maxNumBuckets: 400,
      minValue: -1,
      maxValue: 1
    }
  };

Più serie

Ecco un istogramma delle cariche di particelle subatomiche, secondo il modello standard:

Il grafico in alto ha una serie contenente tutte le particelle. Le particelle subatomiche possono essere divise in quattro gruppi: quark, leptoni e bosoni. Consideriamo ciascuna serie come una serie a sé stante:

In questo grafico utilizziamo una serie diversa (e quindi un colore) per ciascuno dei quattro tipi di particella subatomica. Abbiamo impostato esplicitamente interpolateNulls su false per garantire che i valori nulli (necessario perché le serie siano di lunghezza diversa) non vengano tracciati. Inoltre, abbiamo impostato legend.maxLines per aggiungere un'altra riga alla legenda:

  var data = google.visualization.arrayToDataTable([
    ['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
    [2/3, -1, 0, 0],
    [2/3, -1, 0, null],
    [2/3, -1, 0, null],
    [-1/3, 0, 1, null],
    [-1/3, 0, -1, null],
    [-1/3, 0, null, null],
    [-1/3, 0, null, null]
  ]);

  var options = {
    title: 'Charges of subatomic particles',
    legend: { position: 'top', maxLines: 2 },
    colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
    interpolateNulls: false,
  };

Caricamento in corso...

Il nome del pacchetto google.charts.load è "corechart".

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

Il nome della classe della visualizzazione è google.visualization.Histogram:

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

Formato dei dati

Esistono due modi per completare una tabella dati a istogrammi. Quando c'è una sola serie:

  var data = google.visualization.arrayToDataTable([
    ['Name', 'Number'],
    ['Name 1', number1],
    ['Name 2', number2],
    ['Name 3', number3],
    ...
  ]);

...e quando ci sono più serie:

  var data = google.visualization.arrayToDataTable([
    ['Series Name 1', 'Series Name 2', 'Series Name 3', ...],
    [series1_number1, series2_number1, series3_number1, ...],
    [series1_number2, series2_number2, series3_number2, ...],
    [series1_number3, series2_number3, series3_number3, ...],
    ...
  ]);

Al momento non sono supportati ruoli facoltativi delle colonne per gli istogrammi.

Opzioni di configurazione

Nome
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
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"
bar.groupWidth
La larghezza di un gruppo di barre, specificata in uno dei seguenti formati:
  • Pixel (ad es. 50).
  • Percentuale della larghezza disponibile per ogni gruppo (ad es. "20%"), dove "100%" indica che i gruppi non hanno spazi tra loro.
Tipo:numero o stringa.
Predefinito: il rapporto aurei, circa "61,8%".
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
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
focusTarget

Il tipo di entità che viene attivata al passaggio del mouse. Influisce anche sull'entità selezionata tramite il clic del mouse e sull'elemento della tabella di dati associato agli eventi. Può essere uno dei seguenti:

  • "datum": concentrati su un singolo punto dati. Correla con una cella nella tabella dati.
  • "categoria" - Consente di raggruppare tutti i punti dati lungo l'asse principale. Correla con una riga nella tabella di dati.

In focusTarget "category" la descrizione comando visualizza tutti i valori della categoria. Questo può essere utile per confrontare i valori di serie diverse.

Tipo:stringa
Predefinito: "datum"
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.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.interval

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

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

Lo spazio minimo sullo schermo, in pixel, tra le linee della griglia principali in hAxis. L'impostazione predefinita per le linee della griglia principali è 40 per le scale lineari e 20 per le scale log. Se specifichi count e non minSpacing, la metrica minSpacing viene calcolata in base al conteggio. Al contrario, se specifichi minSpacing e non count, il conteggio viene calcolato in base a minSpacing. Se specifichi entrambi, minSpacing esegue l'override.

Tipo:numero
Predefinito:calcolato
hAxis.gridlines.multiple

Tutti i valori della linea della griglia e dei segni di graduazione devono essere un multiplo del valore di questa opzione. Tieni presente che, a differenza degli intervalli, le potenze pari a 10 volte il multiplo non vengono considerate. Di conseguenza, puoi forzare i tick in modo che siano numeri interi specificando gridlines.multiple = 1 oppure in modo che siano multipli di 1000 specificando gridlines.multiple = 1000.

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

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

Tipo:numero
Predefinita:1
hAxis.minorGridlines.minSpacing

Lo spazio minimo richiesto, in pixel, tra le linee della griglia minori adiacenti e tra le linee della griglia minori e principali. Il valore predefinito è 1/2 del valore minSpacing delle linee della griglia principali per le scale lineari e 1/5 di minSpacing per le scale log.

Tipo:numero
Predefinito:calcolato
hAxis.minorGridlines.multiple

Uguale a quello dei gridlines.multiple principali.

Tipo:numero
Predefinito: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.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.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.allowContainerBoundaryTextCutoff

Se il valore è false, vengono nascoste le etichette più esterne anziché consentire che vengano ritagliate dal contenitore del grafico. Se impostato su true, consente il ritaglio delle etichette.

Tipo: booleano
Predefinito:false
hAxis.slantedText

Se il valore è vero, disegna il testo sull'asse orizzontale con un angolo per far sì che sia più testo lungo l'asse; se il testo è falso, disegna il testo sull'asse orizzontale in verticale. Il comportamento predefinito prevede l'inclinazione del testo se non viene completamente adattato quando il testo è disegnato in verticale. Tieni presente che questa opzione è disponibile solo quando hAxis.textPosition è impostato su "out" (che è l'impostazione predefinita). Il valore predefinito è false per le date e gli orari.

Tipo: booleano
Predefinito:automatico
hAxis.slantedTextAngle

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

Tipo: numero, -90—90
Predefinito:30
hAxis.maxAlternation

Numero massimo di livelli di testo dell'asse orizzontale. Se le etichette di testo degli assi diventano troppo affollate, il server potrebbe spostare le etichette vicine verso l'alto o verso il basso per avvicinare le etichette. Questo valore specifica il maggior numero di livelli da utilizzare. Il server può utilizzare meno livelli se le etichette possono adattarsi senza sovrapposizioni. Per le date e gli orari, il valore predefinito è 1.

Tipo:numero
Predefinito:2
hAxis.maxTextLines

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

Tipo:numero
Predefinita: automatica
hAxis.minTextSpacing

Spaziatura orizzontale minima, in pixel, consentita tra due etichette di testo adiacenti. Se le etichette sono distanziate troppo densamente o sono troppo lunghe, la spaziatura può scendere al di sotto di questa soglia e, in questo caso, verrà applicata una delle misure per evitare l'ingombro (ad es.troncare le etichette o eliminarne alcune).

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

Numero di etichette sull'asse orizzontale da visualizzare, dove 1 significa mostrare ogni etichetta, 2 significa mostrare ogni altra etichetta e così via. L'impostazione predefinita è provare a mostrare il maggior numero possibile di etichette senza sovrapposizioni.

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

L'indice di riga in base zero dove termina la finestra di ritaglio. I punti dati a questo indice e a quelli superiori verranno ritagliati. Insieme a vAxis.viewWindowMode.min, definisce un intervallo semiaperto [min, max) che indica gli indici dell'elemento da visualizzare. In altre parole, ogni indice tale che min <= index < max verrà visualizzato.

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

Tipo:numero
Predefinita: automatica
hAxis.viewWindow.min

L'indice di riga in base zero in cui inizia la finestra di ritaglio. I punti dati in corrispondenza di indici inferiori a questo valore verranno ritagliati. Insieme a vAxis.viewWindowMode.max, definisce un intervallo semiaperto [min, max) che indica gli indici dell'elemento da visualizzare. In altre parole, verrà visualizzato ogni indice tale da min <= index < max.

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

Tipo:numero
Predefinita: automatica
histogram.bucketSize

Specifica come hardcoded la dimensione di ogni barra dell'istogramma, anziché consentire di determinarla in modo algoritmico.

Tipo:numero
Predefinita: automatica
histogram.hideBucketItems

Ometti le sottili divisioni tra i blocchi dell'istogramma, in modo da formare una serie di barre solide.

Tipo: booleano
Predefinito:false
histogram.lastBucketPercentile

Quando calcoli le dimensioni del bucket dell'istogramma, ignora la percentuale superiore e inferiore (lastBucketPercentile). I valori sono comunque inclusi nell'istogramma, ma non influiscono sul bucketing.

Tipo:numero
Predefinito:0
histogram.minValue

Espandi l'intervallo di bucket per includere questo valore.

Tipo:numero
Predefinito:automatico, utilizza il minimo di dati
histogram.maxValue

Espandi l'intervallo di bucket per includere questo valore.

Tipo:numero
Predefinito:automatico. Utilizza il valore massimo per i dati
histogram.numBucketsRule

Come calcolare il numero predefinito di bucket. I valori possibili sono:

  • 'sqrt': calcola la radice quadrata del numero di punti dati.
  • 'sturges' - Ricavato dalla distribuzione binomiale. Presuppone implicitamente una distribuzione approssimativamente normale.
  • 'rice' - Un'alternativa più semplice alla regola di Sturges.
Per ulteriori dettagli, consulta Wikipedia - Istogramma: numero di bin e larghezza

Tipo:stringa
Predefinita:'sqrt'
altezza

Altezza del grafico, in pixel.

Tipo:numero
Predefinita: altezza dell'elemento contenitore
interpolateNulls

Se indovinare il valore dei punti mancanti. Se è vero, il valore degli eventuali dati mancanti verrà indovinato in base ai punti vicini. Se il valore è false, lascerà un'interruzione nella linea nel punto sconosciuto.

Questa operazione non è supportata dai grafici ad area con l'opzione isStacked: true/'percent'/'relative'/'absolute'.

Tipo: booleano
Predefinito:false
isStacked

Se impostato su true, impila gli elementi di tutte le serie in base al valore di ciascun dominio. Nota: nei grafici Column, Area e SteppedArea, Google Graph inverte l'ordine degli elementi della legenda per corrispondere meglio alla sovrapposizione degli elementi della serie (ad esempio, la serie 0 sarà l'elemento della legenda più in basso). Questo non si applica ai grafici a barre.

L'opzione isStacked supporta anche lo stack al 100%, in cui gli stack degli elementi a ciascun valore di dominio vengono ridimensionati per arrivare alla somma del 100%.

Le opzioni per isStacked sono:

  • false: gli elementi non si sovrappongano. Questa è l'opzione predefinita.
  • true: impila gli elementi di tutte le serie in base a ciascun valore del dominio.
  • 'percent': impila gli elementi di tutte le serie in base a ciascun valore di dominio e li scala in modo da sommarli fino al 100%, con il valore di ogni elemento calcolato come percentuale del 100%.
  • 'relative': sovrappone gli elementi di tutte le serie in base a ciascun valore di dominio e li scala in modo che la somma sia 1, con il valore di ogni elemento calcolato come frazione di 1.
  • 'absolute': funziona come isStacked: true.

Per la sovrapposizione al 100%, il valore calcolato per ogni elemento verrà visualizzato nella descrizione comando dopo il valore effettivo.

Per impostazione predefinita, l'asse target utilizza i valori di spunta basati sulla scala 0-1 relativa come frazioni di 1 per 'relative' e tra 0-100% per 'percent' (Nota: quando utilizzi l'opzione 'percent', i valori dell'asse/di graduazione vengono visualizzati in percentuale, ma i valori effettivi sono i valori relativi della scala 0-1. Questo perché i segni di graduazione dell'asse percentuale sono il risultato dell'applicazione del formato "#,##%" ai relativi valori di scala 0-1. Quando utilizzi isStacked: 'percent', assicurati di specificare eventuali segni di graduazione/linee della griglia utilizzando i relativi valori della scala 0-1). Puoi personalizzare le linee della griglia/i valori di graduazione e la formattazione utilizzando le opzioni di hAxis/vAxis appropriate.

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

Tipo:booleano/stringa
Predefinito:false
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>}
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"
reverseCategories

Se il valore è impostato su true, le serie verranno tracciate da destra a sinistra. L'impostazione predefinita è disegnare da sinistra a destra.

Tipo: booleano
Predefinito:false
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.
  • targetAxisIndex - A quale asse assegnare questa serie, dove 0 è l'asse predefinito e 1 è l'asse opposto. Il valore predefinito è 0. Impostalo su 1 per definire un grafico in cui vengono visualizzate serie diverse su assi diversi. Almeno una serie deve essere allocata all'asse predefinito. Puoi definire una scala diversa per assi diversi.
  • 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.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. Il valore predefinito è true quando focusTarget è impostato su 'category', altrimenti il valore predefinito è false.

Tipo: booleano
Predefinito:automatico
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.
Tipo:stringa
Predefinito: "focus"
vAxes

Specifica le proprietà dei singoli assi verticali, se il grafico ha più assi verticali. Ogni oggetto secondario è un oggetto vAxis e può contenere tutte le proprietà supportate da vAxis. Questi valori di proprietà sostituiscono qualsiasi impostazione globale per la stessa proprietà.

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

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

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

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Tipo: array di oggetti oppure oggetti con oggetti secondari
Predefinito:null
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.interval

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

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

Lo spazio minimo sullo schermo, in pixel, tra le linee della griglia principali in hAxis. L'impostazione predefinita per le linee della griglia principali è 40 per le scale lineari e 20 per le scale log. Se specifichi count e non minSpacing, la metrica minSpacing viene calcolata in base al conteggio. Al contrario, se specifichi minSpacing e non count, il conteggio viene calcolato in base a minSpacing. Se specifichi entrambi, minSpacing esegue l'override.

Tipo:numero
Predefinito:calcolato
vAxis.gridlines.multiple

Tutti i valori della linea della griglia e dei segni di graduazione devono essere un multiplo del valore di questa opzione. Tieni presente che, a differenza degli intervalli, le potenze pari a 10 volte il multiplo non vengono considerate. Di conseguenza, puoi forzare i tick in modo che siano numeri interi specificando gridlines.multiple = 1 oppure in modo che siano multipli di 1000 specificando gridlines.multiple = 1000.

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

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

Tipo:numero
Predefinita:1
vAxis.minorGridlines.minSpacing

Lo spazio minimo richiesto, in pixel, tra le linee della griglia minori adiacenti e tra le linee della griglia minori e principali. Il valore predefinito è 1/2 del valore minSpacing delle linee della griglia principali per le scale lineari e 1/5 di minSpacing per le scale log.

Tipo:numero
Predefinito:calcolato
vAxis.minorGridlines.multiple

Uguale a quello dei gridlines.multiple principali.

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 barre, voci di legenda e categorie. 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 barre, voci di legenda e categorie. 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. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo).

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. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo).

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.