Début avec graphique.js: graphiques de ligne et de barres

Ce didacticiel s'appuie sur le graphique précédent. Nous explorerons les options de personnalisation pour améliorer l'apparence des graphiques et la représentation des données.

Tableaux de ligne: visualiser le changement au fil du temps

Les graphiques de ligne illustrent efficacement comment une variable change par rapport à un autre, souvent le temps. Par exemple, ils sont idéaux pour afficher la vitesse d'un véhicule au fil du temps.

Chart.js simplifie la création de graphiques de ligne. Par défaut, les graphiques sont remplis de rgba(0, 0, 0, 0.1) . Pour rendre la couleur d'arrière-plan visible, assurez-vous que la propriété backgroundColor est définie et que la propriété fill est true . La clé tension permet une interpolation cubique personnalisée, influençant la courbe de la ligne entre les points de données. Le réglage stepped au "middle" crée un effet de type étape.

Les segments individuels entre les points de données peuvent être stylisés de manière unique. Cet exemple montre la vitesse de deux voitures:

 const Checkkspeed = (CTX, Color_A, Color_B) => ctx.p0.parsed.y> ctx.p1.parsed.y? Color_a: Color_B;

Laissez dataFirst = {
  Étiquette: "Car A - Speed ​​(MPH)",
  Données: [0, 59, 75, 20, 20, 55, 40],
  BorderColor: "noir",
  BackgroundColor: "transparent",
  Borderdash: [3, 3],
  Passé: "Middle"
};

Laissez DataSecond = {
  Étiquette: "voiture b - vitesse (mph)",
  Données: [20, 15, 60, 60, 65, 30, 70],
  BorderColor: "Blue",
  BackgroundColor: "transparent",
  segment: {
        BorderColor: ctx => Checkspeed (CTX, «Oranged», «YellowGreen»),
  },
};

Soit SpeedData = {
  Libellés: ["0s", "10s", "20S", "30S", "40S", "50S", "60S"],
  Ensembles de données: [DataFirst, DataSecond]
};

Soit LineChart = nouveau graphique (SpeedCanvas, {
  Type: "Ligne",
  Données: SpeedData
});

Ce code compare les points de données consécutifs. Si la vitesse diminue, orangered est utilisé; Sinon, yellowgreen .

Graphiques à barres: plusieurs axes Y pour plus de clarté

Pour plusieurs ensembles de données avec différentes échelles, l'utilisation de plusieurs axes Y améliore la lisibilité. Chaque ensemble de données peut être attribué à un axe Y spécifique à l'aide de la clé yAxisID .

 Soit GravityBars = '# F06292';
Soit DensityBars = '# 4DB6AC';

Laissez DensityData = {
  Étiquette: "Densité de la planète (kg / m3)",
  Données: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  BackgroundColor: Bars de Density,
  Yaxisid: "Y-Axis-Density"
};

Laissez GravityData = {
  Étiquette: "Gravity of Planet (M / S2)",
  Données: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0],
  BackgroundColor: Gravitybars,
  Yaxisid: "Y-Axis-Gravity"
};

Soit PlanetData = {
  Libellés: ["Mercure", "Vénus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  ensembles de données: [DensityData, GravityData]
};

Laissez chartOptions = {
  Barpercentage: 1,
  catégoriespercentage: 0,8,
  écailles: {
    "Y-Axis-Density": {
      grille: {
        Couleur: barres de densité,
        TickColor: Bars de Density,
        BorderColor: Bars de densité
      },
      tiques: {
        Couleur: Bars de densité
      },
      Position: "à gauche"
    },
    "Y-Axis-Gravity": {
      grille: {
        Couleur: barres de gravité,
        TickColor: BravityBars,
        BorderColor: barres de gravité
      },
      tiques: {
        Couleur: barres de gravité
      },
      Position: "Droit"
    }
  }
};

Soit Barchart = nouveau graphique (densityCanvas, {
  Type: "Bar",
  Données: PlanetData,
  Options: chartoptions
});

Cet exemple utilise des valeurs yAxisID uniques et personnalise les couleurs de grille, de coche et de bordure pour chaque axe dans chartOptions . barPercentage et categoryPercentage l'espacement des barres de contrôle du centre decentage.

Conclusion

Ce didacticiel couvre la création et la personnalisation fondamentales de la ligne et des graphiques à barres dans chart.js, vous permettant de créer des graphiques visuellement attrayants et informatifs. Le prochain tutoriel explorera les graphiques de radar et de zone polaire.

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!