Istogramma

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

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

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

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

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

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

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

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

La larghezza del bordo, in pixel.

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

• Pixel (ad es. 50)
• La percentuale della larghezza disponibile per ciascun gruppo (ad esempio "20%"), dove "100%" indica che i gruppi non hanno uno spazio tra un gruppo e l'altro.

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

• stroke: il colore, fornito come stringa esadecimale o nome di colore inglese.
• strokeWidth: se fornito, disegna un bordo intorno all'area del grafico della larghezza specificata (e con il colore di stroke).

La distanza desiderata dal bordo sinistro.

La distanza da cui tracciare il grafico dal bordo superiore.

Larghezza area grafico.

Altezza area grafico.

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

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

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

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

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

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

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

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

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

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    

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

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

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

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

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

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

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

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

Il formato generale è:

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

Ulteriori informazioni sono disponibili in Date e ore.

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

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

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

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

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

Come nel caso del gridlines.multiple principale.

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

Il formato generale è:

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

Ulteriori informazioni sono disponibili in Date e ore.

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

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

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

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

hAxis che specifica il titolo dell'asse orizzontale.

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

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

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

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

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

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

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

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

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

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

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

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

Specifica l'intervallo di ritaglio dell'asse orizzontale.

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

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

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

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

Imposta le dimensioni di ogni barra dell'istogramma in modo rigido, invece di lasciarle determinare tramite algoritmo.

Ometti le divisioni sottili tra i blocchi dell'istogramma, che diventano una serie di barre solide.

Durante il calcolo delle dimensioni del bucket dell'istogramma, ignora la percentuale superiore e inferiore di lastBucketPercentile%. I valori sono ancora inclusi nell'istogramma, ma non influiscono sul bucket.

Espandi l'intervallo di bucket per includere questo valore.

Espandi l'intervallo di bucket per includere questo valore.

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

• 'sqrt': calcola la radice quadrata del numero di punti dati.
• 'sturges': derivata dalla distribuzione binomiale. Presuppone implicitamente una distribuzione all'incirca normale.
• 'rice': un'alternativa più semplice alla regola di Sturges.

Altezza del grafico in pixel.

Se indovina il valore dei punti mancanti. Se restituisce true, indovina il valore dei dati mancanti in base ai punti vicini. Se il valore è false, lascia un'interruzione nella riga in corrispondenza del punto sconosciuto.

Non è supportato dai grafici Area con l'opzione isStacked: true/'percent'/'relative'/'absolute'.

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

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

Le opzioni per isStacked sono:

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

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

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

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

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

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}

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

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

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

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

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

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

Indice della pagina della legenda selezionato per la prima volta.

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

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

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

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

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

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

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

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

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

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

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    

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

• "maximized": consente di massimizzare l'area del grafico e disegna la legenda e tutte le etichette all'interno dell'area del grafico. Imposta le seguenti opzioni:

  chartArea: {width: '100%', height: '100%'},
  legend: {position: 'in'},
  titlePosition: 'in', axisTitlesPosition: 'in',
  hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
          

Testo da visualizzare sopra il grafico.

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

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

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

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

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

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

{textStyle: {color: '#FF0000'}, showColorCode: true}

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

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

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

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

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

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

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

• " stato attivo": la descrizione comando viene visualizzata quando l'utente passa il mouse sopra l'elemento.
• "none": la descrizione comando non viene visualizzata.

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

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

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

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

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}

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

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

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

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

• {format: 'none'}: visualizza i numeri senza formattazione (ad es. 800.000
• {format: 'decimal'}: mostra i numeri con separatori di migliaia (ad es. 8.000.000)
• {format: 'scientific'}: mostra i numeri in notazione scientifica (ad es. 8e6).
• {format: 'currency'}: visualizza i numeri nella valuta locale (ad es. 8.000.000.00 $)
• {format: 'percent'}: mostra i numeri in percentuale (ad esempio 800.000.000%)
• {format: 'short'}: visualizza i numeri abbreviati (ad es. 8 milioni)
• {format: 'long'}: mostra i numeri sotto forma di parole intere (ad esempio 8 milioni)

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

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

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

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

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

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

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

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

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

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

Il formato generale è:

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

Ulteriori informazioni sono disponibili in Date e ore.

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

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

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

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

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

Come nel caso del gridlines.multiple principale.

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

Il formato generale è:

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

Ulteriori informazioni sono disponibili in Date e ore.

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

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

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

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

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

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

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

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

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

Esempi:

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

vAxis che specifica un titolo per l'asse verticale.

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

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

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

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

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

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

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

Specifica l'intervallo di ritaglio dell'asse verticale.

Il valore massimo dei dati verticali da visualizzare.

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

Il valore minimo dei dati verticali da visualizzare.

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

La larghezza del grafico in pixel.

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

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

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

var cli = chart.getChartLayoutInterface();

Altezza dell'area del grafico

cli.getBoundingBox('chartarea').height

Larghezza della terza barra nella prima serie di un grafico a barre o a colonne

cli.getBoundingBox('bar#0#2').width

Riquadro di delimitazione del quinto cuneo di un grafico a torta

cli.getBoundingBox('slice#4')

Casella di delimitazione dei dati di un grafico verticale (ad es. a colonne):

cli.getBoundingBox('vAxis#0#gridline')

Riquadro di delimitazione dei dati del grafico orizzontale (ad es. a barre):

cli.getBoundingBox('hAxis#0#gridline')

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

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

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left

cli.getChartAreaBoundingBox().top

cli.getChartAreaBoundingBox().height

cli.getChartAreaBoundingBox().width

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

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

Nell'oggetto restituito possono essere richiamati i metodi seguenti:

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

Chiamalo dopo il disegno del grafico.

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

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

Chiamalo dopo il disegno del grafico.

Restituisce il grafico serializzato come URI immagine.

Chiamalo dopo il disegno del grafico.

Consulta la sezione Stampa di grafici PNG.

Restituisce una matrice delle entità del grafico selezionate. Le entità selezionabili sono barre, legende e categorie. Per questo grafico è possibile selezionare una sola entità alla volta. Extended description.

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

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

Chiamalo dopo il disegno del grafico.

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

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

Chiamalo dopo il disegno del grafico.

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

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

Chiamalo dopo il disegno del grafico.

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

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

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

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

Seleziona le entità del grafico specificate. Annulla qualsiasi selezione precedente. Le entità selezionabili sono barre, legende e categorie. Per questo grafico è possibile selezionare una sola entità alla volta. Extended description.

Cancella il grafico e rilascia tutte le risorse allocate.

Attivato quando l'animazione di transizione è completa.

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

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

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

Attivato quando l'utente passa il mouse sopra un'entità visiva. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente. Una barra è correlata a una cella della tabella di dati, una voce di legenda a una colonna (l'indice della riga è null) e una categoria a una riga (l'indice della colonna è null).

Attivato quando l'utente allontana il puntatore del mouse da un'entità visiva. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente. Una barra è correlata a una cella della tabella di dati, una voce di legenda a una colonna (l'indice della riga è null) e una categoria a una riga (l'indice della colonna è null).

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

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