Panoramica
Grafico a dispersione di punti su un grafico. Quando l'utente passa il mouse sopra i punti, vengono visualizzate le descrizioni comando con ulteriori informazioni.
I grafici a dispersione di Google vengono visualizzati all'interno del browser utilizzando SVG o VML a seconda delle funzionalità del browser.
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(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Age', 'Weight'], [ 8, 12], [ 4, 5.5], [ 11, 14], [ 4, 5], [ 3, 3.5], [ 6.5, 7] ]); var options = { title: 'Age vs. Weight comparison', hAxis: {title: 'Age', minValue: 0, maxValue: 15}, vAxis: {title: 'Weight', minValue: 0, maxValue: 15}, legend: 'none' }; var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> </body> </html>
Modificare e animare forme
Per impostazione predefinita, i grafici a dispersione rappresentano gli elementi del set di dati con cerchi. Puoi specificare altre forme con l'opzione pointShape
, illustrate in modo dettagliato nella documentazione Personalizzazione dei punti.
Come con la maggior parte degli altri grafici Google, puoi animarli utilizzando gli eventi. Puoi aggiungere un listener di eventi per il primo evento ready
e tracciare nuovamente il grafico dopo aver apportato le modifiche desiderate. Dopo il primo evento ready
, puoi ascoltare l'evento animationfinish
per ripetere la procedura, ottenendo un'animazione continua. L'opzione animation
consente di controllare in che modo viene eseguito il nuovo rendering: immediatamente
(nessuna animazione) o senza problemi e se la velocità e la velocità di un determinato comportamento vengono rispettate.
var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); ... function randomWalk() { ... }
<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 = new google.visualization.DataTable(); data.addColumn('number'); data.addColumn('number'); var radius = 100; for (var i = 0; i < 6.28; i += 0.1) { data.addRow([radius * Math.cos(i), radius * Math.sin(i)]); } // Our central point, which will jiggle. data.addRow([0, 0]); var options = { legend: 'none', colors: ['#087037'], pointShape: 'star', pointSize: 18, animation: { duration: 200, easing: 'inAndOut', } }; var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div')); // Start the animation by listening to the first 'ready' event. google.visualization.events.addOneTimeListener(chart, 'ready', randomWalk); // Control all other animations by listening to the 'animationfinish' event. google.visualization.events.addListener(chart, 'animationfinish', randomWalk); chart.draw(data, options); function randomWalk() { var x = data.getValue(data.getNumberOfRows() - 1, 0); var y = data.getValue(data.getNumberOfRows() - 1, 1); x += 5 * (Math.random() - 0.5); y += 5 * (Math.random() - 0.5); if (x * x + y * y > radius * radius) { // Out of bounds. Bump toward center. x += Math.random() * ((x < 0) ? 5 : -5); y += Math.random() * ((y < 0) ? 5 : -5); } data.setValue(data.getNumberOfRows() - 1, 0, x); data.setValue(data.getNumberOfRows() - 1, 1, y); chart.draw(data, options); } } </script> </head> <body> <div id="animatedshapes_div" style="width: 500px; height: 500px;"></div> </body> </html>
Creare grafici a dispersione di materiali
Nel 2014, Google ha annunciato linee guida pensate per supportare lo stile e il design comune nelle sue proprietà e app (come le app per Android) eseguite sulle piattaforme Google. Chiamiamo questo sforzo Material Design. Forniremo le versioni "Material" di tutti i nostri grafici principali, quindi utilizzatele se volete.
La creazione di un grafico a dispersione di materiali è simile alla creazione di un grafico a dispersione "classico". Carichi l'API Visualizzazione Google (anche se con il pacchetto 'scatter'
anziché il pacchetto 'corechart'
), definisci la tua tabella di dati, quindi crea un oggetto
(ma di classe google.charts.Scatter
invece di
google.visualization.ScatterChart
).
Nota: i grafici dei materiali non funzionano nelle versioni precedenti di Internet Explorer. IE8 e le versioni precedenti non supportano SVG, che è necessario per i grafici di materiali.
I grafici a dispersione di materiali presentano molti piccoli miglioramenti rispetto ai grafici a dispersione classici, tra cui l'opacità variabile per una leggibilità dei punti sovrapposti, una tavolozza dei colori migliorata, una formattazione più chiara delle etichette, una spaziatura predefinita più ristretta, linee della griglia più deboli e titoli (e l'aggiunta di sottotitoli).
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82],[0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, hAxis: {title: 'Hours Studied'}, vAxis: {title: 'Grade'} }; var chart = new google.charts.Scatter(document.getElementById('scatterchart_material')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
I grafici dei materiali sono in beta. L'aspetto e l'interattività sono in gran parte definitivi, ma molte delle opzioni disponibili nei grafici classici non sono ancora disponibili al loro interno. Puoi trovare un elenco delle opzioni non ancora supportate in
questo problema.
Inoltre, il modo in cui vengono dichiarate le opzioni non è definitivo; pertanto, se utilizzi una
delle opzioni della versione classica, devi convertirle in opzioni dei materiali sostituendo questa riga:
chart.draw(data, options);
...con questo:
chart.draw(data, google.charts.Scatter.convertOptions(options));
Grafici a doppia Y
A volte potresti voler visualizzare due serie in un grafico a dispersione, con due assi Y indipendenti: un asse sinistro per una serie e un asse destro per un'altra:
Tenete presente che non solo i nostri due assi Y sono etichettati diversamente ("Valutazione dell'esame finale" rispetto a "Ore studiate"), ma ognuno ha le proprie scale e griglie indipendenti. Se vuoi
personalizzare questo comportamento, utilizza le opzioni vAxis.gridlines
.
Nel codice seguente, le opzioni axes
e series
specificano insieme l'aspetto a due y del grafico. L'opzione series
specifica quale asse utilizzare per
ciascun elemento ('final grade'
e 'hours studied'
; non devono avere alcuna
relazione con i nomi delle colonne nella tabella dati). L'opzione axes
rende questo grafico un doppio asse Y, che posiziona l'asse 'Final Exam Grade'
a sinistra e l'asse 'Hours Studied'
a destra.
google.charts.load('current', {'packages':['corechart', 'scatter']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var button = document.getElementById('change-chart'); var chartDiv = document.getElementById('chart_div'); var data = new google.visualization.DataTable(); data.addColumn('number', 'Student ID'); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 0, 67], [1, 1, 88], [2, 2, 77], [3, 3, 93], [4, 4, 85], [5, 5, 91], [6, 6, 71], [7, 7, 78], [8, 8, 93], [9, 9, 80], [10, 10, 82], [11, 0, 75], [12, 5, 80], [13, 3, 90], [14, 1, 72], [15, 5, 75], [16, 6, 68], [17, 7, 98], [18, 3, 82], [19, 9, 94], [20, 2, 79], [21, 2, 95], [22, 2, 86], [23, 3, 67], [24, 4, 60], [25, 2, 80], [26, 6, 92], [27, 2, 81], [28, 8, 79], [29, 9, 83] ]); var materialOptions = { chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, width: 800, height: 500, series: { 0: {axis: 'hours studied'}, 1: {axis: 'final grade'} }, axes: { y: { 'hours studied': {label: 'Hours Studied'}, 'final grade': {label: 'Final Exam Grade'} } } }; var classicOptions = { width: 800, series: { 0: {targetAxisIndex: 0}, 1: {targetAxisIndex: 1} }, title: 'Students\' Final Grades - based on hours studied', vAxes: { // Adds titles to each axis. 0: {title: 'Hours Studied'}, 1: {title: 'Final Exam Grade'} } }; function drawMaterialChart() { var materialChart = new google.charts.Scatter(chartDiv); materialChart.draw(data, google.charts.Scatter.convertOptions(materialOptions)); button.innerText = 'Change to Classic'; button.onclick = drawClassicChart; } function drawClassicChart() { var classicChart = new google.visualization.ScatterChart(chartDiv); classicChart.draw(data, classicOptions); button.innerText = 'Change to Material'; button.onclick = drawMaterialChart; } drawMaterialChart(); };
Grafici Top-X
Nota: gli assi Top-X sono disponibili solo per i grafici dei materiali (ovvero quelli con pacchetto scatter
).
Se vuoi inserire le etichette e il titolo dell'asse X nella parte superiore del grafico anziché nella parte inferiore, puoi farlo nei grafici Materiale con l'opzione axes.x
:
google.charts.load('current', {'packages':['scatter']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { var data = new google.visualization.DataTable(); data.addColumn('number', 'Hours Studied'); data.addColumn('number', 'Final'); data.addRows([ [0, 67], [1, 88], [2, 77], [3, 93], [4, 85], [5, 91], [6, 71], [7, 78], [8, 93], [9, 80], [10, 82], [0, 75], [5, 80], [3, 90], [1, 72], [5, 75], [6, 68], [7, 98], [3, 82], [9, 94], [2, 79], [2, 95], [2, 86], [3, 67], [4, 60], [2, 80], [6, 92], [2, 81], [8, 79], [9, 83], [3, 75], [1, 80], [3, 71], [3, 89], [4, 92], [5, 85], [6, 92], [7, 78], [6, 95], [3, 81], [0, 64], [4, 85], [2, 83], [3, 96], [4, 77], [5, 89], [4, 89], [7, 84], [4, 92], [9, 98] ]); var options = { width: 800, height: 500, chart: { title: 'Students\' Final Grades', subtitle: 'based on hours studied' }, axes: { x: { 0: {side: 'top'} } } }; var chart = new google.charts.Scatter(document.getElementById('scatter_top_x')); chart.draw(data, google.charts.Scatter.convertOptions(options)); }
Caricamento
Il nome del pacchetto google.charts.load
è "corechart"
, mentre il nome della classe della visualizzazione è google.visualization.ScatterChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.ScatterChart(container);
Per i grafici a dispersione di materiali, il nome del pacchetto google.charts.load
è
"scatter"
e
il nome della classe della visualizzazione è google.charts.Scatter
.
google.charts.load("current", {packages: ["scatter"]});
var visualization = new google.charts.Scatter(container);
Formato dei dati
Righe: ogni riga nella tabella rappresenta un insieme di punti dati con lo stesso valore dell'asse X.
Colonne:
Colonna 0 | Colonna 1 | … | Colonna N | |
---|---|---|---|---|
Finalità: | Valori del punto dati X | Valori Y serie 1 | … | Valori serie N Y |
Tipo di dati: | stringa, numero o data/ora/ora del giorno | stringa, numero o data/ora/ora del giorno | … | stringa, numero o data/ora/ora del giorno |
Ruolo: | dati | dati | … | dati |
Ruoli di colonna facoltativi: | Assente |
… |
Per specificare più serie, specifica due o più colonne dell'asse Y e i valori Y solo in una colonna Y:
Valori X | Valori serie 1 Y | Valori serie 2 Y |
---|---|---|
10 | null | 75 |
20 | null | 18 |
33 | null | 22 |
55 | 16 | null |
14 | 61 | null |
48 | 3 | null |
Opzioni di configurazione
Nome | |
---|---|
AggregaTarget |
Come vengono raggruppate più selezioni di dati in descrizioni comando:
aggregationTarget verrà 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: "auto"
|
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
|
annot.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
|
annotazioni.datum |
Per i grafici che supportano le annotazioni, l'oggetto
annotations.datum ti consente di sostituire la scelta di Google Tables per le annotazioni fornite per i singoli elementi di dati (ad esempio, i valori visualizzati con ogni barra su 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 è "punto".
|
annotazioni.dominio |
Per i grafici che supportano le annotazioni, l'oggetto
annotations.domain consente di sostituire la scelta di Google Tables per le annotazioni fornite per un dominio (l'asse principale del grafico, come l'asse X su un grafico a linee tipico). 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".
|
annotazioni.alto contrasto |
Per i grafici che supportano le annotazioni, il valore booleano
annotations.highContrast consente di sostituire la scelta del colore dell'annotazione in Google grafici. Per impostazione predefinita, annotations.highContrast è true, consentendo ai grafici di selezionare un colore dell'annotazione con un buon contrasto: colori chiari su sfondi scuri e scuri sulla luce. Se imposti annotations.highContrast su false e non specifichi il colore dell'annotazione, Google Tables utilizza il colore predefinito della serie per l'annotazione:
Tipo: booleano
Predefinito: true
|
annotazioni.stem |
Per i grafici che supportano le annotazioni, l'oggetto
annotations.stem ti consente di sostituire la scelta di Google Class 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 relativa alla lunghezza dello stelo non ha alcun effetto sulle annotazioni con stile 'line' : per le annotazioni con origine 'line' , la lunghezza dello stelo è sempre la stessa del testo e, per le annotazioni del dominio 'line' , si estende su tutto il grafico.
Tipo: oggetto
Valore predefinito: il colore è "nero"; la lunghezza è 5 per le annotazioni di dominio e 12 per le annotazioni di riferimento.
|
annotazioni.style |
Per i grafici che supportano le annotazioni, l'opzione
annotations.style consente di ignorare la scelta del tipo di annotazione in Google Tables. Può essere
'line' o 'point' .
Tipo: stringa
Predefinito: "point"
|
annotazioni.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 delle annotazioni . Tipo: oggetto
Predefinito: null
|
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"
|
titolo_grafico |
Per i grafici materiale, questa opzione specifica il titolo. Tipo: stringa
Predefinito: null
|
grafico.sottotitolo |
Per Grafici material, questa opzione specifica il sottotitolo. Solo i grafici Material supportano i sottotitoli. Tipo: stringa
Predefinito: null
|
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
|
mirino |
Un oggetto contenente le proprietà crosshair per il grafico. Tipo: oggetto
Predefinito: null
|
colorecromo |
Il colore del mirino, indicato con il nome del colore (ad es. "blu") o un valore RGB (ad es. "#adf"). Tipo: stringa
Tipo: valore predefinito
|
mirino |
Un oggetto contenente le proprietà del mirino alla messa a fuoco. Tipo: oggetto
Predefinito: valore predefinito
|
crosshair.opacity |
L'opacità del mirino, con Tipo: numero
Predefinito: 1,0
|
orientamento. |
L'orientamento del mirino, che può essere "verticale" solo per i capelli verticali, "orizzontale" solo per i peli orizzontali o "entrambi" per i mirini tradizionali. Tipo: stringa
Predefinito: "entrambi"
|
crosshair.selected |
Un oggetto contenente le proprietà del mirino al momento della selezione. Tipo: oggetto
Predefinito: valore predefinito
|
crosshair.trigger |
Quando mostrare i mirini: Tipo: stringa
Predefinito: "entrambi"
|
tipo curva |
Controlla la curva delle linee quando la larghezza della linea è diversa da zero. Può corrispondere a uno dei seguenti:
Tipo:stringa
Predefinito: "nessuno"
|
Opacità dati |
La trasparenza dei punti dati, con 1,0 completamente opaco e 0,0 completamente trasparente. Nei grafici a dispersione, a istogrammi, a barre e a colonne, fanno riferimento ai dati visibili: punti nel grafico a dispersione e rettangoli negli altri. Nei grafici in cui la selezione dei dati crea un punto, ad esempio i grafici a linee e ad area, si riferisce ai cerchi che vengono visualizzati al passaggio del mouse o alla selezione. Il grafico combinato mostra entrambi i comportamenti e questa opzione non ha alcun effetto su altri grafici. Per modificare l'opacità di una linea di tendenza, consulta opacità della linea di tendenza . Tipo: numero
Predefinito: 1,0
|
EnableInteractivity |
Indica se il grafico genera eventi basati sugli utenti o reagisce alle interazioni degli utenti. Se il valore è false, il grafico non mostrerà "seleziona" o altri eventi basati sulle interazioni (ma verrà generato eventi di errore o pronti) e non mostrerà il testo al passaggio del mouse o non cambierà in base all'input dell'utente. Tipo: booleano
Predefinito: true
|
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>}
|
larghezza di riga |
Spessore della linea in pixel. Utilizza zero per nascondere tutte le righe e mostrare solo i punti. Tipo: numero
Predefinito: 0
|
orientamento |
L'orientamento del grafico. Se impostato su Tipo: stringa
Predefinito: "orizzontale"
|
Forma punto |
La forma dei singoli elementi dei dati: "cerchio", "triangolo", "quadrato", "diamante", "a stella" o "poligono". Consulta la documentazione sui punti per esempi. Tipo: stringa
Predefinito: "cerchio"
|
dimensionePunto |
Diametro dei punti dati, in pixel. Usa il tasto zero per nascondere tutti i punti. Puoi sostituire i valori per le singole serie utilizzando la proprietà Tipo: numero
Predefinito: 7
|
punti visibili |
Determina se verranno visualizzati i punti. Imposta su
Puoi anche eseguire l'override usando il
ruolo di stile nel formato
Tipo: booleano
Predefinito: true
|
selezionemodalità |
Quando Tipo: stringa
Predefinito: "singolo"
|
series |
Un array di oggetti, ognuno che descrive il formato della serie corrispondente nel grafico. Per utilizzare i valori predefiniti per una serie, specifica un oggetto vuoto {}. Se non viene specificato un valore o una serie, verrà utilizzato il valore globale. Ogni oggetto supporta le seguenti proprietà:
Puoi specificare un array di oggetti, ognuno dei quali si applica alla serie nell'ordine specificato, oppure un oggetto in cui ogni elemento secondario ha una chiave numerica che indica a quale serie si applica. Ad esempio, le due dichiarazioni che seguono sono identiche e dichiarano la prima serie come nera e assente dalla legenda e la quarta come rossa e assente dalla legenda: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } Tipo: array di oggetti o oggetti con oggetti nidificati
Predefinito: {}
|
tema |
Un tema è un insieme di valori di opzione predefiniti che funzionano insieme per ottenere un comportamento visivo o un comportamento specifico del grafico. Attualmente è disponibile un solo tema:
Tipo: stringa
Predefinito: null
|
title |
Testo da visualizzare sopra il grafico. Tipo: stringa
Predefinito: nessun titolo
|
titoloPosizione |
Dove posizionare il titolo del grafico rispetto all'area del grafico. Valori supportati:
Tipo: stringa
Predefinito: "out"
|
titoloTestoStile |
Un oggetto che specifica lo stile del testo del titolo. L'oggetto ha questo formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tipo: oggetto
Predefinito:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
descrizione comando |
Un oggetto con membri che possono configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto, come mostrato di seguito: {textStyle: {color: '#FF0000'}, showColorCode: true} Tipo: oggetto
Predefinito: null
|
tooltip.ignoreBounds |
Se impostato su Nota: questo vale solo per le descrizioni comando HTML. Se questa funzionalità è abilitata con le descrizioni comando SVG, l'eventuale overflow oltre i limiti del grafico verrà ritagliato. Per ulteriori dettagli, consulta la sezione Personalizzare i contenuti della descrizione comando. Tipo: booleano
Predefinito: falso
|
descrizione comando.isHTML |
Se è impostato su true, utilizza le descrizioni comando visualizzate in HTML (anziché il rendering SVG). Per ulteriori dettagli, consulta la sezione Personalizzare i contenuti della descrizione comando. Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dati della colonna Descrizione comando non è supportata dalla visualizzazione Grafico a bolle. Tipo: booleano
Predefinito: falso
|
descrizione comando.showColorCode |
Se true, mostra i riquadri colorati accanto alle informazioni sulla serie nella descrizione comando. 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"
|
linee di tendenza |
Visualizza
le linee di tendenza
sui grafici che le supportano. Per impostazione predefinita vengono utilizzate le linee di tendenza lineari, ma possono essere personalizzate con l'opzione
Le linee di tendenza sono specificate in base alla serie, perciò la maggior parte delle opzioni sarà simile a questa: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } Tipo: oggetto
Predefinito: null
|
linee di tendenza.n.colore |
Il colore della linea di tendenza, espresso come nome del colore inglese o stringa esadecimale. Tipo: stringa
Predefinito: colore della serie predefinita
|
tendenze.n.grado |
Per le
linee di tendenza
di Tipo: numero
Predefinito: 3
|
Trendslines.n.labelInLegend |
Se impostata, la linea di tendenza apparirà nella legenda come questa stringa. Tipo: stringa
Predefinito: null
|
Trendslines.n.lineWidth |
Lo spessore della linea della linea di tendenza, in pixel. Tipo: numero
Predefinito: 2
|
Trendslines.n.opacity |
La trasparenza della linea di tendenza , da 0,0 (trasparente) a 1,0 (opaca). Tipo: numero
Predefinito: 1,0
|
tendenzelines.n.pointSize |
Le
linee di tendenza
vengono costituite stampando un gruppo di punti sul grafico; questa opzione richiesta raramente
consente di personalizzare le dimensioni dei punti. In genere, è preferibile l'opzione Tipo: numero
Predefinito: 1
|
Trendslines.n.pointsVisible |
Le
linee di tendenza
vengono costituite stampando un gruppo di punti sul grafico. L'opzione Tipo: booleano
Predefinito: true
|
Trendslines.n.showR2 |
Indica se mostrare il coefficiente di determinazione nella legenda o nella descrizione comando della linea di tendenza. Tipo: booleano
Predefinito: falso
|
tendenze.n.tipo |
Indica se le linee di tendenza sono Tipo: stringa
Predefinito: lineare
|
Trendslines.n.visibleInLegend |
Indica se l'equazione della linea di tendenza è visualizzata nella legenda. Verrà visualizzato nella descrizione comando della linea di tendenza. Tipo: booleano
Predefinito: falso
|
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 voci di punti e legende.
Un punto corrisponde a una cella della tabella dati e una voce di legenda a una colonna
(l'indice della riga è null).
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 voci di punti e legende.
Un punto corrisponde a una cella della tabella dati e una voce di legenda a una colonna
(l'indice della riga è null).
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. 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. 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. I dati non vengono inviati ad alcun server.