Début avec Chart.js: Introduction

Les données brutes, qu'elles soient présentées comme du texte ou des tables, peuvent être difficiles à digérer. Chart.js offre une solution convaincante en visualisant les données, ce qui facilite la compréhension des informations complexes.

Considérez ce tableau montrant les dix pays les plus peuplés du monde: (Exemple de tableau omis pour la concision, car elle n'est pas directement pertinente pour la fonctionnalité du graphique.js expliqué).

Pour utiliser chart.js, commencez par l'installer:

 NPM Install Chart.js - Save

Alors que Chart.js a précédemment regroupé Moment.js, ce n'est plus le cas. Pour les graphiques à échelle temporelle, vous aurez besoin d'un adaptateur de date (comme Date-FNS) et de la bibliothèque correspondante. Date-FNS est une option légère pour les applications plus simples. Cet exemple utilise des FN de date et personnalise la police de la légende.

 var barchart = nouveau graphique (popcanvas, {{
    Type: «bar»,
    Données: données,
    Options: {
        Plugins: {
          légende: {
            Affichage: vrai,
            Position: "en bas",
            Étiquettes: {
              BoxWidth: 50,
              couleur: "noir",
              FONT: {
                Taille: 24,
                Poids: "Audacieux"
              }
            }
          }
        }
    }
}); 

Chart.js permet un contrôle granulaire sur les infractions. Chart.defaults.plugins.tooltip définit les styles d'info-bulle mondiaux, tandis que les options de graphique individuelles offrent une personnalisation supplémentaire. Cet exemple démontre la police, le rembourrage, la taille des flèches et l'arrière-plan.

 Options: {
    Plugins: {
      légende: {
        Affichage: vrai,
        Position: "en bas",
        Étiquettes: {
          BoxWidth: 50,
          couleur: "noir",
          FONT: {
            Taille: 24,
            Poids: "Audacieux"
          }
        }
      },
      info-bulle: {
        Cornerradius: 0,
        CareTize: 0,
        rembourrage: 10,
        BackgroundColor: 'Black',
        BorderColor: "Gray",
        Borderwidth: 5,
        Titlemarginbottom: 4,
        TitleFont: {
          "poids": "Bold",
          "Taille": 22
        }
      }
    }
}

Réglage caretSize sur 0 masque la flèche d'info-bulle. La démonstration suivante présente ces info-bulles personnalisées:

Conclusion:

Cette introduction à Chart.js a démontré la création et la personnalisation des graphiques à barres. Les options de configuration affichées sont applicables à divers types de graphiques. Les futurs tutoriels approfondiront les graphiques en ligne et les barres. Chart.js est un outil puissant pour la visualisation des données dans le développement Web JavaScript. (Remarque: source de données de population citée).

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!