Début avec graphique.js: axes et échelles

Dans les quatre premiers tutoriels, vous avez beaucoup appris sur le chart.js. Après avoir lu les quatre premiers tutoriels, vous devriez pouvoir personnaliser les info-bulleurs et les balises, changer de polices et créer différents types de graphiques. Cette série de didacticiels n'a pas encore introduit un aspect de Chart.js: axe et échelle.

L'échelle a beaucoup changé depuis la version V1.0 de la bibliothèque et est désormais plus puissante. Dans ce tutoriel, vous apprendrez à manipuler l'échelle et à utiliser les différentes options fournies par la bibliothèque pour contrôler son apparence.

Changer les lignes de grille et les étiquettes d'axe

Toutes les options de configuration pour les lignes de grille sont imbriquées dans scale pour les clés de titre et de police.

Vous trouverez ci-dessous un graphique de la même vitesse de voiture ancienne spécifiée avec un ensemble d'options de graphique différentes.

 var chartOptions = {
  Plugins: {
    légende: {
      Affichage: vrai,
      Position: «haut»,
      Étiquettes: {
        BoxWidth: 50,
        usepointStyle: true,
        PointStyle: "ligne"
      }
    }
  },
  écailles: {
    x: {
      grille: {
        Affichage: faux
      },
      titre: {
        Affichage: vrai,
        Texte: "Temps en secondes",
        Couleur: "rouge",
        FONT: {
          Taille: 24,
          Poids: "Audacieux"
        }
      }
    },
    y: {
      grille: {
        Couleur: "#ccc",
        Borderdash: [20, 4],
        BorderColor: "noir",
        TickColor: "noir"
      },
      titre: {
        Affichage: vrai,
        Texte: "Vitesse en miles par heure",
        Couleur: "vert",
        FONT: {
          Taille: 18,
          Poids: "Audacieux"
        }
      }
    }
  }
}; 

Il y a aussi une clé appelée grid . Lorsqu'il est défini sur la clé font .

Vous pouvez également définir la valeur minimale et maximale de la tick à l'aide de l'unité définie sur la valeur minimale et maximale de minute . Vous pouvez utiliser displayFormats pour spécifier le format dans lequel le temps est affiché dans l'échelle.

Vous pouvez également utiliser la touche round pour l'arrondir avant de le tracer sur le graphique. Soyez prudent lorsque vous définissez la valeur du round . Supposons que vous définissiez sa valeur à hour et que vous devez tracer deux fois sur le graphique. Si une heure est à 5h30 et que l'autre fois est à 5h50, ils seront tous dessinés sur la marque de tick à 5h00. La mise en place de sa valeur à minute les attirera respectivement sur les marqueurs 5:30 et 5:50.

Vous pouvez utiliser le code suivant pour dessiner un graphique de ligne dessiné au début du tutoriel à l'aide de l'échelle de temps.

 var chartOptions = {
  Plugins: {
    légende: {
      Position: "haut",
      Étiquettes: {
        BoxWidth: 50,
        usepointStyle: true,
        Pointstyle: "ligne",
      }
    }
  },
  écailles: {
    x: {
      Type: "Temps",
      grille: {
        TickColor: "vert",
        BorderDash: [5, 2],
        TickWidth: 2,
        couleur: "noir",
        BorderColor: "noir",
      },
      temps: {
        Unité: "Minute",
        étapes: 30,
        ToolTipFormat: "HH: mm a",
        DisplayFormats: {
          "Minute": "HH: mm A"
        }
      },
      tiques: {
        Couleur: "vert",
        FONT: {
          Poids: "Audacieux"
        }
      },
      titre: {
        Affichage: vrai,
        Texte: "temps",
        FONT: {
          Poids: "Bold",
          Taille: 22
        }
      }
    },
    y: {
      grille: {
        couleur: "noir",
        BorderDash: [5, 2,],
        BorderColor: "noir",
        TickColor: "Red",
        TickWidth: 2,
      },
      tiques: {
        Couleur: "rouge",
        FONT: {
          Poids: "Audacieux"
        }
      },
      titre: {
        Affichage: vrai,
        Texte: "Speed ​​(en mph)",
        FONT: {
          Poids: "Bold",
          Taille: 22
        }
      }
    }
  }
}; 

Résumer

Ce tutoriel vous aide à comprendre les différents types de tiques dans chart.js. Vous pouvez désormais facilement personnaliser les échelles de votre graphique en contrôlant la couleur, les valeurs minimales et maximales des échelles, le nombre d'échelles et d'autres facteurs de ce type.

Après avoir lu les cinq tutoriels de cette série, vous devriez être en mesure de créer tous les types de graphiques disponibles dans chart.js. J'espère que vous avez apprécié ce tutoriel et cette série.

Si vous recherchez d'autres ressources d'apprentissage ou des ressources à utiliser au travail, consultez les ressources que nous proposons sur 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!