Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Blocs Diagrame

Utilisez les blocs Diagramme 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 Diagramme 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

We recommend preparing data in a .csv in a spreadsheet program like Excel or Google Sheets. Ensure that columns and rows have headers so they translate easily into headers in the block.

Ajouter un bloc Diagramme

Pour ajouter un bloc Diagramme :

  1. Cliquez sur Modifier sur une page ou un billet de blog.
  2. Cliquez sur un point d’insertion ou sur l’icône +. Pour obtenir des instructions plus détaillées, consultez l’article Ajouter des contenus à l’aide de blocs.
  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 Diagramme dans le menu des blocs.

  1. Utilisez l'onglet Données ou Importer/Exporter pour ajouter des données.
  2. Utilisez l'onglet Conception pour concevoir le graphique.
  3. Cliquez sur Appliquer pour enregistrer vos modifications. 

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

Dispositions des blocs Diagramme

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 diagrammes à barres 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.

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 Diagramme.
  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.
Tip: 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 Diagramme 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 et 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 graphique suit les réglages Titre et Text. Les options exactes varient selon le modèle. Pour en savoir plus, consultez le guide des réglages de style de votre modèle.

Exporter les données d’un diagramme

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

  1. Dans le Menu principal, cliquez sur Pages.
  2. Cliquez sur Modifier sur la page ou sur la publication où apparaît le bloc Diagramme.
  3. Double-cliquez sur le bloc Diagrame.
  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.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 15 sur 54