Graphique Divi
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.
Types de graphiques
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.
Pourquoi le choisir
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.
Paramètres des modules
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)
- Color picker
- Fill opacity (Line & Area)
Datasets 2 & 3 (Optional)
- Toggle on/off independently
- Label, values, color picker
- Stacks on Bar, Line, Area, Radar
Chart Style
- Height (150 – 900 px)
- Background color
- Show / hide legend + position
- Show / hide grid lines
- Animation duration (ms)
- Border / line width (px)
- Point radius (Line & Area)
Étiquettes d'axe
- X-axis label text
- Y-axis label text
Requirements
Works right out of the box
Install, activate, and drag the Graph & Chart module into any Divi 5 page. No extra libraries to install — Chart.js is loaded automatically from CDN.
