Panoramica
Un istogramma è un grafico che raggruppa i dati numerici in bin, visualizzando i bin come colonne segmentate. Sono utilizzati per illustrare la distribuzione di un set di dati: la frequenza con cui i valori rientrano in intervalli.
Google Tables sceglie automaticamente il numero di bin per te. Tutti i contenitori sono di larghezza uguale e hanno un'altezza proporzionale al numero di punti dati nel contenitore. Sotto altri aspetti, gli istogrammi sono simili ai grafici a colonne.
Esempio
Ecco un istogramma delle lunghezze dei dinosauri:
L'istogramma indica che il cestino più comune è < 10 metri e che esiste un solo dinosauro oltre 40 metri. Puoi passare il mouse sopra la barra per scoprire che si tratta del Seismosaurus (che potrebbe essere solo un diploco molto grande; i paleontologi non ne sono sicuri).
Il codice per generare questo istogramma è mostrato di seguito. Dopo aver definito i dati (qui con google.visualization.arrayToDataTable
), il grafico viene definito con una chiamata al metodo google.visualization.Histogram
e tracciato 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 più di 200 paesi con meno di un centinaio di popolazione e una grave chiusura dopo questa data.
Questo istogramma utilizza l'opzione colors
per tracciare i dati in verde:
var options = { title: 'Country Populations', legend: { position: 'none' }, colors: ['green'], };
Come con tutti i grafici Google, i colori possono essere specificati come nomi in inglese o come valori esadecimali.
Bucket di controllo
Per impostazione predefinita, Google Graph sceglie automaticamente le dimensioni dei bucket utilizzando un algoritmo noto per gli istogrammi. Tuttavia, potresti voler sostituire questa impostazione e il grafico sopra è un esempio. Con tanti paesi nel primo bucket, è difficile esaminarli in altri.
Per situazioni come questa, il grafico a istogramma fornisce due opzioni: histogram.bucketSize
, che sostituisce l'algoritmo e hardcoded le dimensioni dei bucket, e histogram.lastBucketPercentile
. La seconda opzione richiede una spiegazione più dettagliata: cambia 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 raggruppati. Questo è utile quando non vuoi che i valori anomali vengano indirizzati nei rispettivi bucket; verranno raggruppati con il primo o l'ultimo bucket.
Nel grafico sopra, abbiamo ignorato i primi cinque e i primi cinque percento dei valori durante il calcolo delle dimensioni del bucket. I valori sono comunque grafici; l'unica cosa che è cambiata è la dimensione del bucket, ma rende più facile la lettura dell'istogramma.
Questo esempio mostra anche come possiamo cambiare la scala dell'asse verticale per utilizzare la scala "log specchio", che aiuta anche quando si tracciano i 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 vedi, la rimozione del 5% dall'alto e dal basso dal calcolo ha portato a una dimensione del bucket di 10.000.000 anziché ai 100.000.000, altrimenti sarebbe stata. Se sapessi fin da subito che una dimensione del bucket di 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 } };
Nel seguente esempio, mostriamo come espandere l'intervallo dei bucket e visualizzare molti
altri bucket senza lacune tra i bucket. L'opzione maxNumBuckets
può essere utilizzata per aumentare il numero predefinito di bucket. Le opzioni histogram.minValue
e histogram.maxValue
espanderanno l'intervallo dei bucket, ma tieni presente che se ci sono dati al di fuori di questo intervallo, queste opzioni non ridurranno l'intervallo.
Questo esempio mostra anche che puoi specificare i segni di spunta da visualizzare per ogni bucket utilizzando l'opzione ticks
esplicita per hAxis
. Questo non influisce sui bucket stessi, ma solo su come vengono visualizzati i segni di graduazione.
Tieni inoltre presente che specifichiamo chartArea.width
in modo che il numero di bucket si adatti in modo più preciso senza artefatti visivi. Ecco le opzioni 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 } };
Serie multiple
Ecco un istogramma degli addebiti delle particelle subatomiche, secondo il modello standard:
Il grafico sopra ha una serie contenente tutte le particelle. Le particelle subatomiche possono essere divise in quattro gruppi: quark, leptoni e bosoni. Consideriamo ciascuna come una serie a sé stante:
In questo grafico usiamo una serie diversa (e quindi il colore) per ciascuno dei quattro tipi di particelle subatomiche. Abbiamo impostato esplicitamente interpolateNulls
su false
per garantire che i valori nulli (necessarii perché le serie hanno una durata non uguale) 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
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 istogramma. 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 a colonne facoltativi per gli istogrammi.
Opzioni di configurazione
Nome | |
---|---|
animazione.durata |
La durata dell'animazione espressa in millisecondi. Per maggiori dettagli, consulta la documentazione relativa all'animazione. Tipo: numero
Predefinito: 0
|
animazione.Misure |
La funzione di adattamento applicata all'animazione. Sono disponibili le seguenti opzioni:
Tipo: stringa
Predefinito: "lineare"
|
animazione.avvio |
Determina se il grafico verrà animato durante il disegno iniziale. Se Tipo: booleano
Predefinito falso
|
posizione vari titoli |
Dove posizionare i titoli degli assi rispetto all'area del grafico. Valori supportati:
Tipo: stringa
Predefinito: "out"
|
coloredisfondo |
Il colore dello sfondo dell'area principale del grafico. Può essere una semplice stringa di colore HTML, ad esempio Tipo: stringa o oggetto
Predefinito: "bianco"
|
coloreColore sfondo |
Il colore del bordo del grafico, come stringa di colore HTML. Tipo: stringa
Predefinito: "#666"
|
sfondoColore.LarghezzaLarghezza |
La larghezza del bordo, in pixel. Tipo: numero
Predefinito: 0
|
sfondocolore.fill |
Il colore di riempimento del grafico, come stringa del colore HTML. Tipo: stringa
Predefinito: "bianco"
|
Larghezza bar.group |
La larghezza di un gruppo di barre, specificato in uno dei seguenti formati:
Tipo: numero o stringa
Predefinito: il rapporto d'oro, circa "61,8%".
|
area grafico |
Un oggetto con membri per configurare il posizionamento e le dimensioni dell'area del grafico (dove viene tracciato il grafico stesso, escludendo l'asse e le legende). Sono supportati due formati: un numero o un
seguito da %. Un numero semplice è un valore in pixel; un numero seguito da % è una
percentuale. Esempio: Tipo: oggetto
Predefinito: null
|
graficoArea.Sfondo Colore |
Colore sfondo area grafico. Una stringa utilizzata può essere una stringa esadecimale (ad es. "#fdc") o un nome di colore inglese. Quando si utilizza un oggetto, è possibile fornire le seguenti proprietà:
Tipo: stringa o oggetto
Predefinito: "bianco"
|
chartArea.left |
La distanza desiderata dal bordo sinistro. Tipo: numero o stringa
Predefinito: automatica
|
chartArea.top |
La distanza da cui tracciare il grafico dal bordo superiore. Tipo: numero o stringa
Predefinito: automatica
|
graficoarea.larghezza |
Larghezza area grafico. Tipo: numero o stringa
Predefinito: automatica
|
graficoArea.altezza |
Altezza area grafico. Tipo: numero o stringa
Predefinito: automatica
|
colori |
I colori da utilizzare per gli elementi del grafico. Un array di stringhe, dove ogni elemento è una stringa di colore HTML, ad esempio Tipo: matrice di stringhe
Predefinito: colori predefiniti
|
Opacità dati |
La trasparenza dei punti dati, con 1,0 completamente opaco e 0,0 completamente trasparente. Nei grafici a dispersione, a istogrammi, a barre e a colonne, fanno riferimento ai dati visibili: punti nel grafico a dispersione e rettangoli negli altri. Nei grafici in cui la selezione dei dati crea un punto, ad esempio i grafici a linee e ad area, si riferisce ai cerchi che vengono visualizzati al passaggio del mouse o alla selezione. Il grafico combinato mostra entrambi i comportamenti e questa opzione non ha alcun effetto su altri grafici. Per modificare l'opacità di una linea di tendenza, consulta opacità della linea di tendenza . Tipo: numero
Predefinito: 1,0
|
EnableInteractivity |
Indica se il grafico genera eventi basati sugli utenti o reagisce alle interazioni degli utenti. Se il valore è false, il grafico non mostrerà "seleziona" o altri eventi basati sulle interazioni (ma verrà generato eventi di errore o pronti) e non mostrerà il testo al passaggio del mouse o non cambierà in base all'input dell'utente. Tipo: booleano
Predefinito: true
|
focustarget |
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:
La descrizione comando in "TargetTarget "categoria" mostra tutti i valori delle categorie. Ciò può essere utile per confrontare i valori di serie diverse. Tipo: stringa
Predefinito: "datum"
|
Dimensione carattere |
Le dimensioni predefinite dei caratteri, in pixel, di tutto il testo nel grafico. Puoi eseguire l'override utilizzando le proprietà per specifici elementi del grafico. Tipo: numero
Predefinito: automatica
|
Nome carattere |
Il tipo di carattere predefinito per tutto il testo nel grafico. Puoi eseguire l'override utilizzando le proprietà per specifici elementi del grafico. Tipo: stringa
Predefinito: "iframe"
|
forceIFrame |
Disegna il grafico all'interno di un frame in linea. Tieni presente che su IE8, questa opzione viene ignorata, mentre tutti i grafici IE8 vengono disegnati negli i-frame. Tipo: booleano
Predefinito: falso
|
asse |
Un oggetto con membri in grado di configurare vari elementi dell'asse orizzontale. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } Tipo: oggetto
Predefinito: null
|
Linee hAxis.grid |
Un oggetto con proprietà per configurare le linee della griglia sull'asse orizzontale. Tieni presente che le linee della griglia dell'asse orizzontale vengono tracciate verticalmente. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {color: '#333', minSpacing: 20} Tipo: oggetto
Predefinito: null
|
hAxis.gridlines.color |
Il colore delle linee della griglia orizzontale all'interno dell'area del grafico. Specifica una stringa di colore HTML valida. Tipo: stringa
Predefinito: "#CCC"
|
hAxis.gridlines.count |
Il numero approssimativo di linee orizzontali della griglia all'interno dell'area del grafico.
Se specifichi un numero positivo per Tipo: numero
Predefinito: -1
|
hAxis.gridlines.interval |
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
Tipo: numero compreso tra 1 e 10, escluso 10.
Predefinito: calcolato
|
hAxis.gridlines.minSSpaziatura |
Lo spazio minimo dello schermo, in pixel, tra le linee della griglia principale di hAxis.
Il valore predefinito per le linee della griglia principale è Tipo: numero
Predefinito: calcolato
|
hAxis.gridlines.multi |
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
Tipo: numero
Predefinito: 1
|
hhAxis.gridlines.units |
Esegue l'override del formato predefinito per vari aspetti dei tipi di dati data/ora/ora del giorno quando utilizzato con le linee della griglia calcolate dal grafico. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi. Il formato generale è: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Ulteriori informazioni sono disponibili in Date e ore. Tipo: oggetto
Predefinito: null
|
Linee griglia hAxis.minor |
Un oggetto con membri per configurare le linee della griglia minori sull'asse orizzontale, in modo simile all'opzione hAxis.gridlines. Tipo: oggetto
Predefinito: null
|
coloreAH.MinorGridlines.color |
Il colore delle linee della griglia secondaria orizzontale all'interno dell'area del grafico. Specifica una stringa di colore HTML valida. Tipo: stringa
Predefinito:una combinazione dei colori della linea di griglia e dello sfondo
|
hhAxis.minorGridlines.count |
L'opzione Tipo: numero
Predefinito: 1
|
hAxis.minorGridlines.interval |
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 è
Tipo: numero
Predefinito: 1
|
hAxis.minorGridlines.minSSpaziatura |
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. Tipo: numero
Predefinito:calcolato
|
hAxis.minorGridlines.more |
Come nel caso del Tipo: numero
Predefinito: 1
|
hAxis.minorGridlines.units |
Sostituisce il formato predefinito per vari aspetti dei tipi di dati data/ora/ora del giorno quando viene utilizzato con linee griglia secondarie calcolate. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi. Il formato generale è: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Ulteriori informazioni sono disponibili in Date e ore. Tipo: oggetto
Predefinito: null
|
hAxis.textPosition |
Posizione del testo dell'asse orizzontale rispetto all'area del grafico. Valori supportati: "out", "in", "nessuno". Tipo: stringa
Predefinito: "out"
|
Stile testoAxis. |
Un oggetto che specifica lo stile di testo dell'asse orizzontale. L'oggetto ha questo formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
titolo.axis. |
Tipo: stringa
Predefinito: null
|
StileAnonim.titoloTesto |
Un oggetto che specifica lo stile del testo del titolo dell'asse orizzontale. L'oggetto ha questo formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.allowContainerBoundaryTextCutoff |
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. Tipo: booleano
Predefinito: falso
|
Testo hAxis.slanted |
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
Tipo: booleano
Predefinito: automatica
|
Angolo testo hAxis.slanted |
L'angolo del testo dell'asse orizzontale, se è disegnato. Ignorato se
Tipo: numero, -90-90
Predefinito: 30
|
Alternativa hAxis.max |
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. Tipo: numero
Predefinito: 2
|
Linee hAxis.maxTextLines |
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. Tipo: numero
Predefinito: automatica
|
Spaziatura min.AxiS.min |
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. Tipo: numero
Predefinito: il valore di
hAxis.textStyle.fontSize |
hhAxis.showTextEvery |
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. Tipo: numero
Predefinito: automatica
|
hhAxis.viewWindowMode |
Specifica come scalare l'asse orizzontale per eseguire il rendering dei valori all'interno dell'area del grafico. Sono supportati i seguenti valori di stringa:
Tipo: stringa
Predefinita:
equivalente a "pretty", ma
haxis.viewWindow.min e
haxis.viewWindow.max hanno la precedenza, se utilizzati.
|
hhAxis.viewWindow |
Specifica l'intervallo di ritaglio dell'asse orizzontale. Tipo: oggetto
Predefinito: null
|
hhAxis.viewWindow.max |
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 Ignorato quando Tipo: numero
Predefinito: automatica
|
hhAxis.viewWindow.min |
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 Ignorato quando Tipo: numero
Predefinito: automatica
|
istogramma.bucketdimensione |
Imposta le dimensioni di ogni barra dell'istogramma in modo rigido, invece di lasciarle determinare tramite algoritmo. Tipo: numero
Predefinito: automatica
|
istogramma.nascondiElementiBucket |
Ometti le divisioni sottili tra i blocchi dell'istogramma, che diventano una serie di barre solide. Tipo: booleano
Predefinito: falso
|
istogramma.ultimobucketPercentile |
Durante il calcolo delle dimensioni del bucket dell'istogramma, ignora la percentuale superiore e inferiore di Tipo: numero
Predefinito: 0
|
valoreistogramma.min. |
Espandi l'intervallo di bucket per includere questo valore. Tipo: numero
Predefinito: automatico - utilizza min dati
|
istogramma.valoremax |
Espandi l'intervallo di bucket per includere questo valore. Tipo: numero
Predefinito: automatico: usa max dati
|
Histogram.numBucketsRule |
Come calcolare il numero predefinito di bucket. I valori possibili sono:
Tipo: stringa
Predefinito:
'sqrt' |
height |
Altezza del grafico in pixel. Tipo: numero
Predefinito: altezza dell'elemento contenitore
|
interpolateNull |
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 Tipo: booleano
Predefinito: falso
|
in pila |
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 Le opzioni per
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
Lo stack al 100% supporta solo valori di dati di tipo Tipo: booleano/stringa
Predefinito: falso
|
leggenda |
Un oggetto con membri per configurare i vari aspetti della legenda. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} Tipo: oggetto
Predefinito: null
|
legenda.allineamento |
Allineamento della legenda. Può corrispondere a uno dei seguenti:
L'inizio, la parte centrale e la fine sono relative allo stile (verticale o orizzontale) della legenda. Ad esempio, nella legenda "destra", "inizio" e "fine" si trovano rispettivamente all'inizio e alla fine; per una legenda "in alto", "inizio" e "fine" si trovano rispettivamente a sinistra e a destra dell'area. Il valore predefinito dipende dalla posizione della legenda. Per le legende "in basso", il valore predefinito è "center"; le altre legende sono "start". Tipo: stringa
Predefinito: automatica
|
legenda.maxRighe |
Numero massimo di righe nella legenda. Impostalo su un numero maggiore di uno per aggiungere righe alla legenda. Nota: la logica esatta utilizzata per determinare il numero effettivo di righe visualizzate è ancora in evoluzione. Al momento questa opzione funziona solo quando legend.position è "top". Tipo: numero
Predefinito: 1
|
legend.pageIndex |
Indice della pagina della legenda selezionato per la prima volta. Tipo: numero
Predefinito: 0
|
posizione.legenda |
Posizione della legenda. Può corrispondere a uno dei seguenti:
Tipo: stringa
Predefinito: "destra"
|
legend.textStyle |
Un oggetto che specifica lo stile del testo della legenda. L'oggetto ha questo formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
orientamento |
L'orientamento del grafico. Se impostato su Tipo: stringa
Predefinito: "orizzontale"
|
categorieinverse |
Se il criterio è impostato su true, disegna la serie da destra a sinistra. L'impostazione predefinita è il disegno da sinistra a destra. Tipo: booleano
Predefinito: falso
|
series |
Un array di oggetti, ognuno che descrive il formato della serie corrispondente nel grafico. Per utilizzare i valori predefiniti per una serie, specifica un oggetto vuoto {}. Se non viene specificato un valore o una serie, verrà utilizzato il valore globale. Ogni oggetto supporta le seguenti proprietà:
Puoi specificare un array di oggetti, ognuno dei quali si applica alla serie nell'ordine specificato, oppure un oggetto in cui ogni elemento secondario ha una chiave numerica che indica a quale serie si applica. Ad esempio, le due dichiarazioni che seguono sono identiche e dichiarano la prima serie come nera e assente dalla legenda e la quarta come rossa e assente dalla legenda: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Tipo: array di oggetti o oggetti con oggetti nidificati
Predefinito: {}
|
tema |
Un tema è un insieme di valori di opzione predefiniti che funzionano insieme per ottenere un comportamento visivo o un comportamento specifico del grafico. Attualmente è disponibile un solo tema:
Tipo: stringa
Predefinito: null
|
title |
Testo da visualizzare sopra il grafico. Tipo: stringa
Predefinito: nessun titolo
|
titoloPosizione |
Dove posizionare il titolo del grafico rispetto all'area del grafico. Valori supportati:
Tipo: stringa
Predefinito: "out"
|
titoloTestoStile |
Un oggetto che specifica lo stile del testo del titolo. L'oggetto ha questo formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
descrizione comando |
Un oggetto con membri che possono configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {textStyle: {color: '#FF0000'}, showColorCode: true} Tipo: oggetto
Predefinito: null
|
descrizione comando.isHTML |
Se è impostato su true, utilizza le descrizioni comando visualizzate in HTML (anziché il rendering SVG). Per ulteriori dettagli, consulta la sezione Personalizzare i contenuti della descrizione comando. Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dati della colonna Descrizione comando non è supportata dalla visualizzazione Grafico a bolle. Tipo: booleano
Predefinito: falso
|
descrizione comando.showColorCode |
Se true, mostra i riquadri colorati accanto alle informazioni sulla serie nella descrizione comando. Il valore predefinito è true quando Tipo: booleano
Predefinito: automatica
|
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> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
descrizione comando.trigger |
L'interazione dell'utente che determina la visualizzazione della descrizione comando:
Tipo: stringa
Predefinito: "concentrazione"
|
vAx |
Specifica le proprietà per i singoli assi verticali se il grafico ha più assi verticali.
Ogni oggetto secondario è un oggetto
Per specificare un grafico con più assi verticali, innanzitutto definisci un nuovo asse utilizzando { 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 vAxes: [ {}, // Nothing specified for axis 0 { title:'Losses', textStyle: {color: 'red'} // Axis 1 } ] Tipo: array di oggetti o oggetti con oggetti secondari.
Predefinito: null
|
vAxi |
Un oggetto con membri in grado di configurare vari elementi dell'asse verticale. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} Tipo: oggetto
Predefinito: null
|
Basebase vAxis |
Tipo: numero
Predefinito: automatica
|
Colorev.base.vAxis |
Specifica il colore della base di riferimento per l'asse verticale. Può essere qualsiasi stringa di colore HTML, ad esempio: Tipo: numero
Predefinito: "nero"
|
vAxis.direction |
La direzione in cui crescono i valori lungo l'asse verticale. Per impostazione predefinita, i valori bassi si trovano in fondo al grafico. Specifica Tipo: 1 o -1
Predefinito: 1
|
Formato vAxis.format |
Una stringa di formato per le etichette degli assi numerici. Questo è un sottoinsieme del
set di pattern ICU
.
Ad esempio,
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 Tipo: stringa
Predefinito: automatica
|
Linee vAxis.grid |
Un oggetto con membri per configurare le linee della griglia sull'asse verticale. Tieni presente che le linee della griglia dell'asse verticale vengono tracciate orizzontalmente. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {color: '#333', minSpacing: 20} Tipo: oggetto
Predefinito: null
|
vAxis.gridlines.color; |
Il colore delle linee della griglia verticale all'interno dell'area del grafico. Specifica una stringa di colore HTML valida. Tipo: stringa
Predefinito: "#CCC"
|
vAxis.gridlines.count |
Il numero approssimativo di linee orizzontali della griglia all'interno dell'area del grafico.
Se specifichi un numero positivo per Tipo: numero
Predefinito: -1
|
vAxis.gridlines.interval |
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
Tipo: numero compreso tra 1 e 10, escluso 10.
Predefinito: calcolato
|
vAxis.gridlines.minSSpaziatura |
Lo spazio minimo dello schermo, in pixel, tra le linee della griglia principale di hAxis.
Il valore predefinito per le linee della griglia principale è Tipo: numero
Predefinito: calcolato
|
vAxis.gridlines.multi |
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
Tipo: numero
Predefinito: 1
|
vAxis.gridlines.units; |
Esegue l'override del formato predefinito per vari aspetti dei tipi di dati data/ora/ora del giorno quando utilizzato con le linee della griglia calcolate dal grafico. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi. Il formato generale è: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } Ulteriori informazioni sono disponibili in Date e ore. Tipo: oggetto
Predefinito: null
|
Linee griglia vAxis.minor |
Un oggetto con membri per configurare le linee della griglia secondaria sull'asse verticale, in modo simile all'opzione vAxis.gridlines. Tipo: oggetto
Predefinito: null
|
Colorev.MinorGridlines.color |
Il colore delle linee della griglia secondaria verticale all'interno dell'area del grafico. Specifica una stringa di colore HTML valida. Tipo: stringa
Predefinito:una combinazione dei colori della linea di griglia e dello sfondo
|
vAxis.minorGridlines.count |
L'opzione minorGridlines.count è deprecata, ad eccezione della disattivazione delle linee della griglia secondaria impostando il conteggio su 0. Il numero di linee della griglia minori dipende dall'intervallo tra le linee della griglia principali (vedi vAxis.gridlines.interval) e dallo spazio minimo richiesto (vedi vAxis.minorGridlines.minSpacing). Tipo: numero
Predefinito: 1
|
vAxis.minorGridlines.interval |
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 è
Tipo: numero
Predefinito: 1
|
vAxis.minorGridlines.minSSpaziatura |
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. Tipo: numero
Predefinito:calcolato
|
vAxis.minorGridlines.more |
Come nel caso del Tipo: numero
Predefinito: 1
|
vAxis.minorGridlines.units |
Sostituisce il formato predefinito per vari aspetti dei tipi di dati data/ora/ora del giorno quando viene utilizzato con linee griglia secondarie calcolate. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi. Il formato generale è: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } Ulteriori informazioni sono disponibili in Date e ore. Tipo: oggetto
Predefinito: null
|
vAxis.logScale |
Se true, rende l'asse verticale una scala logaritmica. Nota: tutti i valori devono essere positivi. Tipo: booleano
Predefinito: falso
|
vAxis.scaleType |
Proprietà
Tipo: stringa
Predefinito: null
|
vAxis.textPosition |
Posizione del testo dell'asse verticale, rispetto all'area del grafico. Valori supportati: "out", "in", "nessuno". Tipo: stringa
Predefinito: "out"
|
stileAV.testo |
Un oggetto che specifica lo stile di testo dell'asse verticale. L'oggetto ha questo formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.ticks |
Sostituisce i segni di graduazione dell'asse Y generati automaticamente con la matrice specificata. Ogni elemento della matrice deve essere un valore di segno di spunta valido (ad esempio numero, data, data/ora o ora del giorno) o un oggetto. Se si tratta di un oggetto, deve avere una proprietà
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 Esempi:
Tipo: array di elementi
Predefinito: automatica
|
Titolo vAxis |
Tipo: stringa
Predefinito: nessun titolo
|
vAxis.titleTextStyle |
Un oggetto che specifica lo stile del testo del titolo dell'asse verticale. L'oggetto ha questo formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
Valore massimo vAxis |
Sposta il valore massimo dell'asse verticale al valore specificato; questo sarà verso l'alto nella maggior parte dei grafici. Ignorato se è impostato su un valore inferiore al valore y massimo dei dati.
Tipo: numero
Predefinito: automatica
|
Valorev.min.min |
Sposta il valore minimo dell'asse verticale al valore specificato; questo sarà verso il basso nella maggior parte dei grafici. Ignorato se è impostato su un valore maggiore di quello y minimo dei dati.
Tipo: numero
Predefinito: null
|
vAxis.viewWindowMode |
Specifica come scalare l'asse verticale per eseguire il rendering dei valori all'interno dell'area del grafico. Sono supportati i seguenti valori di stringa:
Tipo: stringa
Predefinita:
equivalente a "pretty", ma
vaxis.viewWindow.min e
vaxis.viewWindow.max hanno la precedenza, se utilizzati.
|
vAxis.viewWindow |
Specifica l'intervallo di ritaglio dell'asse verticale. Tipo: oggetto
Predefinito: null
|
vAxis.viewWindow.max |
Il valore massimo dei dati verticali da visualizzare. Ignorato quando Tipo: numero
Predefinito: automatica
|
vAxis.viewWindow.min |
Il valore minimo dei dati verticali da visualizzare. Ignorato quando Tipo: numero
Predefinito: automatica
|
width |
La larghezza del grafico in pixel. Tipo: numero
Predefinito: larghezza dell'elemento che la contiene
|
Metodi
Metodo | |
---|---|
draw(data, options) |
Disegna il grafico. Il grafico accetta ulteriori chiamate ai metodi solo dopo l'attivazione dell'evento Tipo di reso: nessuno
|
getAction(actionID) |
Restituisce l'oggetto azione della descrizione comando con il Tipo di reso: oggetto
|
getBoundingBox(id) |
Restituisce un oggetto contenente i valori sinistro, superiore, larghezza e altezza dell'elemento del grafico
I valori sono relativi al contenitore del grafico. Chiamalo dopo il disegno del grafico. Tipo di reso: oggetto
|
getChartAreaBoundingBox() |
Restituisce un oggetto contenente il lato sinistro, superiore, la larghezza e l'altezza dei contenuti del grafico (escluse le etichette e la legenda):
I valori sono relativi al contenitore del grafico. Chiamalo dopo il disegno del grafico. Tipo di reso: oggetto
|
getChartLayoutInterface() |
Restituisce un oggetto contenente informazioni sul posizionamento sullo schermo del grafico e sui suoi elementi. Nell'oggetto restituito possono essere richiamati i metodi seguenti:
Chiamalo dopo il disegno del grafico. Tipo di reso: oggetto
|
getHAxisValue(xPosition, optional_axis_index) |
Restituisce il valore dei dati orizzontali a Esempio: Chiamalo dopo il disegno del grafico. Tipo di reso: numero
|
getImageURI() |
Restituisce il grafico serializzato come URI immagine. Chiamalo dopo il disegno del grafico. Consulta la sezione Stampa di grafici PNG. Tipo di reso: stringa
|
getSelection() |
Restituisce una matrice delle entità del grafico selezionate.
Le entità selezionabili sono barre, legende e categorie.
Per questo grafico è possibile selezionare una sola entità alla volta.
Tipo di reso: array di elementi di selezione
|
getVAxisValue(yPosition, optional_axis_index) |
Restituisce il valore dei dati verticali in Esempio: Chiamalo dopo il disegno del grafico. Tipo di reso: numero
|
getXLocation(dataValue, optional_axis_index) |
Restituisce la coordinata x di pixel di Esempio: Chiamalo dopo il disegno del grafico. Tipo di reso: numero
|
getYLocation(dataValue, optional_axis_index) |
Restituisce la coordinata y di pixel Esempio: Chiamalo dopo il disegno del grafico. Tipo di reso: numero
|
removeAction(actionID) |
Rimuove dal grafico l'azione della descrizione comando con il 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
Tutte le azioni relative alla descrizione comando devono essere impostate prima di chiamare il metodo Tipo di reso:
none |
setSelection() |
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.
Tipo di reso: nessuno
|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
Eventi
Per saperne di più su come utilizzare questi eventi, consulta Interattività di base, Gestione degli eventi ed Eventi di attivazione.
Nome | |
---|---|
animationfinish |
Attivato quando l'animazione di transizione è completa. Proprietà: nessuna
|
click |
Attivato quando l'utente fa clic all'interno del grafico. Può essere utilizzato per identificare quando gli utenti fanno clic su titolo, elementi dati, voci di legenda, assi, linee di griglia o etichette. Proprietà: targetID
|
error |
Attivato quando si verifica un errore durante il tentativo di rendering del grafico. Proprietà: id, messaggio
|
legendpagination |
Attivato quando l'utente fa clic sulle frecce di impaginazione della legenda. Rimanda l'indice della pagina attuale con base zero e il numero totale di pagine. Proprietà: currentPageIndex, totalpages
|
onmouseover |
Attivato quando l'utente passa il mouse sopra un'entità visiva. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente. 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). Proprietà: riga, colonna
|
onmouseout |
Attivato quando l'utente allontana il puntatore del mouse da un'entità visiva. Rimanda gli indici delle righe e delle colonne dell'elemento della tabella dati corrispondente. 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). Proprietà: riga, colonna
|
ready |
Il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo Proprietà: nessuna
|
select |
Attivato quando l'utente fa clic su un'entità visiva. Per sapere cosa è stato selezionato, chiama il numero
Proprietà: nessuna
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato ad alcun server.