Passer au contenu

Graphique Divi

Module natif Divi 5

Beaux graphiques
pourDivi 5

Ajoutez de superbes visualisations de données interactives à n’importe quelle page Divi – aucun codage requis. Propulsé par Chart.js, entièrement réactif et profondément intégré au Divi 5 Visual Builder.

8Types de graphiques
3Ensembles de données par graphique
8Sélecteurs de couleurs de tranches
100%Aperçu du générateur visuel

Tous les graphiques dont vous aurez besoin

Des graphiques à barres classiques aux diagrammes radar,Graphique Divivous propose huit types de visualisation distincts prêts à l'emploi.

📊

Barre (colonne)

Barres verticales classiques, idéales pour comparer les catégories côte à côte.

📉

Barre (horizontale)

Barres inversées pour les longues étiquettes ou les classements – lisibles sans effort.

📈

Doubler

Suivez les tendances au fil du temps grâce à des graphiques linéaires fluides multi-ensembles de données.

🌊

Zone

Graphiques en courbes remplies qui mettent l'accent sur le volume et les valeurs cumulées.

🥧

Tarte

Affichez les proportions en un coup d'œil avec des couleurs de tranches entièrement personnalisables.

🍩

Donut

Une version moderne du gâteau : idéale pour les tableaux de bord et les affichages KPI.

🕸️

Radar

Comparez plusieurs attributs sur plusieurs ensembles de données sur une seule toile d'araignée.

🎯

Zone polaire

Segments radiaux dimensionnés par valeur : frappants, riches en données et uniques.

Tout ce dont vous avez besoin, rien de superflu

🎨

Aperçu du générateur visuel en direct

Chaque modification que vous apportez dans le panneau Divi 5 se reflète instantanément dans le canevas – pas d’actualisation de page, pas de conjectures.

🖌️

8 sélecteurs de couleurs de tranches individuelles

Les graphiques à secteurs, en beignets et à zones polaires vous permettent de définir une couleur distincte pour chaque tranche via les sélecteurs de couleurs natifs de Divi – cohérents entre l'éditeur et l'interface.

📐

Jusqu'à 3 ensembles de données

Superposez plusieurs séries de données sur des graphiques à barres, linéaires, surfaciques et radar pour des visualisations riches et comparatives.

📱

Entièrement réactif

Les graphiques se redimensionnent de manière fluide sur n'importe quelle taille d'écran. Définissez votre hauteur préférée en pixels et Chart.js s'occupe du reste.

⚡

Animations fluides

La durée d'animation configurable (0 à 3 000 ms) crée un effet de révélation soigné à chaque fois que le graphique entre dans la fenêtre d'affichage.

🏷️

Légende interactive

Cliquez sur n’importe quel élément de légende pour afficher ou masquer cet ensemble de données. Le retour du curseur du pointeur rend la découverte évidente pour les utilisateurs finaux.

🔡

Étiquettes d'axe

Ajoutez des étiquettes descriptives des axes X et Y directement depuis le panneau Conception pour donner à vos données le contexte qu'elles méritent.

🛡️

Normes 100 % WordPress

Code PHPCS propre suivant la norme de codage WordPress, le chargement automatique PSR-4 et l'API du module Divi zéro héritage – conçu pour le long terme.

Personnalisation approfondie, zéro complexité

Tous les paramètres se trouvent dans le panneau Divi familier, organisés en groupes clairs afin que vous sachiez toujours où chercher.

Paramètres du graphique

  • Type de graphique (8 options)
  • Titre du graphique
  • Étiquettes de catégorie (séparées par des virgules)

Couleurs des tranches

  • 8 sélecteurs de couleurs individuels
  • Appliqué à la tarte, au beignet
  • VB cohérent ↔ rendu frontend

Ensemble de données 1

  • Libellé, valeurs (séparées par des virgules)
  • Sélecteur de couleurs
  • Opacité de remplissage (Ligne

Ensembles de données 2

  • Activer/désactiver indépendamment
  • Étiquette, valeurs, sélecteur de couleurs
  • Piles sur barre, ligne, zone, radar

Style de graphique

  • Hauteur (150 – 900 px)
  • Couleur de fond
  • Afficher/masquer la position de la légende
  • Afficher/masquer les lignes de la grille
  • Durée de l'animation (ms)
  • Largeur de bordure/ligne (px)
  • Rayon du point (Ligne

Étiquettes d'axe

  • Texte de l'étiquette de l'axe X
  • Texte de l'étiquette de l'axe Y

Fonctionne dès la sortie de la boîte

Installez, activez et faites glisser leGraphiquemodule dans n’importe quelle page Divi 5. Aucune bibliothèque supplémentaire à installer — Chart.js est chargé automatiquement depuis le CDN.

✅ Divi 5 (Divi Builder 5.x)
✅WordPress 6.0
✅PHP7.4
✅ Chart.js 4.4 (chargé via CDN)
❌ Pas de support Divi 4 / Legacy Builder
Français