Créez des histogrammes, des graphiques linéaires ou des diagrammes circulaires pour présenter les données à vos visiteurs dans un format attractif.

Utilisez les blocs Graphique pour créer des graphiques de données sur votre site. Les diagrammes permettent de visualiser la relation qui existe entre plusieurs séries de données. Vous pouvez créer et personnaliser des histogrammes, des graphiques linéaires et des diagrammes circulaires.

Les blocs Graphique constituent une bonne alternative à l’intégration d’images statiques de diagrammes créés dans des programmes en dehors de Squarespace. Les diagrammes se redimensionnent de manière réactive pour assurer une apparence agréable sr plusieurs tailles d’écran, et vous pouvez mettre à jour les données à tout moment.

Conseil : Ce guide explique comment ajouter des graphiques à votre site. Pour ajouter un tableau avec des colonnes et des lignes, vous pouvez ajouter du code personnalisé. Pour en savoir plus, consultez cet article sur le forum Squarespace.

Notez bien que les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes donc pas en mesure de vous aider ni pour la configuration de solutions basées sur du code, ni pour leur dépannage.

Avant de commencer

Nous vous recommandons de préparer les données dans un fichier .csv dans un tableur tel qu’Excel ou Google Sheets. Assurez-vous que les colonnes et les lignes comportent des en-têtes afin qu’ils soient traduits en en-têtes dans le bloc.

Ajouter un bloc Graphique

Pour ajouter un bloc Graphique :

1. Modifiez une page ou une publication, cliquez sur Ajouter un bloc ou sur un point d’insertion, puis sur Graphique. Pour obtenir de l’aide, consultez l’article Ajouter du contenu avec les blocs.
2. Ouvrez l’éditeur de bloc en cliquant sur l’icône en forme de crayon sur le bloc.
3. Cliquez sur Histogramme, Graphique linéaire ou Diagramme circulaire. L’éditeur de diagramme s’affiche et un aperçu du diagramme apparaît en fonction du contenu renseigné dans les espaces réservés.

4. Utilisez l'onglet Données ou Importer/Exporter pour ajouter des données.
5. Utilisez l’onglet Design pour concevoir le graphique. Si votre site utilise la version 7.0, cliquez sur Appliquer pour publier vos modifications.

Pour obtenir des instructions plus détaillées, consultez les sections ci-dessous.

Dispositions des blocs Graphique

Voici des exemples pour chaque disposition du bloc Diagramme. Vous pouvez modifier la disposition dans l’onglet Données du bloc Diagramme. Lorsque vous choisissez une disposition, un aperçu du résultat s’affiche sur la page. Vous devrez peut-être modifier le format de vos données en fonction de la nouvelle disposition.

Ajouter des données

Après avoir choisi le type de diagramme, vous pouvez utiliser l’onglet Importer/Exporter pour importer les données d’un fichier .csv. Vous pouvez aussi utiliser l’onglet Données pour ajouter manuellement des données.

Remarque : Vous pouvez ajouter jusqu'à 25 lignes et 25 colonnes. Saisissez uniquement des nombres. L'éditeur convertit tous les signes dollar ($) en 0.

Option 1 - Copy data from a .csv

Si vos données se trouvent sur une feuille de calcul au format .csv, vous pouvez les copier-coller. Nous vous conseillons de suivre cette méthode, particulièrement si les données sont volumineuses et si vous savez créer des feuilles de calcul dans Excel ou dans Google Sheets.

Tip: In your spreadsheet program, use column and row headers to create labels for the chart. You’ll then open the .csv in a plain text editor since the block can’t import cells from a spreadsheet.

1. Ne fermez pas l’éditeur du bloc Graphique.
2. In your spreadsheet program, save your data as a .csv file.
3. Open the file in a plain text editor like Notepad or TextEdit.
4. Sélectionnez tout et copiez le texte.
5. Dans l’éditeur de bloc, cliquez sur Importer/Exporter.
6. Dans le champ Données de graphique, supprimez les données de l’espace réservé.
7. Paste the text you copied from the .csv.
8. Cliquez sur Mettre à jour, puis sur Confirmer dans le message qui s’affiche.
9. The chart preview will refresh with new data.

Dans l’onglet Importer/Exporter, les données doivent ressembler à ceci :

Option 2 - Enter or edit data manually

Vous pouvez créer le diagramme de A à Z en créant les lignes une par une et en insérant les données dans l’éditeur de bloc. Choisissez cette option si vous n’avez pas de données ou si vous souhaitez créer un diagramme simple. Vous pouvez également suivre ces étapes pour modifier les données après les avoir importées.

1. Dans l’onglet Données de l’éditeur de bloc, supprimez les lignes d’espaces réservés en les faisant glisser et en les déposant dans la corbeille qui apparaît.
2. Cliquez sur l’icône + en haut à droite pour ajouter des colonnes et des en-têtes de colonne. Les blocs Diagramme circulaire ne peuvent comporter que deux colonnes.
3. Cliquez sur l’icône + en bas à gauche pour ajouter des lignes et des en-têtes de ligne.
4. Cliquez dans une cellule pour saisir de nouvelles données ou pour remplacer les données existantes de l’espace réservé. Remplissez toutes les cellules. Au fur et à mesure que vous saisissez des données, l’aperçu du diagramme se met à jour.

Tip: Navigate between cells and rows with the Tab key, just like in any spreadsheet program.

5. Cochez l’option Inverser les axes X et Y si vous souhaitez changer le tracé du diagramme. Nous vous déconseillons de choisir cette option pour les blocs Diagramme circulaire.

Conseils de mise en forme

La façon dont vous mettez en forme vos données dépend du type de bloc Graphique que vous utilisez. Pour en savoir plus sur la mise en forme de chaque diagramme, suivez ces conseils.

Personnaliser le design du diagramme

Dans l'onglet Création, vous pouvez ajouter du texte personnalisé, afficher une légende et choisir une palette de couleurs. Pour en savoir plus sur ces options de conception, consultez le tableau suivant :

Personnaliser le texte

Utilisez les Styles de site pour modifier la police et la couleur du texte du bloc. La façon dont vous définissez le style de texte dépend de la version de Squarespace sur laquelle se trouve votre site.

Exporter les données d’un diagramme

Pour sauvegarder vos données dans un fichier .csv en dehors de Squarespace :

1. Ouvrez le panneau Pages.
2. Cliquez sur Modifier sur la page ou sur la publication où apparaît le bloc Graphique.
3. Double-cliquez sur le bloc Graphique.
4. Cliquez sur Importer/Exporter.
5. Copiez les données dans le champ Chart Data (Données du diagramme).
6. Paste the data into a plain text editor.
7. Save the file as a .csv. This converts the file into a spreadsheet.