Web開発では、特に統計を提示する場合、チャートの描画は一般的な要件です。多くのプロフェッショナルなチャートライブラリがありますが、直感的なバーチャートをすばやく実装するために、単純なテキストとPHPビルトイン関数を使用するだけでいい場合があります。この記事では、文字統計とPHPのImageFontWidth()関数を組み合わせて、GDライブラリを使用して単純なテキストバーチャートを描画する方法を紹介します。
バーチャートの水平軸はテキストを使用してカテゴリを表し、垂直軸はテキスト文字を使用して値のサイズを表します。文字列内の文字の数をカウントし、 ImageFontWidth()関数を組み合わせて、各列の幅を計算し、それにより各列の幅を動的に描画します。
PHP環境がGDライブラリをサポートしていることを確認してください。通常、 PHP_GD2拡張機能を有効にしてください。
ImageFontWidth(int $ font):int
内蔵フォントの文字幅を返します。 GDライブラリには、サイズと幅が異なるいくつかのフォント(1〜5)が組み込まれています。
Imagestring(Resource $ Image、int $ font、int $ x、int $ y、string $ string、int $ color):bool
画像に文字列を描画します。
テキストバーチャートを描く方法を説明する簡単な例を以下に示します。
<?php
// データサンプル,カテゴリ => 価値(文字の長さで表現されています)
$data = [
'りんご' => 5,
'バナナ' => 8,
'タンジェリン' => 3,
'グレープ' => 6,
'梨' => 4,
];
// キャンバスサイズ
$width = 400;
$height = 300;
// 真の色の画像を作成します
$image = imagecreatetruecolor($width, $height);
// カラー定義
$white = imagecolorallocate($image, 255, 255, 255);
$black = imagecolorallocate($image, 0, 0, 0);
$blue = imagecolorallocate($image, 0, 0, 255);
// 背景の色を埋めます
imagefill($image, 0, 0, $white);
// フォントサイズを選択します(1 到着 5)
$font = 5;
$fontWidth = imagefontwidth($font);
$fontHeight = imagefontheight($font);
// 列間隔を計算します
$barSpacing = 10;
// 開始図座標を定義します
$xStart = 50;
$yStart = 50;
// 列の最大長(ピクセルにマッピングされた文字カウント)
$maxLength = max($data);
$maxBarWidth = 200;
// データを介してヒストグラムを描きます
foreach ($data as $label => $value) {
// 列幅を計算します,基于最大価値缩放
$barWidth = intval($value / $maxLength * $maxBarWidth);
// 描画列(青い長方形を使用します)
imagefilledrectangle($image, $xStart, $yStart, $xStart + $barWidth, $yStart + $fontHeight, $blue);
// 绘制カテゴリ文字(投稿の左側)
imagestring($image, $font, $xStart - strlen($label) * $fontWidth - 10, $yStart, $label, $black);
// 绘制価値文字(投稿の右側)
imagestring($image, $font, $xStart + $barWidth + 5, $yStart, str_repeat('|', $value), $black);
// 次の列の垂直座標が下に移動します
$yStart += $fontHeight + $barSpacing;
}
// 出力画像ヘッダー
header('Content-Type: image/png');
imagepng($image);
// 無料のメモリ
imagedestroy($image);
?>
$データアレイは、各カテゴリとそれに対応する数値値を定義します。値が大きいほど、列が長くなります。
ImageFontWidth()を使用して文字幅を取得して、テキストと列の長さの正確な計算を確保します。
ImageFilledRectangle()を使用して柱状長方形を描画します。
Imagestring()を使用して、 |文字。
列の幅を動的に計算すると、列の長さは最大値に比例します。
上記のPHPスクリプトを実行した後、PNG画像が生成され、単純なテキストバーチャートが表示されます。水平に配置された青い列は、値のサイズ、左側のカテゴリ名、および右側の垂直文字で表される数値バーを表します。
この方法は、グラフィックが高くないシナリオや、単純な統計グラフをすばやく生成する必要があるシナリオに適しています。より多くのGD関数を組み合わせることで、より複雑なグラフィックとチャートを描画することもできます。
軸、タイトル、動的フォントの追加など、さらに最適化したい場合は、この基準で拡張できます。