Début avec Chart.js: tarte, beignet et graphiques à bulles

Ce tutoriel expliquera comment créer des graphiques à tarte, anneaux et bulles à l'aide de chart.js. Auparavant, nous avons appris quatre types de graphiques de graphique.

Créer des graphiques à tarte et à anneaux

Les graphiques à tarte et les graphiques d'anneaux sont idéaux pour montrer les proportions d'un tout divisé en différentes parties. Par exemple, un graphique à secteurs peut être utilisé pour montrer le pourcentage de lions mâles, de lions féminins et de jeunes lions dans un safari, ou le pourcentage de votes que différents candidats reçoivent lors des élections.

Les graphiques à tarte ne conviennent que pour comparer des paramètres ou des ensembles de données uniques. Il convient de noter que le graphique à tarte ne peut pas dessiner des entités avec une valeur nulle car l'angle du ventilateur dans le graphique à tarte dépend de la taille numérique du point de données. Cela signifie que toute entité avec une proportion de zéro ne sera pas affichée sur le graphique. De même, les valeurs négatives ne peuvent pas être dessinées sur les graphiques circulaires.

Dans chart.js, vous pouvez créer un graphique à tarte en définissant type à pie et un graphique en anneau en définissant type à doughnut . Voici un exemple de création des deux graphiques:

 var pichart = nouveau graphique (votescanvas, {{
    Type: 'Pie',
    Données: votesdata,
    Options: chartoptions
});

var Doughnutchart = nouveau graphique (votescanvas, {
    Type: «Donut»,
    Données: votesdata,
    Options: chartoptions
});

Créons un graphique à tarte montrant les données d'exportation de pétrole (unité: milliards de dollars américains) pour les cinq meilleurs exportateurs de pétrole en 2015.

 var data = {
    Étiquettes: [
        "Arabie Saoudite",
        "Russie",
        "Irak",
        "ÉMIRATS ARABES UNIS",
        "Canada"
    ],
    ensembles de données: [
        {
            Données: [133.3, 86.2, 52.2, 51.2, 50.2],
            BackgroundColor: [
                "# Ff6384",
                "# 63ff84",
                "# 84ff63",
                "# 8463ff",
                "# 6384ff"
            ]]
        }]
}; 

Vous pouvez utiliser différentes clés pour contrôler l'affichage du graphique ci-dessus, tel que cutout , qui peut être un nombre ou une chaîne. S'il est spécifié en nombre, la valeur est considérée comme une valeur de pixel; si elle est spécifiée en tant que chaîne se terminant en % , la valeur est considérée comme un pourcentage du rayon total. Vous pouvez utiliser rotation pour spécifier l'angle de départ du graphique. De même, vous pouvez également utiliser circumference pour spécifier l'angle auquel le graphique scanne lors du traçage des données. Les deux angles sont exprimés en degrés plutôt qu'en radians.

Deux animations différentes peuvent être activées lors du dessin d'un graphique. Vous pouvez utiliser la touche animateRotate pour spécifier si le graphique doit avoir une animation de rotation. De même, vous pouvez également utiliser la touche animateScale pour spécifier si le graphique de la bague doit être mis à l'échelle du centre. La valeur de animateRotate est true par défaut, et la valeur d' animateScale est false par défaut.

Comme d'habitude, vous pouvez utiliser backgroundColor , borderColor et borderWidth pour contrôler la couleur de l'arrière-plan, la couleur de la bordure et la largeur de la bordure de tous les points de données, respectivement. De même, les valeurs de survol de toutes ces propriétés peuvent être contrôlées à l'aide hoverBackgroundColor , hoverBorderColor et hoverBorderWidth .

Ce qui suit est le code pour créer un graphique en anneau pour les données ci-dessus. Définissez la valeur de rotation sur -90 Réglez le point de départ pour faire tourner 90 degrés dans le sens antihoraire.

 var oildata = {
  Libellés: ["Arabie saoudite", "Russie", "Irak", "EAU", "Canada"],
  ensembles de données: [
    {
      Données: [133.3, 86.2, 52.2, 51.2, 50.2],
      BackgroundColor: ["# ff6384", "# 63ff84", "# 84ff63", "# 8463ff", "# 6384ff"],
      BorderColor: "noir",
      Borderwidth: 2
    }
  ]]
};

var chartOptions = {
  Rotation: -90,
  Découpe: "45%",
  Plugins: {
    titre: {
      Affichage: vrai,
      Position: "en bas",
      Texte: "Major Exportateurs de pétrole en 2015",
      FONT: {
        Taille: 32
      }
    },
    légende: {
      Position: "à gauche",
      Aligner: "Démarrer"
    }
  },
  Animation: {
    Animaterotate: faux,
    animatscale: vrai
  }
};

var donutchart = nouveau graphique (OilCanvas, {{
  Type: "Donut",
  Données: Oildata,
  Options: chartoptions
}); 

Créer un graphique à bulles

Des graphiques à bulles sont utilisés pour dessiner ou afficher trois dimensions de données sur un graphique ( P1 , P2 , P3 ). La position et la taille de la bulle déterminent les valeurs de ces trois points de données. L'axe horizontal représente le premier point de données (P1), l'axe vertical représente le deuxième point de données ( P2 ), et la zone de la bulle est utilisée pour représenter la valeur du troisième point de données ( P3 ).

Il convient de noter que la taille du troisième point de données n'est pas représentée par le rayon des bulles, mais par leur zone. La zone du cercle est proportionnelle au carré du rayon. Cela signifie que vous devez vous assurer que le rayon de bulle que vous dessinez est proportionnel à la racine carrée de la taille du troisième point de données.

Dans chart.js, vous pouvez créer un graphique à bulles en définissant la valeur de type à bubble . Voici un exemple de la façon de créer un graphique à bulles:

 var bubblechart = nouveau graphique (popcanvas, {
    Type: «bulle»,
    Données: popdata,
    Options: chartoptions
});

Utilisons des graphiques à bulles pour dessiner le poids de différents articles dans la pièce. Les données du graphique doivent être transmises au format objet. L'objet de données doit avoir l'interface suivante pour dessiner correctement.

 {
    x:<number> ,
    Y:<number> ,
    R:<number>
}</number></number></number>

Une différence importante entre un graphique à bulles et tous les autres graphiques est que le rayon de bulle ne fait pas évoluer avec le graphique.

Par exemple, la largeur d'une barre dans un graphique à barres augmente ou diminue en fonction de la taille du graphique. Cela ne se produira pas avec le graphique à bulles. Le rayon de la bulle est toujours égal au nombre exact de pixels que vous spécifiez. Cela a du sens car dans ce type de graphique, le rayon est réellement utilisé pour représenter les données réelles.

Créons un graphique à bulles pour tracer le nombre de troupeaux de cerfs à différents endroits de la forêt.

 var popdata = {
  ensembles de données: [
    {
      Étiquette: ["Herd de cerf"],
      données: [
        {x: 100, y: 0, r: 10},
        {x: 60, y: 30, r: 20},
        {x: 40, y: 60, r: 25},
        {x: 80, y: 80, r: 30},
        {x: 20, y: 30, r: 25},
        {x: 0, y: 100, r: 5}
      ],
      BackgroundColor: "# ff9966"
    }
  ]]
};

Étant donné que le rayon ici est proportionnel à la racine carrée du nombre réel, le nombre de cerfs à (80, 80) est 36 fois le nombre de cerfs à (0, 100).

Comme tous les autres types de graphiques, vous pouvez utiliser backgroundColor , borderColor et borderWidth pour contrôler la couleur d'arrière-plan, la couleur de la bordure et la largeur des bordures des points dessinés. De même, vous pouvez également utiliser hoverBackgroundColor , hoverBorderColor et hoverBorderWidth pour spécifier la couleur d'arrière-plan de survol, la couleur de bordure de volant et la largeur de bordure de volant.

Vous pouvez également utiliser hoverRadius pour spécifier le rayon supplémentaire pour ajouter à différentes bulles lors du volant. N'oubliez pas que ce rayon sera ajouté à la valeur d'origine pour dessiner la bulle en volante. Si le rayon de la bulle d'origine est 10 et que hoverRadius est réglé sur 5, le rayon de la bulle sur volant sera égal à 15.

 var popdata = {
  ensembles de données: [
    {
      Étiquette: ["Herd de cerf"],
      données: [
        {x: 100, y: 0, r: 10},
        {x: 60, y: 30, r: 20},
        {x: 40, y: 60, r: 25}
      ],
      BackgroundColor: "# 9966FF",
      hoverbackgroundcolor: "#fffff",
      hoverbordercolor: "# 9966ff",
      hoverborderwidth: 5,
      Hoverradius: 5
    },
    {
      Étiquette: ["Numéro de girafe"],
      données: [
        {x: 80, y: 80, r: 30},
        {x: 20, y: 30, r: 25},
        {x: 0, y: 100, r: 5}
      ],
      BackgroundColor: "# ff6600",
      hoverbackgroundcolor: "#fffff",
      hoverbordercolor: "# ff6600",
      hoverborderwidth: 5,
      Hoverradius: 5
    }
  ]]
};

var chartOptions = {
  Plugins: {
    titre: {
      Affichage: vrai,
      Position: "en bas",
      Texte: "Nombre d'animaux dans différents points chauds",
      FONT: {
        Taille: 20
      }
    },
    légende: {
      Position: "en bas",
      Aligner: "Centre"
    }
  },
  mise en page: {
    rembourrage: 20
  }
};

Les paramètres ci-dessus créeront le graphique à bulles suivant.

Résumer

Dans ce tutoriel, vous avez appris trois autres types de graphiques disponibles dans chart.js. Vous devriez maintenant être en mesure de sélectionner le type de graphique approprié pour tracer les données et définir des valeurs spécifiques pour différentes clés pour contrôler son apparence. Dans le prochain tutoriel, vous apprendrez à manipuler des échelles pour différents types de graphiques.

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!