Début avec graphique.js: graphiques radar et polaires

Ce didacticiel s'étend sur la leçon précédente Chart.js, qui couvert la ligne et les graphiques à barres. Ici, nous explorerons les graphiques de radar et de zones polaires, offrant un aperçu concis suivi d'une explication détaillée.

Comprendre les graphiques radar

Les graphiques de lignes et de barres excellent pour comparer un ou deux attributs sur de nombreux points de données (par exemple, la population dans les pays asiatiques). Cependant, lorsque vous comparez de nombreux attributs de quelques points de données seulement (par exemple, les propriétés de trois liquides), un graphique radar est beaucoup plus efficace. Également connu sous le nom d'un graphique d'araignée, il visualise et compare efficacement plusieurs variables.

Tel que défini par Wikipedia, un graphique radar représente graphiquement des données multivariées utilisant des axes provenant d'un point central. Les angles et les positions relatives des axes ne sont généralement pas significatifs.

Construisons notre premier graphique radar. Nous y parvenons en définissant «R» comme notre clé d'échelle dans la touche «x» ou «angle» de «false». De même, la désactivation de l'animation de rotation se fait en définissant «Animaterotate» à «False» dans l'objet «Animation».

Le code suivant améliore l'attrait visuel du graphique:

 var chartOptions = {
  Plugins: {
    titre: {
      Affichage: vrai,
      Position: "en bas",
      Texte: "Les oiseaux migrateurs à différentes saisons"
    },
    légende: {
      Aligner: "Centre",
      Position: "à gauche",
      Étiquettes: {
        FONT: {
          Taille: 16
        }
      }
    }
  },
  Animation: {
    animaterotate: faux
  },
  écailles: {
    r: {
      tiques: {
        FONT: {
          Taille: 16
        },
        Couleur: "blanc",
        Backdropcolor: "noir"
      }
    }
  },
  Éléments: {
    arc: {
      Angle: 180,
      BorderColor: "noir"
    }
  }
};

Au-delà de la contrôle de l'animation, nous avons repositionné la légende vers la gauche, améliorant la lisibilité du graphique.

Conclusion

Ce didacticiel a démontré les applications pratiques des graphiques de la zone radar et polaire et comment les créer et les personnaliser à l'aide des options de configuration de chart.js. Les futurs tutoriels couvriront les graphiques de tarte, de beignets et de bulles. Pour plus de ressources et de cadres JavaScript, explorez le marché Envato.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!