Panoramica
Una tabella che può essere ordinata e impaginata. Le celle delle tabelle possono essere formattate utilizzando stringhe di formato o inserendo direttamente l'HTML come valori delle celle. I valori numerici sono allineati a destra; i valori booleani sono 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 in corso...
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 DataTable viene convertita in una tabella HTML corrispondente, con ogni riga/colonna nella DataTable 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 |
|---|---|---|
| className | Cell | Un nome di classe stringa da assegnare a una singola cella. Utilizza questa opzione per assegnare gli stili CSS alle singole celle. |
| stile | Cell | Una stringa di stile da assegnare in linea alla cella. Questa operazione sostituirà gli stili delle classi CSS applicati alla cella. Affinché questo comando funzioni, devi impostare la proprietà allowHTML=true. 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 viene impostato su false, la maggior parte dei formatter personalizzati non funzionerà correttamente. Tipo: booleano
Predefinito:false
|
| alternatingRowStyle |
Determina se lo stile del colore alternato verrà assegnato alle righe pari e dispari. Tipo: booleano
Predefinito:true
|
| cssClassNames |
Un oggetto in cui il nome di ogni proprietà descrive un elemento della tabella e il valore della proprietà è una stringa che definisce una classe da assegnare all'elemento della tabella. Utilizza questa proprietà per assegnare CSS personalizzati a elementi specifici della tabella. Per utilizzare questa proprietà, assegna un oggetto in cui il nome della proprietà specifica l'elemento della tabella e il valore della proprietà è una stringa, specificando un nome di classe da assegnare all'elemento. Devi quindi definire uno stile CSS per la classe sulla pagina. Sono supportati i seguenti nomi di proprietà:
Esempio:
Nota: in CSS, alcuni elementi hanno la precedenza su altri. Ad esempio, se specifichi un colore di sfondo per un elemento Tipo:oggetto
Predefinito:null
|
| firstRowNumber |
Il numero di riga per la prima riga nella tabella dati. Utilizzato solo se showRowNumber è true. Tipo:numero
Predefinito:1
|
| frozenColumns |
Il numero di colonne da sinistra che verranno bloccate. Queste colonne rimangono in posizione quando si scorre le colonne rimanenti in orizzontale. Se Tipo:numero
Predefinito:null
|
| altezza |
Imposta l'altezza dell'elemento contenitore della visualizzazione. Puoi utilizzare unità HTML standard (ad es. "100px", "80em", "60"). Se non viene specificata alcuna unità, si presume che il numero sia in pixel. Se non specificato, il browser regolerà automaticamente l'altezza per adattarsi alla tabella, riducendo il più possibile l'altezza durante il processo. Se il valore è inferiore all'altezza richiesta, alla tabella verrà aggiunta una barra di scorrimento verticale (anche la riga di intestazione viene bloccata). Se impostato su "100%", la tabella si espanderà il più possibile nell'elemento contenitore. Tipo:stringa
Predefinito:automatico
|
| pagina |
Se e come abilitare il paging dei dati. Scegli uno dei seguenti valori di stringa:
Tipo:stringa
Predefinito: "disable"
|
| pageSize |
Il numero di righe in ogni pagina, quando il paging è abilitato con l'opzione della pagina. Tipo:numero
Predefinito:10
|
| pagingButtons |
Consente di impostare un'opzione specificata per i pulsanti di paging. Le opzioni sono le seguenti:
Tipo:stringa o numero.
Predefinito: "automatico"
|
| rtlTable |
Aggiunge il supporto di base per le lingue da destra a sinistra (come l'arabo o l'ebraico) invertendo l'ordine delle colonne della tabella, in modo che la colonna zero sia quella all'estrema destra e l'ultima colonna sia quella più a sinistra. Ciò non influisce sull'indice delle colonne nei dati sottostanti, ma solo sull'ordine di visualizzazione. La visualizzazione completa del linguaggio bidirezionale (BiDi) non è supportata dalla visualizzazione 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 per la tabella. Tipo: booleano
Predefinito:false
|
| scrollLeftStartPosition |
Imposta la posizione di scorrimento orizzontale, in pixel, se la tabella ha barre di scorrimento orizzontali perché hai impostato la proprietà larghezza. La tabella si aprirà con lo scorrimento di molti pixel oltre la colonna all'estrema sinistra. Tipo:numero
Predefinito:0
|
| showRowNumber |
Se impostato su true, mostra il numero di riga come prima colonna della tabella. Tipo: booleano
Predefinito:false
|
| ordinare |
Se e come ordinare le colonne quando l'utente fa clic su un'intestazione di colonna. Se l'ordinamento è abilitato, valuta la possibilità di impostare anche le proprietà sortAscending e ordinaColumn. Scegli uno dei seguenti valori di stringa:
Tipo:stringa
Predefinito: "attiva"
|
| sortAscending |
L'ordine in cui viene ordinata la colonna di ordinamento iniziale. True per l'ordine crescente, false per quello decrescente. Ignorato se Tipo: booleano
Predefinito:true
|
| sortColumn |
L'indice di una colonna nella tabella di dati, in base al quale la tabella viene inizialmente ordinata. La colonna verrà contrassegnata con una piccola freccia che indica l'ordinamento. Tipo:numero
Predefinito: -1
|
| startPage |
La prima pagina della tabella da visualizzare. Utilizzato solo se Tipo:numero
Predefinito:0
|
| larghezza |
Imposta la larghezza dell'elemento contenitore della visualizzazione. Puoi utilizzare unità HTML standard (ad es. "100px", "80em", "60"). Se non viene specificata alcuna unità, si presume che il numero sia in pixel. Se non specificato, il browser regola automaticamente la larghezza per adattarsi alla tabella, riducendo il più possibile la larghezza durante il processo. Se il valore è inferiore alla larghezza richiesta, alla tabella verrà aggiunta una barra di scorrimento orizzontale. Se impostato su "100%", la tabella si espanderà il più possibile nell'elemento contenitore. Tipo:stringa
Predefinito:automatico
|
Metodi
| Metodo | |
|---|---|
draw(data, options) |
Disegna la tabella. Tipo di reso: nessuno
|
getSelection() |
Implementazione getSelection standard. 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 di dati originale indipendentemente da qualsiasi interazione dell'utente (ordinamento, paging e così via). Tieni presente che il pulsante di attivazione/disattivazione delle selezioni: se fai clic su una cella la prima volta la selezioni; se fai di nuovo clic sulla cella la deseleziona, generando un evento di selezione, ma nessun elemento selezionato nell'oggetto di selezione recuperato. Tipo restituito: array di elementi di selezione
|
getSortInfo() |
Richiama questo metodo per recuperare le informazioni sullo stato di ordinamento attuale 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 se l'utente non ha ordinato i dati selezionando il codice, verranno restituiti i valori di ordinamento predefiniti. Tipo restituito: 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 | |
|---|---|
| select |
Evento di selezione standard, ma è possibile selezionare solo intere righe. Proprietà:nessuna
|
| pagina |
Si attiva quando gli utenti fanno clic su un pulsante di navigazione nelle pagine. Proprietà:
page: numero. L'indice della pagina da raggiungere. |
| ordinare |
Si attiva quando gli utenti fanno clic sull'intestazione di una colonna e l'opzione di ordinamento non è "disable". Proprietà: un oggetto con le seguenti proprietà:
|
| pronta |
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 di disegno e richiamare i metodi solo dopo l'attivazione dell'evento. Proprietà:nessuna
|
Formattatori
Nota : la visualizzazione tabella include un insieme di oggetti formattatore che sono stati sostituiti da formatter generici, che si comportano allo stesso modo, ma possono essere utilizzati in qualsiasi visualizzazione.
La tabella seguente mostra il formattatore di tabelle precedente e il formatore generico equivalente. Dovresti usare il formattatore generico quando scrivi nuovo codice.
| Formattatore tabella | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
Importante: i formattatori 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 a nessun server.