Diagramme circulaire

• Documentation
• Questions ou commentaires?

Les "options" font référence à la classe CSS utilisé à l'élément table. Chaques graphique inclus les options du graphique qui le précede.

Cette example pratique est àpropos:

• Comment un diagramme circulaire peut être transformé en diagramme en beigne, et
• Comment vous pouvez simplifier l'utilisation répétive de plusieurs option de graphique en utilisant une seule instruction, comme:
  • Utiliser ceci: <table class="wet-boew-charts wb-charts-donnut">
  • À la place de ceci: <table class="wet-boew-charts wb-charts-pie wb-charts-height-250 wb-charts-percentlegend-true wb-charts-pieinnerradius-45 wb-charts-pietilt-50 wb-charts-piehoverable-true wb-charts-decimal-1 wb-charts-piethreshold-8 wb-charts-legendinline-true wb-charts-piestartangle-100"> et
  • Comment creer votre propre configuration personalisé

Défauts

Options ajouté

• wet-boew-charts: Active le composant des graphiques
• wb-charts-pie: Crée un graphique circulaire
• wb-charts-height-250: Indique que le graphique va avoir une hauteur de 250 pixels.

Étiquette des secteurs

Options ajouté

• wb-charts-percentlegend-true: Affiche une étiquette avec le pourcentage sur les secteurs.
• wb-chart-nolegend-true: Cache la légende. Le texte de la légende sera combiné avec le pourcentage du secteur respectif.

Trou de beigne

Options ajouté

• wb-charts-pieinnerradius-45: Poucentage de la grosseur du trou de beigne.

Graphique incliné

Options ajouté

• wb-charts-pietilt-50: Pourcentage de l'inclinaison.

Graphique rectangulaire

Options ajouté

• wb-charts-pieradius-500000: Longeur du secteur en pixels. Pour obtenir la valeur réel en pixel il faut divisé ce nombre par 100.

Effet de survol

Options ajouté

• wb-charts-piehoverable-true: Ajoute un effet visuel au secteur lorsqu'il est survolé par la souris.

Options retiré

• wb-charts-pieradius-500000

Precision décimal

Options ajouté

• wb-charts-decimal-1: Indique le nombre de décimal à affiché pour l'étiquette du pourcentage.

Seuil d'étiquettage

Options ajouté

• wb-charts-piethreshold-8: Cache les étiquettes dont leur secteur est inférieur au pourcentage spécifié.
• wb-charts-legendinline-true: Indique que les étiquettes sera affiché à l'intérieur du graphique.

Options retiré

• wb-chart-nolegend-true

Angle de démarrage

Options ajouté

• wb-charts-piestartangle-100: Facteur de PI, multiplié par 100, qui indique l'angle de démarrage (en radian). Comme valeur de référence, 150 est la valeur par défaut.

Configuration de beigne wb-charts-donnut

Nouveau à partir de la BOEW 3.1.2. Pour les version antérieur de la BOEW 3.1.x il peut être reproduit avec l'utilisation d'options combiné.

// PVI - La configuration en beigne est déjà définie par défauts, ceci est seulement pour illustrer un example de comment un autre ensemble de configuration peut être créer.

// Dans les configuration générale setting.js
var wet_boew_charts = {
  preset: {
    donnut: {
      // Donnut setting
      type: 'pie',
      height: 250,
      percentlegend: true,
      pieinnerradius: 45,
      pietilt: 50,
      piehoverable: true,
      decimal: 1,
      piethreshold: 8,
      legendinline: true,
      piestartangle: 100
    }
  }
}