Visualizzazione: grafico a bolle

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

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.

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.

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.

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

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

Lo spessore del bordo, in pixel.

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

Un oggetto con membri per configurare le proprietà visive delle bolle.

L'opacità delle bolle, dove 0 è completamente trasparente e 1 completamente opaco.

Il colore del tratto delle bolle.

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

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%'}

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

Quanto è distante il grafico dal bordo sinistro.

Quanto è distante il grafico dal bordo superiore.

Larghezza dell'area del grafico.

Altezza dell'area del grafico.

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

Un oggetto che specifica una mappatura tra i valori e i colori delle colonne di colori o una scala di gradienti. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui:

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}

Se presente, specifica un valore minimo per i dati del colore del grafico. I valori dei dati relativi ai colori di questo valore e inferiori verranno visualizzati come primo colore nell'intervallo colorAxis.colors.

Se presente, specifica un valore massimo per i dati del colore del grafico. I valori dei dati sui colori di questo valore e superiori verranno visualizzati come ultimo colore nell'intervallo colorAxis.colors.

Se presente, controlla in che modo i valori vengono associati ai colori. Ogni valore è associato al colore corrispondente nell'array colorAxis.colors. Questi valori si applicano ai dati relativi ai colori del grafico. La colorazione viene eseguita in base a un gradiente dei valori specificati qui. Non specificare un valore per questa opzione equivale a specificare [minValue, maxValue].

Colori da assegnare ai valori nella visualizzazione. Un array di stringhe, in cui ogni elemento è una stringa di colore HTML, ad esempio: colorAxis: {colors:['red','#004411']}. Devi avere almeno due valori. Il gradiente includerà tutti i valori, oltre ai valori intermedi calcolati, con il primo colore come valore più piccolo e l'ultimo colore come il più alto.

Un oggetto che specifica lo stile della legenda del colore del gradiente.

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

• 'top' - Sopra il grafico.
• "bottom": sotto il grafico.
• 'in': all'interno del grafico, in alto.
• "none": non viene visualizzata alcuna legenda.

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

{color: <string>, fontName: <string>, fontSize: <number>}

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

Una stringa di formato per le etichette numeriche. Questo è un sottoinsieme del set di pattern di ICU . Ad esempio, {numberFormat:'.##'} mostrerà i valori "10.66", "10.6" e "10.0" per i valori 10.666, 10.6 e 10.

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.

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

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

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

Esplora grafici di Google supporta tre azioni:

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

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

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

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

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

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

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.

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.

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.

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

La base di riferimento per l'asse orizzontale.

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

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

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.

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}

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

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.

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.

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 minori orizzontali all'interno dell'area del grafico. Specifica una stringa di colore HTML valida.

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

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.

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

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

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

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

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.

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

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

Esempi:

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

hAxis che specifica il titolo dell'asse orizzontale.

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.

Sposta il valore massimo dell'asse orizzontale sul valore specificato. Questo sarà verso destra nella maggior parte dei grafici. Ignorato se impostato su un valore inferiore al valore x massimo dei dati. hAxis.viewWindow.max sostituisce questa proprietà.

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

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.

Specifica l'intervallo di ritaglio dell'asse orizzontale.

Il valore orizzontale massimo dei dati da visualizzare.

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

Il valore minimo orizzontale dei dati da visualizzare.

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

Altezza del grafico, in pixel.

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

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

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

Indice di pagina in base zero selezionato iniziale della legenda.

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.

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.

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

Un oggetto di oggetti, in cui le chiavi sono nomi di serie (i valori nella colonna Colore) e ogni oggetto che descrive il formato della serie corrispondente nel grafico. Se non viene specificato una serie o un valore, 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.
• 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.

series: {'Europe': {color: 'green'}}

Un oggetto con membri per configurare la modalità di associazione dei valori alle dimensioni delle bolle. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui:

 {minValue: 0,  maxSize: 20}

Raggio massimo della bolla più grande possibile, in pixel.

Il valore della dimensione (come visualizzato nei dati del grafico) da mappare a sizeAxis.maxSize. I valori più grandi verranno ritagliati in base a questo valore.

Raggio minimo della bolla più piccola possibile, in pixel.

Il valore della dimensione (come visualizzato nei dati del grafico) da mappare a sizeAxis.minSize. I valori più piccoli verranno ritagliati in base a questo valore.

Se true, ordina le bolle per dimensione in modo che le bolle più piccole vengano visualizzate sopra quelle più grandi. Se il valore è false, le bolle vengono ordinate in base al relativo ordine nella tabella di dati.

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

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.
• all'esterno: traccia il titolo fuori dall'area del grafico.
• nessuno: ometti il titolo.

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.

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}

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.

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.

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

• "focus" - La descrizione comando viene visualizzata quando l'utente passa il mouse sopra l'elemento.
• "nessuno" - La descrizione comando non verrà visualizzata.
• "selection" - La descrizione comando verrà visualizzata quando l'utente selezionerà l'elemento.

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

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.

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

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.

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}

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

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.

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.

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

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

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

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.

Se il valore è true, l'asse verticale diventa 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 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.

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

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.

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

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

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.

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

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

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.

Specifica l'intervallo di ritaglio dell'asse verticale.

Il valore verticale massimo dei dati da visualizzare.

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

Il valore verticale minimo dei dati da visualizzare.

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

Larghezza del grafico, in pixel.

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

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

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.

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.

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.

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.

Restituisce il grafico serializzato come URI immagine.

Viene chiamato dopo che il grafico è stato disegnato.

Consulta la sezione Stampa di grafici PNG.

Restituisce un array delle entità del grafico selezionate. Le entità selezionabili sono bolle. Per questo grafico, è possibile selezionare una sola entità alla volta. Extended description

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.

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.

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.

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

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.

Seleziona le entità del grafico specificate. Annulla la selezione precedente. Le entità selezionabili sono bolle. Per questo grafico è possibile selezionare una sola entità alla volta. Extended description

Cancella il grafico e rilascia tutte le risorse allocate.

Attivato al termine dell'animazione della transizione.

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.

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. Restituisce l'indice di pagina in base zero della legenda attuale e il numero totale di pagine.

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 bolla è correlata a una riga nella tabella dati (l'indice della colonna è nullo).

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 bolla è correlata a una riga nella tabella dati (l'indice della colonna è nullo).

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.

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