單純閱讀數字仍然需要花時間比較各類問題的差異。因此，今天的目標是新增資料品質問題長條圖，將統計結果轉換成視覺化圖表，讓使用者更容易了解哪些類型的問題比較多。
一、資料品質統計

$issueStats = [ '缺失值' => $missingCount, '格式錯誤' => $formatCount, '數值異常' => $rangeCount, '重複資料' => $duplicateCount, '一致性問題' => $consistencyCount ];

這樣可以將原本分散在不同變數中的統計結果集中管理，方便後續使用迴圈產生圖表。
接著，找出問題數量最多的類別，作為長條圖的比較基準。

$maxIssueCount = max($issueStats);
if ($maxIssueCount === 0) {
    $maxIssueCount = 1;
}

當所有類別的問題數量都是零時，將比較基準設為1，避免後續計算時發生除以零的問題。
二、計算長條圖的寬度
為了讓長條能夠反映各類問題的相對數量，使用以下公式計算寬度：
長條寬度 = 該類問題數量 ÷ 最大問題數量 × 100%
對應的 PHP 程式碼如下：

foreach ($issueStats as $label => $count) {
    $barWidth = ($count / $maxIssueCount) * 100;
    echo '<div class="issue-chart-row">';
    echo '<div class="issue-chart-label">'
        . htmlspecialchars($label, ENT_QUOTES, 'UTF-8')
        . '</div>';
    echo '<div class="issue-chart-track">';
    echo '<div class="issue-chart-bar" style="width: '
        . $barWidth . '%;"></div>';
    echo '</div>';
    echo '<div class="issue-chart-count">'
        . $count . '</div>';
    echo '</div>';
}

例如，當最多的問題類別有 5 筆時，數量為 2 的類別就會顯示為最大長度的 40%。
三、使用CSS設計圖表

.issue-chart-track {
    height: 18px;
    background: #edf3f1;
    border-radius: 5px;
    overflow: hidden;
}
.issue-chart-bar {
    height: 100%;
    background: #4c8b80;
    border-radius: 5px;
    min-width: 0;
}
.issue-chart-count {
    text-align: right;
    font-weight: bold;
    color: #245c53;
}

其中，.issue-chart-track是長條的背景軌道，.issue-chart-bar則呈現實際的問題數量。透過調整長條的寬度，就能以視覺方式比較不同類型的問題。