Panoramica
Un grafico a bolle che viene visualizzato nel browser utilizzando SVG o VML. Visualizza suggerimenti quando passi il mouse sopra le bolle.
Un grafico a bolle viene utilizzato per visualizzare un set di dati con due o quattro dimensioni. Vengono visualizzate le prime due dimensioni come coordinate, la terza a colori e la quarta come dimensioni.
Esempio
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {textStyle: {fontSize: 11}}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="series_chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Colore in base ai numeri
Puoi utilizzare l'opzione colorAxis per colorare le bolle in proporzione a un valore, come mostrato nell'esempio seguente.
<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([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]);
var options = {
colorAxis: {colors: ['yellow', 'red']}
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Personalizzare le etichette
Puoi controllare il tipo di carattere, il carattere e il colore delle bolle con l'opzione bubble.textStyle:
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
<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([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
fontSize: 12,
fontName: 'Times-Roman',
color: 'green',
bold: true,
italic: true
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>
Le etichette nel grafico sopra sono difficili da leggere e uno dei motivi è lo spazio bianco intorno a loro. Questa operazione si chiama aura e, se preferisci che i grafici non vengano utilizzati, puoi impostare
bubble.textStyle.auraColor su 'none'.
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none'
}
}
};
<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([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
var options = {
title: 'Fertility rate vs life expectancy in selected countries (2010).' +
' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
hAxis: {title: 'Life Expectancy'},
vAxis: {title: 'Fertility Rate'},
bubble: {
textStyle: {
auraColor: 'none',
}
}
};
var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>
Caricamento
Il nome del pacchetto google.charts.load è "corechart".
google.charts.load("current", {packages: ["corechart"]});
Il nome della classe della visualizzazione è google.visualization.BubbleChart.
var visualization = new google.visualization.BubbleChart(container);
Formato dei dati
Righe: ogni riga della tabella rappresenta un singolo fumetto.
Colonne:
| Colonna 0 | Colonna 1 | Colonna 2 | Colonna 3 (facoltativa) | Colonna 4 (facoltativa) | |
|---|---|---|---|---|---|
| Finalità: | ID (nome) della bolla | Coordinata X | Coordinata Y | ID serie o valore che rappresenta un colore su una scala gradiente, a seconda del tipo di colonna:
|
Dimensioni; i valori in questa colonna sono mappati ai valori effettivi dei pixel utilizzando l'opzione
sizeAxis. |
| Tipo di dati: | string | number | number | stringa o numero | number |
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"
|
| fumetto |
Un oggetto con membri per configurare le proprietà visive delle bolle. Tipo: oggetto
Predefinito: null
|
| bubble.opacity |
L'opacità delle bolle, dove 0 è completamente trasparente e 1 è completamente opaco. Tipo: numero compreso tra 0,0 e 1,0
Predefinito: 0,8
|
| bolle. |
Il colore del tratto delle bolle. Tipo: stringa
Predefinito: "#cse"
|
| fumetto.textStile |
Un oggetto che specifica lo stile del testo delle bolle. L'oggetto ha questo formato: {color: <string>, fontName: <string>, fontSize: <number>}
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| 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
|
| coloreAsse |
Un oggetto che specifica una mappatura tra i valori delle colonne colori e i colori o una scala gradiente. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Tipo: oggetto
Predefinito: null
|
| coloreAxi.ValoreValore |
Se presente, specifica un valore minimo per i dati di colore del grafico. I valori dei dati di colore di questo valore e inferiori verranno visualizzati come primo colore nell'intervallo Tipo: numero
Predefinito: valore minimo della colonna colore nei dati del grafico
|
| coloreAxis.ValoreValore max |
Se presente, specifica un valore massimo per i dati relativi al colore del grafico. I valori dei dati di colore di questo valore e superiore verranno visualizzati come ultimo colore nell'intervallo Tipo: numero
Predefinito: valore massimo della colonna colore nei dati del grafico
|
| colorAxis.values |
Se presente, controlla in che modo i valori vengono associati ai colori. Ogni valore è associato al colore corrispondente nell'array Tipo: matrice di numeri
Predefinito: null
|
| coloreAxis.colors |
Colori da assegnare ai valori della visualizzazione. Un array di stringhe, dove ogni elemento è una stringa di colore HTML, ad esempio: Tipo: array di stringhe di colore
Predefinito: null
|
| coloreAsse.legend |
Un oggetto che specifica lo stile della legenda dei colori della sfumatura. Tipo: oggetto
Predefinito: null
|
| colore.lega.posizione |
Posizione della legenda. Può corrispondere a uno dei seguenti:
Tipo: oggetto
Predefinito: "top"
|
| coloreAxis.legend.textStyle |
Un oggetto che specifica lo stile del testo della legenda. L'oggetto ha questo formato: {color: <string>, fontName: <string>, fontSize: <number>}
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| coloreAxis.legend.numberFormat |
Una stringa di formato per le etichette numeriche. Questo è un sottoinsieme del
set di pattern ICU
.
Ad esempio, Tipo: stringa
Predefinito: automatica
|
| 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
|
| explorer |
L'opzione Questa funzionalità è sperimentale e potrebbe cambiare nelle release future. Nota: l'Explorer funziona solo con assi continui, come numeri o date. Tipo: oggetto
Predefinito: null
|
| explorer.actions |
Lo strumento Esplorazione grafici di Google supporta tre azioni:
Tipo: matrice di stringhe
Predefinito: ['dragToPan', 'rightClickToReset']
|
| explorer.asse |
Per impostazione predefinita, gli utenti possono eseguire una panoramica sia in orizzontale sia in verticale quando viene utilizzata l'opzione Tipo: stringa
Predefinito: panoramica orizzontale e verticale
|
| explorer.keepInBounds |
Per impostazione predefinita, gli utenti possono eseguire una panoramica ovunque, indipendentemente da dove si trovano i dati. Per assicurarti che gli utenti
non eseguano una panoramica oltre il grafico originale, utilizza Tipo: booleano
Predefinito: falso
|
| explorer.maxZoomIn |
Il massimo che l'explorer può ingrandire. Per impostazione predefinita, gli utenti potranno aumentare lo zoom a sufficienza da visualizzare solo il 25% della visualizzazione originale. L'impostazione di
Tipo: numero
Predefinito: 0,25
|
| Explorer.maxZoomOut |
Il massimo che l'explorer può diminuire. Per impostazione predefinita, gli utenti potranno diminuire lo zoom a una distanza tale da occupare solo 1/4 dello spazio disponibile. L'impostazione di
Tipo: numero
Predefinito: 4
|
| explorer.zoomDelta |
Quando gli utenti aumentano o diminuiscono lo zoom, Tipo: numero
Predefinito: 1,5
|
| 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
|
| valore di riferimento base hAxis |
La base di riferimento per l'asse orizzontale. Tipo: numero
Predefinito: automatica
|
| ColoreAsse.BaselineAxi |
Il colore della base di riferimento per l'asse orizzontale. Può essere qualsiasi stringa di colore HTML, ad esempio: Tipo: numero
Predefinito: "nero"
|
| hAxis.direction |
La direzione in cui crescono i valori lungo l'asse orizzontale. Specifica Tipo: 1 o -1
Predefinito: 1
|
| Formato hAxis.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 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
|
| 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.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
|
| Scala hAxis.log |
Proprietà Tipo: booleano
Predefinito: falso
|
| TipoAHAxis.scale |
Proprietà
Tipo: stringa
Valore 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>}
|
| hAxis.ticks |
Sostituisce i segni di graduazione dell'asse X generati automaticamente con l'array specificato. 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.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>}
|
| Valore max hAxis |
Consente di spostare il valore massimo dell'asse orizzontale al valore specificato; sarà a destra nella maggior parte dei grafici. Ignorato se è impostato su un valore inferiore al valore x massimo dei dati.
Tipo: numero
Predefinito: automatica
|
| Valore minimo hAxis |
Sposta il valore minimo dell'asse orizzontale sul valore specificato, che sarà spostato verso sinistra nella maggior parte dei grafici. Ignorato se è impostato su un valore maggiore del valore x minimo dei dati.
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 |
Il valore massimo di dati orizzontali da visualizzare. Ignorato quando Tipo: numero
Predefinito: automatica
|
| hhAxis.viewWindow.min |
Il valore minimo dei dati orizzontali da visualizzare. Ignorato quando Tipo: numero
Predefinito: automatica
|
| height |
Altezza del grafico in pixel. Tipo: numero
Predefinito: altezza dell'elemento contenitore
|
| 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>}
|
| selezionemodalità |
Quando Tipo: stringa
Predefinito: "singolo"
|
| series |
Un oggetto, in cui le chiavi sono i nomi delle serie (i valori nella colonna Colore) e ogni oggetto che descrive il formato della serie corrispondente nel grafico. Se non viene specificato un valore o una serie, verrà utilizzato il valore globale. Ogni oggetto supporta le seguenti proprietà:
series: {'Europe': {color: 'green'}}
Tipo: oggetto con oggetti nidificati
Predefinito: {}
|
| dimensioniAsse |
Un oggetto con membri per configurare la modalità di associazione dei valori alle dimensioni della bolla. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {minValue: 0, maxSize: 20}
Tipo: oggetto
Predefinito: null
|
| dimensioniAxis.maxSize |
Raggio massimo della bolla più grande possibile, in pixel. Tipo: numero
Predefinito: 30
|
| sizeAxis.maxValue |
Il valore delle dimensioni (come indicato nei dati del grafico) da mappare a Tipo: numero
Predefinito: valore massimo della colonna delle dimensioni nei dati del grafico
|
| dimensioniAxis.minSize |
Raggio minimo della bolla più piccola possibile, in pixel. Tipo: numero
Predefinito: 5
|
| sizeAxis.minValue |
Il valore delle dimensioni (come indicato nei dati del grafico) da mappare a Tipo: numero
Predefinito: valore minimo della colonna delle dimensioni nei dati del grafico
|
| ordina bolle per dimensione |
Se true, ordina le bolle per dimensione in modo che quelle più piccole vengano visualizzate sopra le bolle più grandi. Se il valore è falso, le bolle vengono ordinate in base al loro ordine nella tabella dati. Tipo: booleano
Predefinito: true
|
| 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
|
| 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"
|
| 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.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.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 bolle.
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 bolle.
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. Un fumetto è correlato a una riga nella tabella dati (l'indice della colonna è nullo). 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. Un fumetto è correlato a una riga nella tabella dati (l'indice della colonna è nullo). 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.