Kombinieren Sie Charakterstatistiken und ImageFontwidth () zum Zeichnen von Textstäbe -Diagrammen

In der Webentwicklung ist das Zeichnen von Diagrammen eine häufige Anforderung, insbesondere bei der Präsentation von Statistiken. Obwohl es viele professionelle Diagrammbibliotheken gibt, müssen wir manchmal nur einfache Text- und PHP-integrierte Funktionen verwenden, um schnell ein intuitives Balkendiagramm zu implementieren. In diesem Artikel wird vorgestellt, wie die Zeichenstatistik und die Funktion von PHP -Funktion mit der GD -Bibliothek ein einfaches Textstangediagramm kombiniert werden.

1. Kernidee

Die horizontale Achse des Balkendiagramms verwendet Text, um die Kategorie zu repräsentieren, und die vertikale Achse verwendet Textzeichen, um die Größe des Wertes darzustellen. Wir berechnen die Breite jeder Spalte, indem wir die Anzahl der Zeichen in der Zeichenfolge zählen und die Funktion von ImageFontwidth () kombinieren, wodurch die Breite jeder Spalte dynamisch zeichnet.

2. Vorbereitung

Stellen Sie sicher, dass Ihre PHP -Umgebung GD -Bibliotheken unterstützt. Normalerweise aktivieren Sie nur die Erweiterung von PHP_GD2 .

3. Einführung in die wichtigsten Funktionen

• ImageFontwidth (int $ font): int
  Gibt die Charakterbreite der eingebauten Schrift zurück. Die GD -Bibliothek verfügt über mehrere Schriftarten (1 bis 5) mit unterschiedlichen Größen und Breiten.

• Imagestring (Ressource $ image, int $ font, int $ x, int $ y, String $ String, int $ color): bool
  Zeichnen Sie eine Zeichenfolge im Bild.

4. Beispielcode

Hier ist ein einfaches Beispiel, um zu veranschaulichen, wie man ein Text -Balkendiagramm zeichnet:

 <?php
// Datenprobe，Kategorie => Wert(Ausgedrückt durch Charakterlänge)
$data = [
    'Apfel' => 5,
    'Banane' => 8,
    'Mandarine' => 3,
    'Traube' => 6,
    'Birne' => 4,
];

// Leinwandgröße
$width = 400;
$height = 300;

// Erstellen Sie echte Farbbilder
$image = imagecreatetruecolor($width, $height);

// Farbdefinition
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);
$blue = imagecolorallocate($image, 0, 0, 255);

// Hintergrundfarbe füllen
imagefill($image, 0, 0, $white);

// Wählen Sie eine Schriftgröße aus（1 ankommen 5）
$font = 5;
$fontWidth = imagefontwidth($font);
$fontHeight = imagefontheight($font);

// Berechnen Sie den Spaltenabstand
$barSpacing = 10;

// Definieren Sie die Startzeichnungskoordinaten
$xStart = 50;
$yStart = 50;

// Maximale Säulenlänge（Charakterzahl auf Pixel zugeordnet）
$maxLength = max($data);
$maxBarWidth = 200;

// Histogramme durch Daten zeichnen
foreach ($data as $label => $value) {
    // Berechnen Sie die Spaltenbreite，基于最大Wert缩放
    $barWidth = intval($value / $maxLength * $maxBarWidth);

    // Zeichnungsspalten（Verwenden Sie blaue Rechtecke）
    imagefilledrectangle($image, $xStart, $yStart, $xStart + $barWidth, $yStart + $fontHeight, $blue);

    // 绘制Kategorie文字（Auf der linken Seite des Pfostens）
    imagestring($image, $font, $xStart - strlen($label) * $fontWidth - 10, $yStart, $label, $black);

    // 绘制Wert文字（Auf der rechten Seite des Pfostens）
    imagestring($image, $font, $xStart + $barWidth + 5, $yStart, str_repeat('|', $value), $black);

    // Die vertikale Koordinate der nächsten Spalte wird nach unten bewegt
    $yStart += $fontHeight + $barSpacing;
}

// Ausgabe Bildhader
header('Content-Type: image/png');
imagepng($image);

// Freier Speicher
imagedestroy($image);
?>

5. Code Beschreibung

• Das $ Data -Array definiert jede Kategorie und ihre entsprechenden numerischen Werte. Je größer der Wert, desto länger die Spalte.

• Verwenden Sie ImageFontwidth (), um die Zeichenbreite zu erhalten, um eine genaue Berechnung der Text- und Spaltenlängen sicherzustellen.

• Zeichnen Sie ein säulenförmiges Rechteck mit imageFilledRectangle () .

• Verwenden Sie Imagestring (), um ein numerisches Balkendiagramm zu zeichnen, das von | dargestellt wird Charaktere.

• Berechnen Sie die Säulenbreite dynamisch und die Säulenlänge ist proportional zum Maximalwert.

6. Effektanzeige

Nach dem Ausführen des oben genannten PHP -Skripts wird ein PNG -Bild erstellt, das ein einfaches Text -Balkendiagramm zeigt. Die horizontal angeordneten blauen Spalten repräsentieren die Größe des Werts, den Kategoriennamen links und die numerischen Balken, die durch vertikale Zeichen rechts dargestellt werden.

Diese Methode eignet sich für Szenarien, in denen Grafiken nicht hoch sind oder dass es erforderlich ist, schnell einfache statistische Grafiken zu erzeugen. Die Kombination mehr GD -Funktionen, komplexere Grafiken und Diagramme können ebenfalls gezogen werden.

Wenn Sie weiter optimieren möchten, z. B. das Hinzufügen von Achsen, Titeln und dynamischen Schriftarten, können Sie diese Grundlage erweitern.