Présentation
Un tableau qui peut être trié et paginé. Vous pouvez mettre en forme les cellules d'un tableau à l'aide de chaînes de mise en forme ou en insérant directement du code HTML en tant que valeurs de cellule. Les valeurs numériques sont alignées à droite ; les valeurs booléennes sont affichées sous forme de coches. Les utilisateurs peuvent sélectionner des lignes individuelles à l'aide du clavier ou de la souris. Les utilisateurs peuvent trier les lignes en cliquant sur les en-têtes de colonne. La ligne d'en-tête reste fixe lorsque l'utilisateur fait défiler la page. Le tableau déclenche un certain nombre d'événements correspondant à une interaction de l'utilisateur.
Exemple
<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>
Chargement...
Le nom du package google.charts.load est "table".
google.charts.load('current', {packages: ['table']});
Le nom de classe de la visualisation est google.visualization.Table.
var visualization = new google.visualization.Table(container);
Format des données
Le tableau de données est converti en un tableau HTML correspondant, chaque ligne/colonne de ce tableau étant convertie en ligne/colonne dans le tableau HTML. Chaque colonne doit avoir le même type de données, et tous les types de données de visualisation standards sont acceptés (chaîne, booléen, nombre, etc.).
Propriétés personnalisées
Vous pouvez attribuer les propriétés personnalisées suivantes aux éléments du tableau de données à l'aide de la méthode setProperty() de DataTable.
| Nom de la propriété | Applicable à | Description |
|---|---|---|
| className | Cell | Nom de classe de chaîne à attribuer à une cellule individuelle. Permet d'appliquer un style CSS à des cellules individuelles. |
| style | Cell | Chaîne de style à attribuer de manière intégrée à la cellule. Les styles de classe CSS appliqués à cette cellule seront ignorés. Pour que cela fonctionne, vous devez définir la propriété allowHTML=true. Exemple : 'border: 1px solid green;' |
Exemple
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
Options de configuration
| Nom | |
|---|---|
| allowHtml |
Si cette règle est définie sur "true", les valeurs mises en forme des cellules qui incluent des balises HTML sont affichées au format HTML. Si cette règle est définie sur "false", la plupart des outils de mise en forme personnalisés ne fonctionneront pas correctement. Type:booléen
Par défaut : "false"
|
| alternatingRowStyle |
Détermine si un style de couleur en alternance sera attribué aux lignes impaires et paires. Type:booléen
Valeur par défaut : "true"
|
| cssClassNames |
Objet dans lequel chaque nom de propriété décrit un élément de table, et la valeur de la propriété est une chaîne définissant une classe à attribuer à cet élément de table. Utilisez cette propriété pour attribuer du code CSS personnalisé à des éléments spécifiques de votre tableau. Pour utiliser cette propriété, attribuez un objet, où le nom de la propriété spécifie l'élément de table et la valeur de la propriété est une chaîne, en spécifiant un nom de classe à attribuer à cet élément. Vous devez ensuite définir un style CSS pour cette classe sur votre page. Les noms de propriétés suivants sont acceptés:
Exemple:
Remarque:En CSS, certains éléments en remplacent d'autres. Par exemple, si vous spécifiez une couleur d'arrière-plan pour un élément Type:objet
Par défaut:null
|
| firstRowNumber |
Numéro de la première ligne du tableau de données. Utilisé uniquement si showRowNumber est défini sur "true". Type:nombre
Par défaut : 1
|
| frozenColumns |
Nombre de colonnes à partir de la gauche qui seront figées. Ces colonnes restent en place lorsque vous faites défiler les colonnes restantes horizontalement. Si Type:nombre
Par défaut:null
|
| taille |
Définit la hauteur de l'élément conteneur de la visualisation. Vous pouvez utiliser des blocs d'annonces HTML standards (par exemple, "100px", "80em", "60"). Si aucune unité n'est spécifiée, le nombre est considéré comme étant des pixels. Si cette valeur n'est pas spécifiée, le navigateur ajuste automatiquement la hauteur pour s'adapter au tableau, en la réduisant le plus possible au cours du processus. Si la valeur est inférieure à la hauteur requise, le tableau ajoute une barre de défilement verticale (la ligne d'en-tête est également figée). Si la valeur est définie sur "100%", le tableau se développera autant que possible dans l'élément conteneur. Type:chaîne
Par défaut:automatique
|
| page |
Indique si et comment activer la pagination des données. Choisissez l'une des valeurs de chaîne suivantes:
Type:chaîne
Par défaut : "disable"
|
| pageSize |
Nombre de lignes dans chaque page, lorsque la pagination est activée avec l'option "Page". Type:nombre
Valeur par défaut:10
|
| pagingButtons |
Définit une option spécifiée pour les boutons de pagination. Vous disposez des options suivantes :
Type:chaîne ou nombre
Par défaut : "auto"
|
| rtlTable |
Ajout de la prise en charge de base des langues qui s'écrivent de droite à gauche (telles que l'arabe ou l'hébreu) en inversant l'ordre des colonnes de la table, de sorte que la colonne zéro soit la plus à droite et la dernière la colonne la plus à gauche. Cela n'affecte pas l'index de colonne dans les données sous-jacentes, mais uniquement l'ordre d'affichage. L'affichage bidirectionnel complet (BiDi) en langage n'est pas compatible avec la visualisation des tables, même avec cette option. Cette option sera ignorée si vous activez la pagination (à l'aide de l'option "Page") ou si le tableau comporte des barres de défilement, car vous avez spécifié des options de hauteur et de largeur inférieures à la taille de tableau requise. Type:booléen
Par défaut : "false"
|
| scrollLeftStartPosition |
Définit la position de défilement horizontal, en pixels, si le tableau comporte des barres de défilement horizontales, car vous avez défini la propriété de largeur. Le tableau s'ouvre lorsque l'utilisateur fait défiler la page jusqu'à dépasser la colonne la plus à gauche. Type:nombre
Par défaut:0
|
| showRowNumber |
Si la valeur est "true", affiche le numéro de ligne dans la première colonne du tableau. Type:booléen
Par défaut : "false"
|
| trier |
Indique si et comment trier les colonnes lorsque l'utilisateur clique sur un en-tête de colonne. Si le tri est activé, envisagez également de définir les propriétés sortAscending et sortColumn. Choisissez l'une des valeurs de chaîne suivantes:
Type:chaîne
Par défaut : "enable"
|
| sortAscending |
Ordre de tri de la colonne de tri initiale. "True" pour un ordre croissant, "false" pour un ordre décroissant. Ignoré si Type:booléen
Valeur par défaut : "true"
|
| sortColumn |
Index d'une colonne de la table de données, en fonction duquel le tableau est initialement trié. La colonne est marquée d'une petite flèche indiquant l'ordre de tri. Type:nombre
Valeur par défaut : -1
|
| startPage |
Première page du tableau à afficher. Utilisé uniquement si Type:nombre
Par défaut:0
|
| largeur |
Définit la largeur de l'élément conteneur de la visualisation. Vous pouvez utiliser des blocs d'annonces HTML standards (par exemple, "100px", "80em", "60"). Si aucune unité n'est spécifiée, le nombre est considéré comme étant des pixels. Si cette valeur n'est pas spécifiée, le navigateur ajuste automatiquement la largeur pour s'adapter à la table, en la réduisant le plus possible au cours du processus. Si la valeur est inférieure à la largeur requise, une barre de défilement horizontale est ajoutée au tableau. Si la valeur est définie sur "100%", le tableau se développe autant que possible dans l'élément conteneur. Type:chaîne
Par défaut:automatique
|
Méthodes
| Méthode | |
|---|---|
draw(data, options) |
Dessine le tableau. Return Type (Type renvoyé) : aucun
|
getSelection() |
Implémentation standard de getSelection Les éléments de sélection sont tous des éléments de ligne. Peut renvoyer plusieurs lignes sélectionnées. Les index de ligne de l'objet de sélection font référence à la table de données d'origine, quelle que soit l'interaction de l'utilisateur (trier, pagination, etc.). Notez que le bouton d'activation/de désactivation de la ou des sélections: cliquer sur une cellule la première fois pour la sélectionner. Lorsque vous cliquez à nouveau sur la cellule, celle-ci est désélectionnée. Un événement de sélection est alors généré, mais aucun élément sélectionné n'est sélectionné dans l'objet de sélection récupéré. Type renvoyé:tableau d'éléments de sélection
|
getSortInfo() |
Appelez cette méthode pour récupérer des informations sur l'état de tri actuel d'une table qui a été triée (généralement par l'utilisateur, qui a cliqué sur un en-tête de colonne pour trier les lignes selon une colonne spécifique). Si vous avez désactivé le tri, cette méthode ne fonctionnera pas. Si vous n'avez pas trié de données dans le code ou si l'utilisateur ne les a pas triées en sélectionnant du code, les valeurs de tri par défaut sont renvoyées. Type renvoyé:objet avec les propriétés suivantes:
|
setSelection(selection) |
Implémentation standard de Return Type (Type renvoyé) : aucun
|
clearChart() |
Efface le graphique et libère toutes les ressources allouées. Return Type (Type renvoyé) : aucun
|
Événements
| Nom | |
|---|---|
| select |
Événement de sélection standard, mais seules des lignes entières peuvent être sélectionnées. Propriétés:aucune
|
| page |
Déclenchement lorsque les utilisateurs cliquent sur un bouton de navigation sur les pages. Propriétés:
page: nombre. Index de la page à laquelle accéder. |
| trier |
Déclenché lorsque les utilisateurs cliquent sur un en-tête de colonne et que l'option de tri n'est pas "Désactiver". Properties (Propriétés) : objet avec les propriétés ci-dessous.
|
| prêt |
Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode de dessin, puis ne les appeler qu'après le déclenchement de l'événement. Propriétés:aucune
|
Outils de mise en forme
Remarque : La visualisation de table contient un ensemble d'objets de mise en forme qui ont été remplacés par des outils de mise en forme génériques, qui se comportent de la même manière, mais peuvent être utilisés dans n'importe quelle visualisation.
Le tableau suivant présente l'ancien outil de mise en forme des tables et son outil de mise en forme générique équivalent. Vous devez utiliser l'outil de mise en forme générique lorsque vous écrivez du nouveau code.
| Outil de mise en forme de table | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
Important:Les outils de mise en forme utilisent souvent le langage HTML pour mettre en forme leur texte. Vous devez donc définir l'option allowHtml sur true.
Règles concernant les données
L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.