Présentation
Table pouvant être triée et paginée. Vous pouvez mettre en forme des cellules de table à l'aide de chaînes de format 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 à l'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 une table HTML correspondante, chaque ligne/colonne de la table de données étant convertie en ligne/colonne dans la table HTML. Chaque colonne doit posséder 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 propriété | Applicable à | Description |
---|---|---|
className | Cell | Nom de classe de chaîne à attribuer à une cellule individuelle. Utilisez cette option pour attribuer un style CSS à des cellules individuelles. |
style | Cell | Chaîne de style à attribuer intégrée à la cellule. Cela remplacera les styles de classe CSS appliqués à cette cellule. Vous devez définir la propriété allowHtml=true pour que cela fonctionne. 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 de cellules contenant des balises HTML s'afficheront au format HTML. Si la valeur est "false", la plupart des formateurs personnalisés ne fonctionneront pas correctement. Type : booléen
Par défaut:false
|
AlternanceRowStyle |
Détermine si le style de couleur alternatif doit être attribué aux lignes paires et paires. Type:booléen
Par défaut : true
|
cssClassNames |
Objet dans lequel chaque nom de propriété décrit un élément de la table et la valeur de la propriété est une chaîne définissant une classe à attribuer à cet élément de la table. Cette propriété vous permet d'attribuer du code CSS personnalisé à des éléments spécifiques de votre table. 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 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é suivants sont acceptés:
Exemple:
Remarque : Dans le code CSS, certains éléments 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
|
Numéro de première ligne |
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
|
Colonnes figées |
Nombre de colonnes à gauche qui seront figées. Ces colonnes resteront en place si vous faites défiler les colonnes restantes horizontalement. Si Type:nombre
Par défaut : null
|
hauteur |
Définit la hauteur de l'élément conteneur de la visualisation. Vous pouvez utiliser des unités HTML standards (par exemple, "100 px", "80em" ou "60"). Si aucune unité n'est spécifiée, le nombre est supposé être des pixels. Si cette option n'est pas spécifiée, le navigateur ajuste automatiquement la hauteur afin de s'adapter à la table, en réduisant le plus possible au cours du processus. Si elle est inférieure à la hauteur requise, une barre de défilement verticale est ajoutée (la ligne d'en-tête est également figée). Si la valeur est définie sur "100 %", la table se développe autant que possible dans l'élément conteneur. Type : chaîne
Par défaut:automatique
|
page |
Si et comment activer la pagination via les données. Choisissez l'une des valeurs de chaîne suivantes:
Type : chaîne
Default: "désactiver"
|
Taille de la page |
Nombre de lignes sur chaque page, lorsque la pagination est activée avec l'option de page. Type : nombre
Par défaut:10
|
Boutons de pagination |
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"
|
table rtl |
Ajout de la compatibilité avec les langues s'écrivant de droite à gauche (comme l'arabe et l'hébreu) en inversant l'ordre des colonnes dans le tableau. La colonne "zéro" correspond à la colonne la plus à droite, et la dernière à 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 en langage bidirectionnel (BiDi) n'est pas disponible dans la visualisation de la table, même avec cette option. Cette option sera ignorée si vous activez la pagination (à l'aide de l'option de page) ou si la barre contient 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
|
faire défilerStartStartPosition |
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é "width". Le tableau s'ouvre et fait défiler autant de pixels que possible après la colonne la plus à gauche. Type:nombre
Par défaut:0
|
numéro de série |
S'il est défini sur "true", le numéro de ligne est affiché dans la première colonne du tableau. Type:booléen
Par défaut:false
|
sort |
Indique si et comment trier les colonnes lorsque l'utilisateur clique sur un en-tête de colonne. Si le tri est activé, vous pouvez également 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"
|
ordre croissant |
Ordre de tri de la colonne de tri initiale. Vrai pour l'ordre croissant, faux pour l'ordre décroissant. Ignoré si Type : booléen
Par défaut : true
|
Colonne de tri |
Index d'une colonne du tableau de données, en fonction duquel le tableau est initialement trié. Une petite flèche indique l'ordre de tri dans la colonne. Type : nombre
Par défaut : -1
|
pagedaccueil |
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 unités HTML standards (par exemple, "100 px", "80em" ou "60"). Si aucune unité n'est spécifiée, le nombre est supposé être des pixels. Si cette option n'est pas spécifiée, le navigateur ajuste automatiquement la largeur en fonction du tableau, en réduisant le plus possible le cas échéant. Si la largeur 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 %", la table 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 la table. Return Type (Type de retour) : 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 dans l'objet de sélection font référence au tableau de données d'origine indépendamment de toute interaction de l'utilisateur (tri, pagination, etc.). Notez que la sélection s'effectue lorsque vous cliquez sur une cellule pour la sélectionner. La sélection d'une cellule la désélectionne, ce qui entraîne un événement de sélection, mais aucun élément sélectionné dans l'objet de sélection récupéré. Type de renvoi : tableau des é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 triée (généralement par l'utilisateur, qui a cliqué sur un en-tête de colonne pour trier les lignes en fonction d'une colonne spécifique). Si vous avez désactivé le tri, cette méthode ne fonctionnera pas. Si vous n'avez pas trié les données de code, ou si l'utilisateur n'a pas trié les données en sélectionnant le code, les valeurs de tri par défaut sont renvoyées. Return Type:objet possédant les propriétés suivantes:
|
setSelection(selection) |
Implémentation standard de Return Type (Type de retour) : aucun
|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
Événements
Nom | |
---|---|
select |
Événement de sélection standard, mais seules des lignes entières peuvent être sélectionnées. Properties (Propriétés) : aucune
|
page |
Déclenchement lorsqu'un utilisateur clique sur un bouton de navigation sur une page. Propriétés :
page : nombre. Index de la page à laquelle vous souhaitez accéder. |
sort |
Déclenchement lorsqu'un utilisateur clique sur un en-tête de colonne et que l'option de tri n'est pas "disable". Propriétés : objet possédant les propriétés suivantes:
|
prêt |
Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode de dessin et ne les appeler qu'après le déclenchement de l'événement. Properties (Propriétés) : aucune
|
Formateurs
Remarque: La visualisation de la table contient un ensemble d'objets de formatage qui ont été remplacés par des formateurs 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 formateur de table 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 tables | |
---|---|
Format de la flèche de la table | google.visualization.ArrowFormat |
TableBarFormat | google.visualization.BarFormat. |
Format de couleur de table | google.visualization.ColorFormat |
Format de la date de la table | google.visualization.DateFormat. |
TableNumberFormat (Format de table) | google.visualization.NumberFormat |
Format de table | google.visualization.PatternFormat |
Important : Les mise en forme utilisent souvent du code HTML pour formater leur texte. Vous devez donc définir l'option allowHtml
sur true
.
Règles relatives aux données
L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.