Combiner les statistiques des caractères et ImageFontWidth () pour dessiner des graphiques à barres de texte

Dans le développement Web, les graphiques de dessin sont une exigence commune, en particulier lors de la présentation des statistiques. Bien qu'il existe de nombreuses bibliothèques de graphiques professionnels, nous n'avons parfois qu'à utiliser des fonctions intégrées de texte et de PHP pour implémenter rapidement un graphique à barres intuitif. Cet article présentera comment combiner les statistiques des caractères et la fonction ImageFontWidth () de PHP pour dessiner un tableau de barre de texte simple à l'aide de la bibliothèque GD.

1. Idée de base

L'axe horizontal du graphique à barres utilise du texte pour représenter la catégorie, et l'axe vertical utilise des caractères de texte pour représenter la taille de la valeur. Nous calculons la largeur de chaque colonne en comptant le nombre de caractères dans la chaîne et en combinant la fonction ImageFontWidth () , dessinant ainsi dynamiquement la largeur de chaque colonne.

2. Préparation

Assurez-vous que votre environnement PHP prend en charge les bibliothèques GD, activez généralement simplement l'extension PHP_GD2 .

3. Introduction aux fonctions clés

• ImageFontWidth (int $ font): int
  Renvoie la largeur du caractère de la police intégrée. La bibliothèque GD a plusieurs polices (1 à 5) intégrées, avec des tailles et des largeurs variables.

• ImageString (Ressource $ image, int $ font, int $ x, int $ y, string $ string, int $ couleur): bool
  Dessinez une chaîne dans l'image.

4. Exemple de code

Voici un exemple simple pour illustrer comment dessiner un graphique à barres de texte:

 <?php
// Échantillon de données，catégorie => Valeur(Exprimé par la longueur du caractère)
$data = [
    'pomme' => 5,
    'banane' => 8,
    'Tangerine' => 3,
    'Raisin' => 6,
    'poire' => 4,
];

// Taille de toile
$width = 400;
$height = 300;

// Créer de vraies images couleur
$image = imagecreatetruecolor($width, $height);

// Définition des couleurs
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);
$blue = imagecolorallocate($image, 0, 0, 255);

// Remplissez la couleur d&#39;arrière-plan
imagefill($image, 0, 0, $white);

// Sélectionnez une taille de police（1 arriver 5）
$font = 5;
$fontWidth = imagefontwidth($font);
$fontHeight = imagefontheight($font);

// Calculez l&#39;espacement de la colonne
$barSpacing = 10;

// Définir les coordonnées de dessin de départ
$xStart = 50;
$yStart = 50;

// Longueur de colonne maximale（Le nombre de personnages mappés sur les pixels）
$maxLength = max($data);
$maxBarWidth = 200;

// Dessiner des histogrammes à travers les données
foreach ($data as $label => $value) {
    // Calculez la largeur de la colonne，基于最大Valeur缩放
    $barWidth = intval($value / $maxLength * $maxBarWidth);

    // Colonnes de dessin（Utilisez des rectangles bleus）
    imagefilledrectangle($image, $xStart, $yStart, $xStart + $barWidth, $yStart + $fontHeight, $blue);

    // 绘制catégorie文字（Sur le côté gauche du poteau）
    imagestring($image, $font, $xStart - strlen($label) * $fontWidth - 10, $yStart, $label, $black);

    // 绘制Valeur文字（Sur le côté droit du poteau）
    imagestring($image, $font, $xStart + $barWidth + 5, $yStart, str_repeat('|', $value), $black);

    // La coordonnée verticale de la colonne suivante est déplacée vers le bas
    $yStart += $fontHeight + $barSpacing;
}

// En-tête d&#39;image de sortie
header('Content-Type: image/png');
imagepng($image);

// Mémoire libre
imagedestroy($image);
?>

5. Description du code

• Le tableau de données $ définit chaque catégorie et ses valeurs numériques correspondantes. Plus la valeur est grande, plus la colonne est longue.

• Utilisez ImageFontWidth () pour obtenir la largeur du caractère pour assurer un calcul précis des longueurs de texte et de colonne.

• Dessinez un rectangle en colonnes avec ImageFildRectangle () .

• Utilisez ImageString () pour dessiner un graphique à barres numérique représenté par | personnages.

• Calculez dynamiquement la largeur de la colonne et la longueur de la colonne est proportionnelle à la valeur maximale.

6. Affichage d'effet

Après avoir exécuté le script PHP ci-dessus, une image PNG sera générée, montrant un graphique à barres de texte simple. Les colonnes bleues disposées horizontalement représentent la taille de la valeur, le nom de catégorie à gauche et les barres numériques représentées par des caractères verticaux à droite.

Cette méthode convient aux scénarios où les graphiques ne sont pas élevés, ou qu'il est nécessaire de générer rapidement des graphiques statistiques simples. En combinant plus de fonctions GD, des graphiques et des graphiques plus complexes peuvent également être dessinés.

Si vous souhaitez optimiser davantage, comme l'ajout de haches, de titres et de polices dynamiques, vous pouvez vous développer sur cette base.