Panoramica
Una tabella che può essere ordinata e impaginata. Le celle della tabella possono essere formattate utilizzando stringhe di formato o inserendo direttamente l'HTML come valori di cella. I valori numerici sono allineati a destra; i valori booleani vengono visualizzati come segni di spunta. Gli utenti possono selezionare singole righe con la tastiera o il mouse. Gli utenti possono ordinare le righe facendo clic sulle intestazioni di colonna. La riga di intestazione rimane fissa mentre l'utente scorre. La tabella attiva una serie di eventi corrispondenti all'interazione dell'utente.
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':['table']}); google.charts.setOnLoadCallback(drawTable); function drawTable() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Salary'); data.addColumn('boolean', 'Full Time Employee'); data.addRows([ ['Mike', {v: 10000, f: '$10,000'}, true], ['Jim', {v:8000, f: '$8,000'}, false], ['Alice', {v: 12500, f: '$12,500'}, true], ['Bob', {v: 7000, f: '$7,000'}, true] ]); var table = new google.visualization.Table(document.getElementById('table_div')); table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); } </script> </head> <body> <div id="table_div"></div> </body> </html>
Caricamento
Il nome del pacchetto google.charts.load
è "table"
.
google.charts.load('current', {packages: ['table']});
Il nome della classe della visualizzazione è google.visualization.Table
.
var visualization = new google.visualization.Table(container);
Formato dei dati
La tabella dati viene convertita in una tabella HTML corrispondente, con ogni riga/colonna della tabella tabella convertita in una riga/colonna nella tabella HTML. Ogni colonna deve essere dello stesso tipo di dati e sono supportati tutti i tipi di dati di visualizzazione standard (stringa, booleano, numero e così via).
Proprietà personalizzate
Puoi assegnare le seguenti proprietà personalizzate agli elementi della tabella di dati utilizzando il metodo setProperty()
di DataTable.
Nome proprietà | Applicabile a | Descrizione |
---|---|---|
NomeClasse | Cella | Un nome di classe di stringa da assegnare a una singola cella. Utilizza questa opzione per assegnare lo stile CSS alle singole celle. |
style | Cella | Una stringa di stile da assegnare in linea alla cella. Questa operazione sostituirà gli stili della classe CSS applicati a quella cella. Devi impostare la proprietà allowHTML=true per questa operazione. Esempio: 'border: 1px solid green;' . |
Esempio
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
Opzioni di configurazione
Nome | |
---|---|
allowHTML |
Se impostato su true, i valori formattati delle celle che includono tag HTML verranno visualizzati come HTML. Se impostato su false, la maggior parte dei formattatori personalizzati non funzionerà correttamente. Tipo: booleano
Predefinito: falso
|
stile rigaalternata |
Consente di stabilire se assegnare uno stile di colore alternato alle righe pari e dispari. Tipo: booleano
Predefinito: true
|
NomiClassi CSS |
Un oggetto in cui ogni nome di proprietà descrive un elemento della tabella e il valore della proprietà è una stringa, che definisce una classe da assegnare a quell'elemento della tabella. Utilizza questa proprietà per assegnare CSS personalizzati a elementi specifici della tabella. Per utilizzare questa proprietà, assegna un oggetto, dove il nome della proprietà specifica l'elemento tabella e il valore della proprietà è una stringa, specificando un nome classe da assegnare a tale elemento. Devi quindi definire uno stile CSS per il corso nella tua pagina. Sono supportati i seguenti nomi di proprietà:
Esempio:
Nota: in CSS, alcuni elementi sostituiscono altri. Ad esempio, se specifichi un colore di sfondo per un elemento Tipo: oggetto
Predefinito: null
|
numero rigaPrima |
Il numero della prima riga della tabella data. Utilizzato solo se showRowNumber è true. Tipo: numero
Predefinito: 1
|
Bloccati |
Il numero di colonne da sinistra che verranno bloccate. che continueranno a essere visualizzate scorrendo in orizzontale. Se Tipo: numero
Predefinito: null
|
height |
Imposta l'altezza dell'elemento contenitore della visualizzazione. Puoi utilizzare unità HTML standard (ad esempio, "100px", "80em", "60"). Se non vengono specificate unità, si presume che il numero sia di pixel. Se non specificato, il browser regola automaticamente l'altezza per adattarla alla tabella, riducendo il più possibile durante il processo; se inferiore all'altezza richiesta, la tabella aggiunge una barra di scorrimento verticale (anche la riga di intestazione è bloccata). Se è impostata su "100%", la tabella si espanderà il più possibile nell'elemento container. Tipo: stringa
Predefinito: automatica
|
pagina |
Se e come attivare l'impaginazione tra i dati. Scegli uno dei seguenti valori di stringa:
Tipo: stringa
Predefinito: "disable"
|
Dimensioni pagina |
Il numero di righe in ogni pagina, quando viene eseguito il paging con l'opzione della pagina. Tipo: numero
Predefinito: 10
|
pagingButtons |
Imposta un'opzione specificata per i pulsanti di paging. Le opzioni sono le seguenti:
Tipo: stringa o numero
Predefinito: "auto"
|
rtltabella |
Aggiunge il supporto di base per le lingue da destra a sinistra (ad esempio arabo o ebraico) invertendo l'ordine delle colonne della tabella in modo che la colonna zero sia la colonna più a destra e l'ultima colonna a sinistra. Ciò non influisce sull'indice della colonna nei dati sottostanti, ma solo nell'ordine di visualizzazione. La visualizzazione completa della lingua bidirezionale (BiDi) non è supportata dalla visualizzazione della tabella, anche con questa opzione. Questa opzione verrà ignorata se abiliti il paging (utilizzando l'opzione pagina) o se la tabella ha barre di scorrimento perché hai specificato opzioni di altezza e larghezza inferiori alle dimensioni richieste della tabella. Tipo: booleano
Predefinito: falso
|
scorri invece sulla posizione di inizio |
Imposta la posizione di scorrimento orizzontale, in pixel, se la tabella ha barre di scorrimento orizzontali perché hai impostato la proprietà della larghezza. La tabella si aprirà facendo scorrere molti pixel oltre la colonna più a sinistra. Tipo: numero
Predefinito: 0
|
showRowNumber |
Se impostato su true, mostra il numero di riga come prima colonna della tabella. Tipo: booleano
Predefinito: falso
|
ordinare |
Se e come ordinare le colonne quando l'utente fa clic sull'intestazione di una colonna. Se l'ordinamento è abilitato, valuta anche l'impostazione delle proprietà sortAscending e sortColumn. Scegli uno dei seguenti valori di stringa:
Tipo: stringa
Predefinito: "enable"
|
in ordine crescente |
L'ordine in cui vengono ordinate le colonne di ordinamento iniziale. Vero per crescente, falso per decrescente. Ignorato se Tipo: booleano
Predefinito: true
|
ordina colonna |
L'indice di una colonna della tabella dati, secondo la quale la tabella viene ordinata inizialmente. La colonna verrà contrassegnata con una piccola freccia che indica l'ordinamento. Tipo: numero
Predefinito: -1
|
Pagina iniziale |
La prima pagina della tabella da visualizzare. Utilizzato solo se Tipo: numero
Predefinito: 0
|
width |
Imposta la larghezza dell'elemento contenitore della visualizzazione. Puoi utilizzare unità HTML standard (ad esempio, "100px", "80em", "60"). Se non vengono specificate unità, si presume che il numero sia di pixel. Se non specificato, il browser regola automaticamente la larghezza per adattarla alla tabella, riducendo il più possibile la procedura; se è inferiore a quella richiesta, la tabella aggiunge una barra di scorrimento orizzontale. Se impostata su "100%", la tabella si espanderà il più possibile nell'elemento container. Tipo: stringa
Predefinito: automatica
|
Metodi
Metodo | |
---|---|
draw(data, options) |
Disegna la tabella. Tipo di reso: nessuno
|
getSelection() |
Implementazione standard di getSelection. Gli elementi di selezione sono tutti elementi di riga. Può restituire più di una riga selezionata. Gli indici di riga nell'oggetto di selezione fanno riferimento alla tabella dati originale indipendentemente da qualsiasi interazione dell'utente (ordine, paging e così via). Tieni presente che le selezioni vengono attivate: se fai clic su una cella la prima volta, la selezioni; se la fai di nuovo, la cella viene deselezionata, generando un evento di selezione, ma nessun elemento selezionato nell'oggetto di selezione recuperato. Tipo di reso: array di elementi di selezione
|
getSortInfo() |
Richiama questo metodo per recuperare le informazioni sull'attuale stato di ordinamento di una tabella ordinata (in genere dall'utente, che ha fatto clic sull'intestazione di una colonna per ordinare le righe in base a una colonna specifica). Se hai disattivato l'ordinamento, questo metodo non funzionerà. Se non hai ordinato i dati nel codice o l'utente non li ha ordinati selezionando il codice, verranno restituiti i valori di ordinamento predefiniti. Tipo di reso: un oggetto con le seguenti proprietà:
|
setSelection(selection) |
Implementazione standard di Tipo di reso: nessuno
|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
Eventi
Nome | |
---|---|
seleziona |
Evento di selezione standard, ma è possibile selezionare solo intere righe. Proprietà: nessuna
|
pagina |
Si attiva quando un utente fa clic su un pulsante di navigazione nelle pagine. Proprietà:
page : numero. L'indice della pagina verso cui accedere. |
ordinare |
Si attiva quando un utente fa clic sull'intestazione di una colonna e l'opzione di ordinamento non viene disattivata. Proprietà: un oggetto con le seguenti proprietà:
|
pronta |
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 di disegno e chiamarlo solo dopo che è stato attivato l'evento. Proprietà: nessuna
|
Formatori
Nota: la visualizzazione tabella ha un insieme di oggetti formatore che è stato sostituito dai formatori generici, che si comportano allo stesso modo, ma possono essere utilizzati in qualsiasi visualizzazione.
La tabella seguente mostra il formatore della tabella precedente e il relativo formatore generico. Durante la scrittura di un nuovo codice devi utilizzare il formatore generico.
Formattatore tabella | |
---|---|
Formato freccia freccia tabella | google.visualization.ArrowFormat |
Formato BarBar | google.visualization.BarFormat |
Formato colore tabella | google.visualization.ColorFormat |
Formato data tabella | google.visualization.DateFormat |
FormatoNumeroTabella | google.visualization.NumberFormat |
Formato schema della tabella | google.visualization.PatternFormat |
Importante: i formatori spesso utilizzano HTML per formattare il testo, pertanto devi impostare l'opzione allowHtml
su true
.
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato ad alcun server.