Panoramica
Un grafico a linee visualizzato nel browser utilizzando SVG o VML. Visualizza le descrizioni comando quando passi il mouse sopra i punti.
Esempi
Rispettare le linee guida
Puoi smussare le linee impostando l'opzione curveType su function:
Di seguito è riportato il codice per generare il grafico. Nota l'utilizzo dell'opzione curveType: function:
<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([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
Creare grafici a linee dei materiali
Nel 2014, Google ha annunciato linee guida destinate a supportare un aspetto comune nelle sue proprietà e app (ad esempio le app per Android) eseguite sulle piattaforme Google. Questa iniziativa si chiama Material Design. Forniremo versioni "materiali" di tutti i nostri grafici principali; puoi utilizzarle se ti soddisfa.
La creazione di un grafico a linee Material è simile alla creazione di quello che ora chiameremo un grafico a linee "classico".
Carica l'API di visualizzazione di Google (anche se con il pacchetto 'line' anziché
il pacchetto 'corechart'), definisci la tabella dati e quindi crei un oggetto (ma della
classe google.charts.Line anziché google.visualization.LineChart).
Nota:i grafici Material non funzionano nelle versioni precedenti di Internet Explorer. IE8 e le versioni precedenti non supportano il formato SVG, necessario per i grafici Material.
I grafici a linee Material presentano molti piccoli miglioramenti rispetto ai grafici a linee classici, tra cui una tavolozza dei colori migliorata, angoli arrotondati, una formattazione delle etichette più chiara, una spaziatura predefinita più stretta tra le serie, linee della griglia più morbide e titoli (e l'aggiunta di sottotitoli).
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
I grafici Material sono in versione beta. L'aspetto e l'interattività sono in gran parte definitivi, ma molte delle opzioni disponibili nelle classifiche classiche non sono ancora disponibili. In questo problema puoi trovare un elenco di opzioni non ancora supportate.
Inoltre, le modalità di dichiarazione delle opzioni non sono definitive, perciò se utilizzi una qualsiasi
delle opzioni classiche, devi convertirle in opzioni materiali sostituendo questa riga:
chart.draw(data, options);
...con questa:
chart.draw(data, google.charts.Line.convertOptions(options));
Grafici Dual-Y
A volte potresti voler visualizzare due serie in un grafico a linee con due assi Y indipendenti: uno sinistro per una serie e un asse destro per un'altra.
Tieni presente che i nostri due assi y non solo sono etichettati in modo diverso ("Temps" e "Daylight"), ma hanno
scale e linee della griglia indipendenti. Se vuoi personalizzare questo comportamento, utilizza le opzioni vAxis.gridlines e vAxis.viewWindow.
Nel codice materiale riportato di seguito, le opzioni axes e series insieme
specificano l'aspetto con doppio Y del grafico. L'opzione series specifica quale asse
utilizzare per ciascuno ('Temps' e 'Daylight'; non deve avere alcuna
relazione con i nomi delle colonne nella tabella dati). L'opzione axes rende questo grafico un grafico con doppio Y, con l'asse 'Temps' a sinistra e l'asse 'Daylight' a destra.
Nel codice Classic questo aspetto è leggermente diverso. Invece dell'opzione axes, utilizzerai
l'opzione vAxes (o hAxes nei grafici orientati orizzontalmente). Inoltre,
invece di utilizzare i nomi, utilizzerai i numeri di indice per coordinare una serie con un asse usando
l'opzione targetAxisIndex.
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
Classifiche Top X
Nota: gli assi Top-X sono disponibili solo per i grafici Material (ovvero quelli con il pacchetto line).
Se vuoi inserire le etichette e il titolo dell'asse X nella parte superiore del grafico anziché in basso,
puoi farlo nei grafici materiali con l'opzione axes.x:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
width: 900,
height: 500,
axes: {
x: {
0: {side: 'top'}
}
}
};
var chart = new google.charts.Line(document.getElementById('line_top_x'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
</head>
<body>
<div id="line_top_x"></div>
</body>
</html>
Caricamento in corso...
Il nome del pacchetto google.charts.load è "corechart" e il nome della classe della visualizzazione è google.visualization.LineChart.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.LineChart(container);
Per i grafici a linee Material, il nome del pacchetto google.charts.load è "line" e il nome della classe della visualizzazione è google.charts.Line.
google.charts.load("current", {packages: ["line"]});
var visualization = new google.charts.Line(container);
Formato dei dati
Righe:ogni riga nella tabella rappresenta un insieme di punti dati con la stessa posizione sull'asse x.
Colonne:
| Colonna 0 | Colonna 1 | ... | Colonna N | |
|---|---|---|---|---|
| Scopo: | Valori riga 1 | ... | Valori della riga N | |
| Tipo di dati: | numero | ... | numero | |
| Ruolo: | dominio | dati | ... | dati |
| Ruoli colonna facoltativi: | ... |
Opzioni di configurazione
| Nome | |
|---|---|
| aggregationTarget |
Come vengono raggruppate più selezioni di dati in descrizioni comando:
aggregationTarget viene spesso utilizzato in coppia con selectionMode e tooltip.trigger, ad esempio:
var options = {
// Allow multiple
// simultaneous selections.
selectionMode: 'multiple',
// Trigger tooltips
// on selections.
tooltip: {trigger: 'selection'},
// Group selections
// by x-value.
aggregationTarget: 'category',
};
Tipo:stringa
Predefinito: "automatico"
|
| animation.duration |
La durata dell'animazione, in millisecondi. Per maggiori dettagli, consulta la documentazione sull'animazione. Tipo:numero
Predefinito:0
|
| animation.startup |
Determina se il grafico si anima sul disegno iniziale. Se Tipo: booleano
Predefinito: false
|
| animation.easing |
La funzione di easing applicata all'animazione. Sono disponibili le seguenti opzioni:
Tipo:stringa
Predefinito: "lineare"
|
| annotations.boxStyle |
Per i grafici che supportano le annotazioni, l'oggetto
var options = {
annotations: {
boxStyle: {
// Color of the box outline.
stroke: '#888',
// Thickness of the box outline.
strokeWidth: 1,
// x-radius of the corner curvature.
rx: 10,
// y-radius of the corner curvature.
ry: 10,
// Attributes for linear gradient fill.
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
}
}
}
};
Questa opzione è attualmente supportata per i grafici ad area, a barre, a colonne, combinati, a linee e a dispersione. Non è supportato dal grafico delle annotazioni. Tipo:oggetto
Predefinito:null
|
| annotations.datum |
Per i grafici che supportano le annotazioni, l'oggetto
annotations.datum consente di ignorare la scelta di Google Graph per le annotazioni fornite per i singoli elementi dei dati (come i valori visualizzati con ogni barra di un grafico a barre). Puoi controllare il colore
con annotations.datum.stem.color, la lunghezza
dello stelo
con annotations.datum.stem.length e lo stile con annotations.datum.style.
Tipo:oggetto
Predefinito:il colore è "nero"; la lunghezza è 12; lo stile è "point".
|
| annotations.domain |
Per i grafici che supportano le annotazioni, l'oggetto
annotations.domain consente di ignorare la scelta di Google Graph per le annotazioni fornite per un dominio (l'asse principale del grafico, ad esempio l'asse X in un tipico grafico a linee). Puoi controllare il colore
con annotations.domain.stem.color, la lunghezza
dello stelo
con annotations.domain.stem.length e lo stile con annotations.domain.style.
Tipo:oggetto
Predefinito:il colore è "nero"; la lunghezza è 5; lo stile è "punto".
|
| annotations.highContrast |
Per i grafici che supportano le annotazioni, il valore booleano
annotations.highContrast consente di sostituire la scelta di Google Graph per il colore dell'annotazione. Per impostazione predefinita, il valore annotations.highContrast è true e
i grafici selezionano un colore dell'annotazione con un buon contrasto: colori chiari su sfondi scuri e
scuri su sfondo chiaro. Se imposti annotations.highContrast su false e non specifichi un colore personalizzato per l'annotazione, i grafici di Google utilizzeranno il colore predefinito delle serie per l'annotazione:
Tipo: booleano
Predefinito:true
|
| annotations.stem |
Per i grafici che supportano le annotazioni, l'oggetto
annotations.stem consente di sostituire la scelta di Google Graph per lo stile della radice. Puoi controllare il colore
con annotations.stem.color e la lunghezza
dello stelo con annotations.stem.length. Tieni presente che l'opzione della lunghezza della radice
non influisce sulle annotazioni con
stile 'line': per le annotazioni del punto
di origine 'line', la lunghezza della radice
è sempre uguale al testo e, per le annotazioni del dominio 'line', la radice
si estende sull'intero grafico.
Tipo:oggetto
Predefinito:il colore è "nero"; la lunghezza è 5 per le annotazioni del dominio e 12 per le annotazioni dei datum.
|
| annotations.style |
Per i grafici che supportano le annotazioni, l'opzione
annotations.style consente di ignorare la scelta di Google relativa al tipo di annotazione. Può essere
'line' o 'point'.
Tipo:stringa
Predefinito: "point"
|
| annotations.textStyle |
Per i grafici che supportano le annotazioni, l'oggetto
annotations.textStyle controlla l'aspetto del testo dell'annotazione:
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
// The color of the text.
color: '#871b47',
// The color of the text outline.
auraColor: '#d799ae',
// The transparency of the text.
opacity: 0.8
}
}
};
Questa opzione è attualmente supportata per i grafici ad area, a barre, a colonne, combinati, a linee e a dispersione. Non è supportato dal grafico di annotazione . Tipo:oggetto
Predefinito:null
|
| axisTitlesPosition |
Dove posizionare i titoli degli assi rispetto all'area del grafico. Valori supportati:
Tipo:stringa
Predefinito: 'out'
|
| backgroundColor |
Il colore di sfondo per l'area principale del grafico. Può essere una semplice stringa di colore HTML,
ad esempio Tipo: stringa o oggetto
Predefinito: "bianco"
|
| backgroundColor.stroke |
Il colore del bordo del grafico, come stringa di colore HTML. Tipo:stringa
Predefinito: "#666"
|
| backgroundColor.strokeWidth |
Lo spessore del bordo, in pixel. Tipo:numero
Predefinito:0
|
| backgroundColor.fill |
Il colore di riempimento del grafico, come stringa di colore HTML. Tipo:stringa
Predefinito: "bianco"
|
| chartArea |
Un oggetto con membri per configurare il posizionamento e le dimensioni dell'area del grafico (dove viene disegnato il grafico stesso, esclusi assi e legende). Sono supportati due formati: un numero o un numero seguito da %. Un numero semplice è un valore in pixel, mentre un numero seguito da % è una percentuale. Esempio: Tipo:oggetto
Predefinito:null
|
| chartArea.backgroundColor |
Colore di sfondo dell'area del grafico. Quando si utilizza una stringa, può essere una stringa esadecimale (ad es. '#fdc') o un nome di colore inglese. Quando si utilizza un oggetto, è possibile fornire le seguenti proprietà:
Tipo: stringa o oggetto
Predefinito: "bianco"
|
| chartArea.left |
Quanto è distante il grafico dal bordo sinistro. Tipo:numero o stringa.
Predefinita: automatica
|
| chartArea.top |
Quanto è distante il grafico dal bordo superiore. Tipo:numero o stringa.
Predefinita: automatica
|
| chartArea.width |
Larghezza dell'area del grafico. Tipo:numero o stringa.
Predefinita: automatica
|
| chartArea.height |
Altezza dell'area del grafico. Tipo:numero o stringa.
Predefinita: automatica
|
| colori |
I colori da utilizzare per gli elementi del grafico. Un array di stringhe, in cui ogni elemento è una stringa di colore HTML, ad esempio: Tipo: array di stringhe
Predefinito:colori predefiniti
|
| mirino |
Un oggetto contenente le proprietà del mirino per il grafico. Tipo:oggetto
Predefinito:null
|
| crosshair.color |
Il colore del mirino, espresso come nome di colore (ad es. "blu") o un valore RGB (ad es. "#adf"). Tipo:stringa
Tipo: predefinito
|
| crosshair.focused |
Un oggetto che contiene le proprietà del mirino attivato. Tipo:oggetto
Predefinita: valore predefinito
|
| crosshair.opacity |
L'opacità del mirino, dove Tipo:numero
Predefinita: 1,0
|
| crosshair.orientation |
L'orientamento del mirino, che può essere "verticale" solo per i capelli verticali, "orizzontale" solo per i capelli orizzontali o "entrambi" per i mirino tradizionali. Tipo:stringa
Predefinito: "entrambe"
|
| crosshair.selected |
Un oggetto contenente le proprietà del mirino al momento della selezione. Tipo:oggetto
Predefinita: valore predefinito
|
| crosshair.trigger |
Quando visualizzare i mirino: su Tipo:stringa
Predefinito: "entrambe"
|
| curveType |
Controlla la curva delle linee quando la larghezza della linea è diversa da zero. Può corrispondere a uno dei seguenti:
Tipo: stringa
Predefinito: "nessuno"
|
| dataOpacity |
La trasparenza dei punti dati, dove 1,0 corrisponde a completamente opaco e 0,0 a completamente trasparente. Nei grafici a dispersione, a istogramma, a barre e a colonne, si riferisce ai dati visibili: i punti nel grafico a dispersione e i rettangoli negli altri. Nei grafici in cui la selezione dei dati crea un punto, come i grafici a linee e ad area, si riferisce ai cerchi che vengono visualizzati al passaggio del mouse o alla selezione. Il grafico combinato mostra entrambi i comportamenti e questa opzione non ha alcun effetto sugli altri grafici. Per modificare l'opacità di una linea di tendenza, consulta opacità della linea di tendenza . Tipo:numero
Predefinita: 1,0
|
| enableInteractivity |
Indica se il grafico genera eventi basati sugli utenti o reagisce all'interazione dell'utente. Se il valore è false, il grafico non genera eventi di tipo "select" o altri eventi basati sull'interazione (ma genera eventi pronti o di errore) e non mostra il testo del passaggio del mouse o altri eventi basati sull'input dell'utente. Tipo: booleano
Predefinito:true
|
| explorer |
L'opzione Questa funzionalità è sperimentale e potrebbe cambiare nelle release future. Nota: Explorer funziona solo con assi continui (come numeri o date). Tipo:oggetto
Predefinito:null
|
| explorer.actions |
Esplora grafici di Google supporta tre azioni:
Tipo: array di stringhe
Predefinito: ['dragToPan', 'rightClickToReset']
|
| explorer.axis |
Per impostazione predefinita, gli utenti possono eseguire la panoramica sia in orizzontale che in verticale quando viene utilizzata l'opzione Tipo:stringa
Predefinito:panoramica sia orizzontale che verticale
|
| explorer.keepInBounds |
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 Tipo: booleano
Predefinito:false
|
| explorer.maxZoomIn |
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 Tipo:numero
Predefinito:0,25
|
| explorer.maxZoomOut |
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 Tipo:numero
Predefinito:4
|
| explorer.zoomDelta |
Quando gli utenti aumentano o diminuiscono lo zoom, Tipo:numero
Predefinita: 1,5
|
| focusTarget |
Il tipo di entità che viene attivata al passaggio del mouse. Influisce anche sull'entità selezionata tramite il clic del mouse e sull'elemento della tabella di dati associato agli eventi. Può essere uno dei seguenti:
In focusTarget "category" la descrizione comando visualizza tutti i valori della categoria. Questo può essere utile per confrontare i valori di serie diverse. Tipo:stringa
Predefinito: "datum"
|
| fontSize |
La dimensione predefinita dei caratteri, in pixel, di tutto il testo nel grafico. Puoi eseguire l'override di questa preferenza utilizzando le proprietà per elementi specifici del grafico. Tipo:numero
Predefinito:automatico
|
| fontName |
Il tipo di carattere predefinito per tutto il testo del grafico. Puoi eseguire l'override di questa preferenza utilizzando le proprietà per elementi specifici del grafico. Tipo:stringa
Predefinito: 'Arial'
|
| forceIFrame |
Disegna il grafico all'interno di un frame in linea. Tieni presente che in IE8 questa opzione viene ignorata; tutti i grafici di IE8 vengono tracciati in i-frame. Tipo: booleano
Predefinito:false
|
| hAxis |
Un oggetto con membri per configurare vari elementi dell'asse orizzontale. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui:
{
title: 'Hello',
titleTextStyle: {
color: '#FF0000'
}
}
Tipo:oggetto
Predefinito:null
|
| hAxis.baseline |
La base di riferimento per l'asse orizzontale. Questa opzione è supportata solo per un asse Tipo:numero
Predefinito:automatico
|
| hAxis.baselineColor |
Il colore della base di riferimento per l'asse orizzontale. Può essere qualsiasi stringa di colore HTML, ad esempio:
Questa opzione è supportata solo per un asse Tipo:numero
Predefinito: "nero"
|
| hAxis.direction |
La direzione in cui crescono i valori lungo l'asse orizzontale. Specifica Tipo: 1 o -1
Predefinito:1
|
| hAxis.format |
Una stringa di formato per le etichette numeriche o dell'asse delle date.
Per le etichette dell'asse numerico, si tratta di un sottoinsieme del
insieme di pattern di ICU
di formattazione decimale. Ad esempio,
Per le etichette dell'asse delle date, si tratta di un sottoinsieme del
insieme di pattern di ICU
per la formattazione della data. Ad esempio, 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
Questa opzione è supportata solo per un asse Tipo:stringa
Predefinita: automatica
|
| hAxis.gridlines |
Un oggetto con proprietà per configurare le linee della griglia sull'asse orizzontale. Tieni presente che le linee della griglia con l'asse orizzontale sono disegnate verticalmente. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: {color: '#333', minSpacing: 20}
Questa opzione è supportata solo per un asse Tipo:oggetto
Predefinito:null
|
| hAxis.gridlines.color |
Il colore delle linee della griglia orizzontali all'interno dell'area del grafico. Specifica una stringa di colore HTML valida. Tipo:stringa
Predefinito: "#CCC"
|
| hAxis.gridlines.count |
Il numero approssimativo di linee della griglia orizzontali all'interno dell'area del grafico.
Se specifichi un numero positivo per Tipo:numero
Predefinito: -1
|
| hAxis.gridlines.interval |
Un array di dimensioni (come valori dei dati, non come pixel) tra linee della griglia adiacenti. Al momento, questa opzione è solo per gli assi numerici, ma è analoga alle opzioni Tipo:numero compreso tra 1 e 10, escluso 10.
Predefinito:calcolato
|
| hAxis.gridlines.minSpacing |
Lo spazio minimo sullo schermo, in pixel, tra le linee della griglia principali in hAxis.
L'impostazione predefinita per le linee della griglia principali è Tipo:numero
Predefinito:calcolato
|
| hAxis.gridlines.multiple |
Tutti i valori della linea della griglia e dei segni di graduazione devono essere un multiplo del valore di questa opzione. Tieni presente che, a differenza degli intervalli, le potenze pari a 10 volte il multiplo non vengono considerate.
Di conseguenza, puoi forzare i tick in modo che siano numeri interi specificando
Tipo:numero
Predefinito:1
|
| hAxis.gridlines.units |
Sostituisce il formato predefinito per vari aspetti dei tipi di dati con data/ora/ora del giorno quando utilizzato con le linee della griglia calcolate dal grafico. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi. Il formato generale è:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Ulteriori informazioni sono disponibili in Date e ore. Tipo:oggetto
Predefinito:null
|
| hAxis.minorGridlines |
Un oggetto con membri per configurare le linee della griglia minori sull'asse orizzontale, in modo simile all'opzione hAxis.gridlines.
Questa opzione è supportata solo per un asse Tipo:oggetto
Predefinito:null
|
| hAxis.minorGridlines.color |
Il colore delle linee della griglia minori orizzontali all'interno dell'area del grafico. Specifica una stringa di colore HTML valida. Tipo:stringa
Predefinito:una combinazione dei colori della linea della griglia e dello sfondo
|
| hAxis.minorGridlines.count |
L'opzione Tipo:numero
Predefinita:1
|
| hAxis.minorGridlines.interval |
L'opzione minorGridlines.interval è simile all'opzione intervallo delle linee della griglia principali, ma l'intervallo scelto sarà sempre un divisore uniforme dell'intervallo principale della griglia.
L'intervallo predefinito per le scale lineari è Tipo:numero
Predefinita:1
|
| hAxis.minorGridlines.minSpacing |
Lo spazio minimo richiesto, in pixel, tra le linee della griglia minori adiacenti e tra le linee della griglia minori e principali. Il valore predefinito è 1/2 del valore minSpacing delle linee della griglia principali per le scale lineari e 1/5 di minSpacing per le scale log. Tipo:numero
Predefinito:calcolato
|
| hAxis.minorGridlines.multiple |
Uguale a quello dei Tipo:numero
Predefinito:1
|
| hAxis.minorGridlines.units |
Consente di eseguire l'override del formato predefinito per vari aspetti dei tipi di dati con data/ora/ora del giorno quando utilizzato con linee di griglia minori calcolate nel grafico. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi. Il formato generale è:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Ulteriori informazioni sono disponibili in Date e ore. Tipo:oggetto
Predefinito:null
|
| hAxis.logScale |
Questa opzione è supportata solo per un asse Tipo: booleano
Predefinito:false
|
| hAxis.scaleType |
Proprietà
Questa opzione è supportata solo per un asse Tipo:stringa
Predefinito: nullo
|
| hAxis.textPosition |
Posizione del testo dell'asse orizzontale rispetto all'area del grafico. Valori supportati: "out", "in", "none". Tipo:stringa
Predefinito: 'out'
|
| hAxis.textStyle |
Un oggetto che specifica lo stile di testo dell'asse orizzontale. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo:oggetto
Predefinita:
{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 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à
viewWindow verrà espanso automaticamente per includere i segni di graduazione minimo e massimo, a meno che non specifichi un valore Esempi:
Questa opzione è supportata solo per un asse Tipo: array di elementi
Predefinita: automatica
|
| hAxis.title |
Tipo:stringa
Predefinito:null
|
| hAxis.titleTextStyle |
Un oggetto che specifica lo stile di testo del titolo dell'asse orizzontale. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo:oggetto
Predefinita:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| hAxis.allowContainerBoundaryTextCutoff |
Se il valore è false, vengono nascoste le etichette più esterne anziché consentire che vengano ritagliate dal contenitore del grafico. Se impostato su true, consente il ritaglio delle etichette. Questa opzione è supportata solo per un asse Tipo: booleano
Predefinito:false
|
| hAxis.slantedText |
Se il valore è vero, disegna il testo sull'asse orizzontale con un angolo per far sì che sia più testo lungo l'asse; se il testo è falso, disegna il testo sull'asse orizzontale in verticale. Il comportamento predefinito prevede l'inclinazione del testo se non viene completamente adattato quando il testo è disegnato in verticale. Tieni presente che questa opzione è disponibile solo quando
Tipo: booleano
Predefinito:automatico
|
| hAxis.slantedTextAngle |
L'angolo del testo dell'asse orizzontale, se è inclinato. Ignorato se Tipo: numero, -90—90
Predefinito:30
|
| hAxis.maxAlternation |
Numero massimo di livelli di testo dell'asse orizzontale. Se le etichette di testo degli assi diventano troppo affollate, il server potrebbe spostare le etichette vicine verso l'alto o verso il basso per avvicinare le etichette. Questo valore specifica il maggior numero di livelli da utilizzare. Il server può utilizzare meno livelli se le etichette possono adattarsi senza sovrapposizioni. Per le date e gli orari, il valore predefinito è 1. Tipo:numero
Predefinito:2
|
| hAxis.maxTextLines |
Numero massimo di righe consentito per le etichette di testo. Le etichette possono estendersi su più righe se sono troppo lunghe e il numero di righe è, per impostazione predefinita, limitato dall'altezza dello spazio disponibile. Tipo:numero
Predefinita: automatica
|
| hAxis.minTextSpacing |
Spaziatura orizzontale minima, in pixel, consentita tra due etichette di testo adiacenti. Se le etichette sono distanziate troppo densamente o sono troppo lunghe, la spaziatura può scendere al di sotto di questa soglia e, in questo caso, verrà applicata una delle misure per evitare l'ingombro (ad es.troncare le etichette o eliminarne alcune). Tipo:numero
Predefinito: il valore di
hAxis.textStyle.fontSize |
| hAxis.showTextEvery |
Numero di etichette sull'asse orizzontale da visualizzare, dove 1 significa mostrare ogni etichetta, 2 significa mostrare ogni altra etichetta e così via. L'impostazione predefinita è provare a mostrare il maggior numero possibile di etichette senza sovrapposizioni. Tipo:numero
Predefinito:automatico
|
| hAxis.maxValue |
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.
Questa opzione è supportata solo per un asse Tipo:numero
Predefinito:automatico
|
| hAxis.minValue |
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.
Questa opzione è supportata solo per un asse Tipo:numero
Predefinito:automatico
|
| hAxis.viewWindowMode |
Consente di specificare come ridimensionare l'asse orizzontale per visualizzare i valori all'interno dell'area del grafico. Sono supportati i seguenti valori di stringa:
Questa opzione è supportata solo per un asse Tipo:stringa
Predefinita:
equivale a "pretty", ma
haxis.viewWindow.min e
haxis.viewWindow.max hanno la precedenza, se utilizzati.
|
| hAxis.viewWindow |
Specifica l'intervallo di ritaglio dell'asse orizzontale. Tipo:oggetto
Predefinito:null
|
| hAxis.viewWindow.max |
Ignorato quando il valore di Tipo:numero
Predefinita: automatica
|
| hAxis.viewWindow.min |
Ignorato quando il valore di Tipo:numero
Predefinita: automatica
|
| altezza |
Altezza del grafico, in pixel. Tipo:numero
Predefinita: altezza dell'elemento contenitore
|
| interpolateNulls |
Se indovinare il valore dei punti mancanti. Se è vero, il valore degli eventuali dati mancanti verrà indovinato in base ai punti vicini. Se il valore è false, lascerà un'interruzione nella linea nel punto sconosciuto.
Questa operazione non è supportata dai
grafici ad area con
l'opzione Tipo: booleano
Predefinito:false
|
| leggenda |
Un oggetto con membri per configurare vari aspetti della legenda. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: {position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tipo:oggetto
Predefinito:null
|
| legend.alignment |
Allineamento della legenda. Può corrispondere a uno dei seguenti:
Inizio, centro e fine sono relativi allo stile (verticale o orizzontale) della legenda. Ad esempio, in una legenda "a destra", "start" ed "end" si trovano rispettivamente in alto e in basso; per una legenda "in alto", "start" ed "end" si trovano rispettivamente a sinistra e a destra dell'area. Il valore predefinito dipende dalla posizione della legenda. Per le legende "bottom", il valore predefinito è "center", mentre per le altre legende è "start". Tipo:stringa
Predefinito:automatico
|
| legend.maxLines |
Numero massimo di righe nella legenda. Imposta questo valore su un numero maggiore di uno per aggiungere righe alla legenda. Nota: la logica esatta utilizzata per determinare il numero effettivo di linee visualizzate è ancora in flusso. Al momento questa opzione funziona solo quando legend.position è "top". Tipo:numero
Predefinito:1
|
| legend.pageIndex |
Indice di pagina in base zero selezionato iniziale della legenda. Tipo:numero
Predefinito:0
|
| legend.position |
Posizione della legenda. Può corrispondere a uno dei seguenti:
Tipo:stringa
Predefinito: "right"
|
| legend.textStyle |
Un oggetto che specifica lo stile di testo della legenda. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo:oggetto
Predefinita:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| lineDashStyle |
Il pattern on/off per le linee tratteggiate. Ad esempio, Tipo: array di numeri
Predefinito:null
|
| lineWidth |
Larghezza della linea di dati in pixel. Utilizza il valore zero per nascondere tutte le linee e mostrare solo i punti. Puoi eseguire l'override dei valori per singole serie utilizzando la proprietà Tipo:numero
Predefinito:2
|
| orientamento |
L'orientamento del grafico. Se impostato su Tipo:stringa
Predefinito: "orizzontale"
|
| pointShape |
La forma dei singoli elementi dei dati: "cerchio", "triangolo", "quadrato", "diamante", "stella" o "poligono". Consulta la documentazione sui punti per alcuni esempi. Tipo:stringa
Predefinito: "cerchio"
|
| pointSize |
Diametro dei punti visualizzati in pixel. Utilizza il valore zero per nascondere tutti i punti. Puoi eseguire l'override dei valori per singole serie utilizzando la proprietà Tipo:numero
Predefinito:0
|
| pointsVisible |
Consente di stabilire se visualizzare o meno i punti. Imposta su
È anche possibile eseguire l'override di questo tipo utilizzando il
ruolo di stile nel formato
Tipo: booleano
Predefinito:true
|
| reverseCategories |
Se il valore è impostato su true, le serie verranno tracciate da destra a sinistra. L'impostazione predefinita è disegnare da sinistra a destra.
Questa opzione è supportata solo per un asse
Tipo: booleano
Predefinito:false
|
| selectionMode |
Se il valore di Tipo:stringa
Predefinito: "singolo"
|
| serie |
Un array di oggetti, ognuno dei quali descrive il formato della serie corrispondente nel grafico. Per utilizzare i valori predefiniti per una serie, specifica un oggetto vuoto {}. Se non viene specificato un valore o una serie, verrà utilizzato il valore globale. Ogni oggetto supporta le seguenti proprietà:
Puoi specificare un array di oggetti, ognuno dei quali si applica alla serie nell'ordine specificato oppure puoi specificare un oggetto in cui ogni elemento figlio ha una chiave numerica che indica a quale serie si applica. Ad esempio, le due dichiarazioni seguenti sono identiche e dichiarano la prima serie come nera e assente dalla legenda e la quarta come rossa e assente dalla legenda:
series: [
{color: 'black', visibleInLegend: false}, {}, {},
{color: 'red', visibleInLegend: false}
]
series: {
0:{color: 'black', visibleInLegend: false},
3:{color: 'red', visibleInLegend: false}
}
Tipo: array di oggetti oppure oggetto con oggetti nidificati
Predefinito: {}
|
| tema |
Un tema è un insieme di valori di opzioni predefiniti che funzionano insieme per ottenere un comportamento o un effetto visivo specifico del grafico. Al momento è disponibile un solo tema:
Tipo:stringa
Predefinito:null
|
| title |
Testo da visualizzare sopra il grafico. Tipo:stringa
Predefinito:nessun titolo
|
| titlePosition |
Dove posizionare il titolo del grafico rispetto all'area del grafico. Valori supportati:
Tipo:stringa
Predefinito: 'out'
|
| titleTextStyle |
Un oggetto che specifica lo stile di testo del titolo. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo:oggetto
Predefinita:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| Descrizione comando |
Un oggetto con membri per configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: {textStyle: {color: '#FF0000'}, showColorCode: true}
Tipo:oggetto
Predefinito:null
|
| tooltip.ignoreBounds |
Se impostato su Nota:questo vale solo per le descrizioni comando HTML. Se questa funzionalità è abilitata con le descrizioni comando SVG, qualsiasi overflow al di fuori dei limiti del grafico verrà ritagliato. Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando. Tipo: booleano
Predefinito:false
|
| tooltip.isHtml |
Se il criterio viene impostato su true, utilizza le descrizioni comando per il rendering HTML (anziché SVG). Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando. Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dei dati della colonna della descrizione comando non è supportata dalla visualizzazione Grafico a bolle. Tipo: booleano
Predefinito:false
|
| tooltip.showColorCode |
Se il valore è vero, mostra i quadrati colorati accanto alle informazioni sulla serie nella descrizione comando. Il valore predefinito è true quando Tipo: booleano
Predefinito:automatico
|
| tooltip.textStyle |
Un oggetto che specifica lo stile di testo della descrizione comando. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo:oggetto
Predefinita:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| tooltip.trigger |
L'interazione dell'utente che determina la visualizzazione della descrizione comando:
Tipo:stringa
Predefinito: "focus"
|
| linee di tendenza |
Visualizza le
linee di tendenza
nei grafici che le supportano. Per impostazione predefinita vengono utilizzate linee di tendenza lineari, ma questa opzione può essere personalizzata con l'opzione
Le linee di tendenza sono specificate in base alla serie, quindi la maggior parte delle volte le opzioni saranno simili alla seguente:
var options = {
trendlines: {
0: {
type: 'linear',
color: 'green',
lineWidth: 3,
opacity: 0.3,
showR2: true,
visibleInLegend: true
}
}
}
Tipo:oggetto
Predefinito:null
|
| trendlines.n.color |
Il colore della linea di tendenza , espresso come nome di colore inglese o come stringa esadecimale. Tipo:stringa
Predefinito:colore predefinito della serie
|
| trendlines.n.degree |
Per le
linee di tendenza
di Tipo:numero
Predefinito:3
|
| trendlines.n.labelInLegend |
Se impostata, la linea di tendenza verrà visualizzata nella legenda come questa stringa. Tipo:stringa
Predefinito:null
|
| trendlines.n.lineWidth |
Lo spessore della linea di tendenza , in pixel. Tipo:numero
Predefinito:2
|
| trendlines.n.opacity |
La trasparenza della linea di tendenza , da 0,0 (trasparente) a 1,0 (opaco). Tipo:numero
Predefinita: 1,0
|
| trendlines.n.pointSize |
Le
linee di tendenza
sono costruite inserendo una serie di punti sul grafico; questa opzione raramente necessaria ti consente di personalizzare la dimensione dei punti. In genere è preferibile l'opzione Tipo:numero
Predefinito:1
|
| trendlines.n.pointsVisible |
Le
linee di tendenza
sono costruite tracciando una serie di punti sul grafico. L'opzione Tipo: booleano
Predefinito:true
|
| trendlines.n.showR2 |
Indica se mostrare il coefficiente di determinazione nella legenda o nella descrizione comando della linea di tendenza. Tipo: booleano
Predefinito:false
|
| trendlines.n.type |
Indica se le
linee di tendenza
sono Tipo:stringa
Predefinito:lineare
|
| trendlines.n.visibleInLegend |
Indica se l'equazione della linea di tendenza compare nella legenda. Apparirà nella descrizione comando della linea di tendenza. Tipo: booleano
Predefinito:false
|
| vAxes |
Specifica le proprietà dei singoli assi verticali, se il grafico ha più assi verticali.
Ogni oggetto secondario è un oggetto
Per specificare un grafico con più assi verticali, definisci prima 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, ognuno con un'etichetta numerica che specifica l'asse definito. Questo è il formato mostrato sopra; l'array è un array di oggetti, uno per asse. Ad esempio, la seguente notazione in stile array è identica all'oggetto
vAxes: [
{}, // Nothing specified for axis 0
{
title:'Losses',
textStyle: {color: 'red'} // Axis 1
}
]
Tipo: array di oggetti oppure oggetti con oggetti secondari
Predefinito:null
|
| vAxis |
Un oggetto con membri per configurare vari elementi dell'asse verticale. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: {title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Tipo:oggetto
Predefinito:null
|
| vAxis.baseline |
Tipo:numero
Predefinito:automatico
|
| vAxis.baselineColor |
Specifica il colore della base di riferimento per l'asse verticale. Può essere qualsiasi stringa di colore HTML, ad esempio Tipo:numero
Predefinito: "nero"
|
| vAxis.direction |
La direzione in cui crescono i valori lungo l'asse verticale. Per impostazione predefinita, i valori bassi si trovano nella parte inferiore del grafico. Specifica Tipo: 1 o -1
Predefinito:1
|
| vAxis.format |
Una stringa di formato per le etichette dell'asse numerico. Questo è un sottoinsieme del
set di pattern di ICU
.
Ad esempio,
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 Tipo:stringa
Predefinita: automatica
|
| vAxis.gridlines |
Un oggetto con membri per configurare le linee della griglia sull'asse verticale. Tieni presente che le linee della griglia dell'asse verticale sono disegnate orizzontalmente. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: {color: '#333', minSpacing: 20}
Tipo:oggetto
Predefinito:null
|
| vAxis.gridlines.color |
Il colore delle linee della griglia verticali all'interno dell'area del grafico. Specifica una stringa di colore HTML valida. Tipo:stringa
Predefinito: "#CCC"
|
| vAxis.gridlines.count |
Il numero approssimativo di linee della griglia orizzontali all'interno dell'area del grafico.
Se specifichi un numero positivo per Tipo:numero
Predefinito: -1
|
| vAxis.gridlines.interval |
Un array di dimensioni (come valori dei dati, non come pixel) tra linee della griglia adiacenti. Al momento, questa opzione è solo per gli assi numerici, ma è analoga alle opzioni Tipo:numero compreso tra 1 e 10, escluso 10.
Predefinito:calcolato
|
| vAxis.gridlines.minSpacing |
Lo spazio minimo sullo schermo, in pixel, tra le linee della griglia principali in hAxis.
L'impostazione predefinita per le linee della griglia principali è Tipo:numero
Predefinito:calcolato
|
| vAxis.gridlines.multiple |
Tutti i valori della linea della griglia e dei segni di graduazione devono essere un multiplo del valore di questa opzione. Tieni presente che, a differenza degli intervalli, le potenze pari a 10 volte il multiplo non vengono considerate.
Di conseguenza, puoi forzare i tick in modo che siano numeri interi specificando
Tipo:numero
Predefinito:1
|
| vAxis.gridlines.units |
Sostituisce il formato predefinito per vari aspetti dei tipi di dati con data/ora/ora del giorno quando utilizzato con le linee della griglia calcolate dal grafico. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi. Il formato generale è:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]},
hours: {format: [/*format strings here*/]},
minutes: {format: [/*format strings here*/]},
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]}
}
}
Ulteriori informazioni sono disponibili in Date e ore. Tipo:oggetto
Predefinito:null
|
| vAxis.minorGridlines |
Un oggetto con membri per configurare le linee della griglia minori sull'asse verticale, in modo simile all'opzione vAxis.gridlines. Tipo:oggetto
Predefinito:null
|
| vAxis.minorGridlines.color |
Il colore delle linee della griglia minori verticali all'interno dell'area del grafico. Specifica una stringa di colore HTML valida. Tipo:stringa
Predefinito:una combinazione dei colori della linea della griglia e dello sfondo
|
| vAxis.minorGridlines.count |
L'opzione minorGridlines.count è in gran parte deprecata, ad eccezione della disattivazione delle linee della griglia minori impostando il conteggio su 0. Il numero di linee della griglia minori dipende dall'intervallo tra le linee della griglia principali (vedi vAxis.gridlines.interval) e lo spazio minimo richiesto (vedi vAxis.minorGridlines.minSpacing). Tipo:numero
Predefinito:1
|
| vAxis.minorGridlines.interval |
L'opzione minorGridlines.interval è simile all'opzione intervallo delle linee della griglia principali, ma l'intervallo scelto sarà sempre un divisore uniforme dell'intervallo principale della griglia.
L'intervallo predefinito per le scale lineari è Tipo:numero
Predefinita:1
|
| vAxis.minorGridlines.minSpacing |
Lo spazio minimo richiesto, in pixel, tra le linee della griglia minori adiacenti e tra le linee della griglia minori e principali. Il valore predefinito è 1/2 del valore minSpacing delle linee della griglia principali per le scale lineari e 1/5 di minSpacing per le scale log. Tipo:numero
Predefinito:calcolato
|
| vAxis.minorGridlines.multiple |
Uguale a quello dei Tipo:numero
Predefinito:1
|
| vAxis.minorGridlines.units |
Consente di eseguire l'override del formato predefinito per vari aspetti dei tipi di dati con data/ora/ora del giorno quando utilizzato con linee di griglia minori calcolate nel grafico. Consente la formattazione per anni, mesi, giorni, ore, minuti, secondi e millisecondi. Il formato generale è:
gridlines: {
units: {
years: {format: [/*format strings here*/]},
months: {format: [/*format strings here*/]},
days: {format: [/*format strings here*/]}
hours: {format: [/*format strings here*/]}
minutes: {format: [/*format strings here*/]}
seconds: {format: [/*format strings here*/]},
milliseconds: {format: [/*format strings here*/]},
}
}
Ulteriori informazioni sono disponibili in Date e ore. Tipo:oggetto
Predefinito:null
|
| vAxis.logScale |
Se il valore è true, l'asse verticale diventa una scala logaritmica. Nota: tutti i valori devono essere positivi. Tipo: booleano
Predefinito:false
|
| vAxis.scaleType |
Proprietà
Questa opzione è supportata solo per un asse Tipo:stringa
Predefinito:null
|
| vAxis.textPosition |
Posizione del testo dell'asse verticale rispetto all'area del grafico. Valori supportati: "out", "in", "none". Tipo:stringa
Predefinito: 'out'
|
| vAxis.textStyle |
Un oggetto che specifica lo stile di testo dell'asse verticale. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo:oggetto
Predefinita:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.ticks |
Sostituisce i segni di graduazione dell'asse Y generati automaticamente con l'array specificato. Ogni elemento dell'array deve essere un valore di selezione valido (ad esempio un numero, una data, una data/ora o un'ora del giorno) oppure un oggetto. Se si tratta di un oggetto, deve avere una proprietà
viewWindow verrà espanso automaticamente per includere i segni di graduazione minimo e massimo, a meno che non specifichi un valore Esempi:
Tipo: array di elementi
Predefinita: automatica
|
| vAxis.title |
Proprietà Tipo:stringa
Predefinito:nessun titolo
|
| vAxis.titleTextStyle |
Un oggetto che specifica lo stile di testo del titolo dell'asse verticale. L'oggetto ha questo formato:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
Tipo:oggetto
Predefinita:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
| vAxis.maxValue |
Sposta il valore massimo dell'asse verticale sul valore specificato; sarà verso l'alto nella maggior parte dei grafici. Ignorato se impostato su un valore inferiore al valore y massimo dei dati.
Tipo:numero
Predefinito:automatico
|
| vAxis.minValue |
Sposta il valore minimo dell'asse verticale sul valore specificato. Sarà verso il basso nella maggior parte dei grafici. Ignorato se impostato su un valore maggiore del valore y minimo dei dati.
Tipo:numero
Predefinito:null
|
| vAxis.viewWindowMode |
Consente di specificare come scalare l'asse verticale per visualizzare i valori all'interno dell'area del grafico. Sono supportati i seguenti valori di stringa:
Tipo:stringa
Predefinita:
equivale a "pretty", ma
vaxis.viewWindow.min e
vaxis.viewWindow.max hanno la precedenza, se utilizzati.
|
| vAxis.viewWindow |
Specifica l'intervallo di ritaglio dell'asse verticale. Tipo:oggetto
Predefinito:null
|
| vAxis.viewWindow.max |
Il valore verticale massimo dei dati da visualizzare. Ignorato quando il valore di Tipo:numero
Predefinita: automatica
|
| vAxis.viewWindow.min |
Il valore verticale minimo dei dati da visualizzare. Ignorato quando il valore di Tipo:numero
Predefinita: automatica
|
| larghezza |
Larghezza del grafico, in pixel. Tipo:numero
Predefinita: larghezza dell'elemento contenitore
|
Metodi
| Metodo | |
|---|---|
draw(data, options) |
Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato
l'evento Tipo di reso: nessuno
|
getAction(actionID) |
Restituisce l'oggetto azione descrizione comando con l'oggetto Tipo restituito: oggetto
|
getBoundingBox(id) |
Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dell'elemento del grafico
I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato. Tipo restituito: oggetto
|
getChartAreaBoundingBox() |
Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dei contenuti del grafico (ovvero, escludendo etichette e legenda):
I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato. Tipo restituito: oggetto
|
getChartLayoutInterface() |
Restituisce un oggetto contenente informazioni sul posizionamento del grafico e dei suoi elementi sullo schermo. I seguenti metodi possono essere chiamati sull'oggetto restituito:
Viene chiamato dopo che il grafico è stato disegnato. Tipo restituito: oggetto
|
getHAxisValue(xPosition, optional_axis_index) |
Restituisce il valore orizzontale dei dati in Esempio: Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
|
getImageURI() |
Restituisce il grafico serializzato come URI immagine. Viene chiamato dopo che il grafico è stato disegnato. Consulta la sezione Stampa di grafici PNG. Tipo di ritorno:stringa
|
getSelection() |
Restituisce un array delle entità del grafico selezionate.
Le entità selezionabili sono punti, annotazioni, voci legenda e categorie.
Un punto o un'annotazione corrisponde a una cella nella tabella dati, a una voce di legenda a una colonna
(l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo).
Per questo grafico, è possibile selezionare una sola entità alla volta.
Tipo restituito: array di elementi di selezione
|
getVAxisValue(yPosition, optional_axis_index) |
Restituisce il valore dei dati verticali in Esempio: Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
|
getXLocation(dataValue, optional_axis_index) |
Restituisce la coordinata x dei pixel di Esempio: Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
|
getYLocation(dataValue, optional_axis_index) |
Restituisce la coordinata y dei pixel di Esempio: Viene chiamato dopo che il grafico è stato disegnato. Tipo di reso:number
|
removeAction(actionID) |
Rimuove l'azione della descrizione comando con l'oggetto 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
Qualsiasi azione della descrizione comando deve essere impostata prima di chiamare il metodo Tipo di reso:
none |
setSelection() |
Seleziona le entità del grafico specificate. Annulla la selezione precedente.
Le entità selezionabili sono punti, annotazioni, voci legenda e categorie.
Un punto o un'annotazione corrisponde a una cella nella tabella dati, a una voce di legenda a una colonna
(l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo).
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 maggiori informazioni su come utilizzare questi eventi, consulta Interattività di base, Gestione degli eventi e Attivazione degli eventi.
| Nome | |
|---|---|
animationfinish |
Attivato al termine dell'animazione della transizione. Proprietà:nessuna
|
click |
Attivato quando l'utente fa clic all'interno del grafico. Può essere utilizzato per identificare quando viene fatto clic su titolo, elementi di dati, voci della legenda, assi, linee della griglia o etichette. Proprietà:targetID
|
error |
Attivato quando si verifica un errore durante il tentativo di rendering del grafico. Proprietà: id, messaggio
|
legendpagination |
Attivato quando l'utente fa clic sulle frecce di impaginazione della legenda. Restituisce l'indice di pagina in base zero della legenda attuale e il numero totale di pagine. Proprietà: currentPageIndex, totalPages
|
onmouseover |
Attivato quando l'utente passa il mouse sopra un'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Proprietà:riga, colonna
|
onmouseout |
Attivato quando l'utente allontana il mouse dall'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Proprietà:riga, colonna
|
ready |
Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo Proprietà:nessuna
|
select |
Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama
Proprietà:nessuna
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.