Blocs Graphique

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

Dernière mise à jour le 10 juillet 2023

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.

Astuce

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.
Options des blocs Graphique dans le menu des blocs.
  1. Utilisez l'onglet Données ou Importer/Exporter pour ajouter des données.
  2. 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.

Les histogrammes sont généralement utilisés pour comparer des valeurs ou pour suivre des changements dans le temps. Le bloc Histogramme suivant montre les ventes de billets par emplacement géographique sur une période de trois mois. Chaque couleur de barre représente une année.Exemple de bloc Histogramme.

Les graphiques linéaires sont généralement utilisés pour montrer des changements dans le temps. En utilisant plusieurs lignes, vous pouvez comparer les changements de plusieurs sujets. Le bloc Graphique linéaire suivant montre le nombre d’inscriptions sur une période de six mois. Chaque ligne représente une année.

Exemple de bloc Graphique linéaire.

Les diagrammes circulaires sont généralement utilisés pour comparer des préférences, des pourcentages ou encore des chiffres provenant d’un sondage. Les données sont représentées sous forme de parts ou « secteurs ». Le bloc Diagramme circulaire suivant montre, d’après les résultats d’un sondage, les tartes préférées des personnes interrogées.

Exemple de bloc Diagramme circulaire.

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.

Astuce

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 :

Exemple de format des données importées dans l’éditeur de bloc.

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.

Astuce

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

  1. 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.

Dans les blocs Histogramme, chaque ligne représente une barre ou un sujet sur l’axe des abscisses (ou axe des X) du diagramme. L’axe des X est généralement réservé aux principaux sujets que vous comparez.

Dans les blocs Histogramme, chaque ligne représente un sujet sur l’axe des X.

Chaque nouvelle colonne représente la mesure que vous comparez entre les sujets. Chaque nouvelle colonne crée une nouvelle section verticale dans le diagramme.

Pour effectuer une comparaison simple entre des sujets, ajoutez une colonne afin de créer une barre pour chaque. Pour effectuer des comparaisons multiples entre des sujets, ajoutez plusieurs colonnes.

Lorsqu’il existe plusieurs colonnes, les blocs Histogramme peuvent effectuer plusieurs comparaisons entre des sujets.

Autres astuces

  • Il est actuellement impossible de créer un histogramme empilé.
  • Le titre et les légendes ne peuvent pas être déplacés autour du bloc.
  • Il est possible que les chiffres de l’axe des Y soient arrondis automatiquement. Vous ne pouvez pas modifier ce paramètre.
  • Pour redimensionner les blocs Histogramme, consultez l’article Redimensionner des blocs.
  • Sur votre site actif, des info-bulles apparaissent lorsque vous survolez un point de données pour en afficher les détails.

Dans les blocs Graphique linéaire, l’axe des X (créé par les lignes de données) est généralement réservé aux intervalles. Chaque ligne de données crée un nouvel intervalle dans le diagramme.

Les blocs Graphique linéaire utilisent l’axe des X pour les intervalles.

L’axe des Y (créé par les colonnes de données) est généralement réservé à la valeur que vous suivez dans le temps (les ventes, le chiffre d’affaires ou la population, par exemple). Chaque colonne de données crée une nouvelle ligne dans le diagramme.

Pour comparer plusieurs lignes, ajoutez plusieurs colonnes.

Lorsqu’il existe plusieurs colonnes, les blocs Graphique linéaire peuvent effectuer plusieurs comparaisons entre des sujets.

Autres astuces

  • Il est actuellement impossible d’ajouter des incertitudes ou des prévisions (lignes grises ou en pointillés qui anticipent des tendances).
  • Le titre et les légendes ne peuvent pas être déplacés autour du bloc.
  • Il est possible que les chiffres de l’axe des Y soient arrondis automatiquement. Vous ne pouvez pas modifier ce paramètre.
  • Pour redimensionner les blocs Graphique linéaire, consultez l’article Redimensionner des blocs.
  • Sur votre site actif, des info-bulles apparaissent lorsque vous survolez un point de données pour en afficher les détails.

Les blocs Diagramme circulaire permettent de comparer jusqu’à cinq éléments. Chaque palette de couleurs comprend cinq couleurs avant qu’elles ne se répètent.

Les données ne doivent compter que deux colonnes, la première contenant un libellé et la seconde une valeur numérique correspondant à ce libellé. Dans l’exemple ci-dessous, la première colonne contient la liste des tartes et la seconde le nombre de personnes qui aiment cette tarte.

L’onglet Données d’un bloc Diagramme circulaire.

Autres astuces

  • Nous vous déconseillons d’inverser les axes X et Y.
  • Le titre et les légendes ne peuvent pas être déplacés autour du bloc.
  • Le libellé de chaque élément ne peut comporter que deux ou trois mots maximum. Si vous voulez utiliser des noms plus longs ou ajouter des informations pour chaque élément, utilisez un bloc Texte sous le diagramme pour expliquer les libellés.
  • Si vous ajoutez du texte ou des caractères aux valeurs numériques de la deuxième colonne (des symboles de pourcentage, par exemple), ils n’apparaîtront pas sur votre site actif.
  • Pour redimensionner les blocs Diagramme circulaire, consultez l’article Redimensionner des blocs.
  • Sur votre site actif, les détails de chaque section du diagramme n’apparaissent qu’en cas de survol.

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 :

Option de design À utiliser pour
Titre du diagramme Donner un titre au diagramme. Nous vous conseillons de choisir un titre court, comme « Vente de billets 2019 ».

Légende

Ajouter une légende qui s’affichera sous le diagramme. Cette légende permet par exemple de citer des sources, d’indiquer des dates, d’ajouter des explications ou d’inclure une clause de non-responsabilité.
Afficher la légende Afficher les libellés des données dans une légende.

Palette de couleurs

Choisir parmi nos nombreuses options prédéfinies un jeu de couleurs qui donnera une apparence homogène à votre diagramme. Chaque option compte cinq couleurs. Il est actuellement impossible de personnaliser les couleurs pour les points de données ou les axes des diagrammes.

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.

Dans tous les graphiques :

  • Police du titre : suit Titres
  • Couleur du titre : suit celle du Titre (grand)
  • Taille du titre : suit Titre 2
  • Police de légende : suit celle des Paragraphes
  • Couleur de la légende : suit celle du Paragraphe (moyen)
  • Taille de la légende : suit celle du Paragraphe 2
  • Police de légende : suit celle des Paragraphes et est toujours en italique
  • Couleur de la légende : suit celle du Paragraphe (moyen)
  • Taille de la légende : suit celle du Paragraphe 2

Tout le texte du diagramme suit les ajustements Titre et Texte. Les options disponibles varient selon le template.

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.
Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.