長條圖製作工具範例實際呈現的內容
長條圖製作工具範例展示了從一組小型的 label,value 列，到可下載的 SVG 圖表，完整的歷程，讓讀者能確認實際的輸入語法、預覽中顯示的圖表，以及所收到的檔案。長條圖製作工具採用 CSV-lite 規則，每個非空白列必須恰好包含一個逗號，逗號前為標籤，逗號後為非負有限數值，且整批資料必須包含 2 到 30 個非空白列。一個實際操作範例通常會貼上 4 到 8 列類別資料，例如季度銷售或問卷計數，可選擇性地加上標題，然後按下 generate。預覽接著會顯示一個垂直長條圖，基準線在零的位置、上方邊界採用圓整值並均勻分布五個參考刻度、每個被接受的列對應一根長條，以及每根長條上的提示框。下載按鈕會產生一個獨立的 SVG 檔案，內容與預覽所用的字串相同，因此匯出的圖表與螢幕上檢視的內容一致。
本逐步說明使用一組具體的資料集，讓輸入、圖表與匯出檔案可以逐行比對。範例追蹤四個季度的單位銷售:
| 列 | 輸入 | 意義 |
|---|---|---|
| 1 | Q1,42 | 第一季，42 個單位 |
| 2 | Q2,58 | 第二季，58 個單位 |
| 3 | Q3,71 | 第三季，71 個單位 |
| 4 | Q4,89 | 第四季，89 個單位 |
四列資料穩穩落在 2 到 30 的上限範圍內，且每列都遵循嚴格的單一逗號規則，因此解析器能一次通過整批資料。
範例中使用的 CSV-Lite 輸入
CSV-lite 是此範例所依賴的簡化方言，以下規則決定了貼上並產生結果的執行成敗。每個非空白列必須恰好包含一個逗號。逗號前的文字在去除前後空白後會被視為標籤，逗號後的文字在同樣去除空白後會被視為數值標記。空白列或僅含空白的行會被忽略，因此使用者可以為了可讀性而加上間距。引號欄位、標籤內的引號逗號、額外欄位、像 "kg" 或 "$" 這類帶單位的內容、運算式、十六進位、Infinity 與 NaN 均不支援，任何一項出現都會拒絕整個請求，而不是產生半完成的圖表。一個標籤最多可包含 24 個 UTF-16 程式碼單位，一個數值標記最多 40 個;剛好達到上限會被接受，超過一個程式碼單位則會失敗。
下表比較範例可能收到的常見輸入形式，以及解析器對各形式的處理方式。
| 範例輸入列 | 狀態 | 原因 |
|---|---|---|
| Q1,42 | 接受 | 一個逗號，逗號前為標籤，逗號後為純小數。 |
| North-America,1.5e3 | 接受 | 科學記號是有效的非負有限數值。 |
| "Q1",42 | 拒絕 | CSV-lite 不支援引號欄位。 |
| Q1,42,extra | 拒絕 | 兩個逗號代表超過一個欄位。 |
| Q1,42kg | 拒絕 | 單位與其他標記不屬於數值標記的一部分。 |
| Q1,0x2A | 拒絕 | 十六進位不是支援的數值格式。 |
| Q1,NaN | 拒絕 | NaN 不是有限的十進位數值。 |
此範例也說明了編輯行為。編輯標題或資料會立即清除先前的預覽、狀態與下載，因此新的執行不會繼承先前貼上的過時狀態。非空白列的數量會在去除空白列後進行檢查，這代表工具絕不會默默地保留前 30 列、略過錯誤的列、替換為零，或是顯示半完成的圖表。
如需更完整的支援與拒絕語法規則列表，長條圖製作工具的語法、限制與輸出速查表將所有邊界條件集中於一處。
從貼上到下載執行範例的步驟
- 在標題欄位中輸入可選的標題，例如 "Quarterly Units Sold"。
- 貼上四列嚴格的標籤，數值列(Q1,42 / Q2,58 / Q3,71 / Q4,89)，每行一列，每個非空白列中恰好一個逗號。
- 按下 generate，觀察預覽如何繪製零點的基準線、0 到 100 範圍內的五個刻度，以及每個被接受列對應的一根長條。
- 確認顯示的刻度值、旋轉的類別標籤，以及每根長條上的提示框皆與輸入相符。
- 下載獨立的 SVG，並確認檔案與預覽一致，因為單一產生的 SVG 字串同時驅動兩者。
產生的圖表所顯示的內容
一旦標題與四列資料就位，按下 generate 會執行解析器、計算非負線性刻度、挑選乾淨的上限值，並繪製預覽。基準線位於零，讓每根長條都從同一個底層開始。顯示的座標軸最大值對應到圖表頂端，因此最高的長條會到達圖表頂部，較短的長條則按比例在其下方停止。以四列範例而言，最大的值為 89，而上限值會向上進位為 1、2、5 或 10 乘以十的冪次之一，在 89 的情況下是 100(1 × 10²)。五個均勻分布的刻度將 0 到 100 的範圍等分，在 0、25、50、75 與 100 處標示參考線。相鄰刻度之間的間距等於上限值除以四。
圖表為每個被接受的列各包含一根長條，順序依照輸入，水平軸上使用旋轉的類別標籤，以避免較長名稱互相重疊。每根長條都帶有提示框，顯示其數值，並提供一個無障礙描述，為輔助技術總結圖表內容。即使是可見標題為空白，仍會獲得無障礙標籤 "Bar chart"，因此即使使用者略過標題欄位，螢幕閱讀器仍會收到一致的識別資訊。
在下載前，有兩個邊界情況值得在預覽中注意。全為零的資料會使用明確的零到一參考範圍，讓每根長條維持零高度，並顯示全零註記，藉此避免除以零，同時不更動所提供的數值。極端的數值範圍可能產生在 SVG 座標精度下視覺上與零無法區分的正數長條;提示框仍會回報數值，因此應檢查範例中是否有緊鄰極大值的細小長條。工具不會虛構最小高度的長條，因為這樣會破壞所述的線性刻度，因此當極小的類別必須在數量級遠大於它的值旁仍保持可見時，對數刻度或分組圖表才是正確的解答。
將範例匯出為獨立的 SVG
下載按鈕會寫入與驅動預覽相同的 SVG 字串，因此您收到的檔案與您所檢視的標記完全一致。成功產生會從該字串建立一個 Blob URL，該 URL 在一般的錨點下載期間保持有效。當標題或資料變更、結果被取代、產生失敗，或元件卸載時，該 URL 將會被撤銷，藉此避免立即撤銷導致的下載競爭，以及 ObjectURL 累積洩漏。Blob 建立或 URL 建立失敗會產生錯誤且不會留下過時的下載，因此範例絕不會從半完成的執行產生損壞的檔案。
SVG 本身高度為 520 像素，寬度會隨著新增列數而水平擴展。類別欄位會保持分隔，在寬圖表中預覽可捲動，而不是將 30 個標籤擠進行動裝置的寬度。座標為有限值，經過邊界驗證，標記中四捨五入到小數三位，座標軸標籤在小刻度時最多使用六個實際有效數字或科學記號。使用者輸入的字串在進入任何文字、提示框、標題或無障礙屬性之前皆經過 XML 跳脫，使得 &、角括號、引號與撇號成為實體，而 XML 不允許的控制字元與未配對的代理項則會成為 U+FFFD。數值座標僅來自驗證過的有限值，這代表看起來像 HTML 或 JavaScript 的標籤仍會以可見文字呈現，而不會作為 SVG 的一部分執行。檔案使用 W3C 命名空間與標準的 rect、line、text、g 與 title 元素，符合 W3C SVG 2 規範。
使用相同工具可執行的變化
相同的 CSV-lite 規則支援一系列小型實作範例，長條圖製作工具會為每個範例產生全新的 SVG。貼上兩列即可滿足最小值，因此一對一比較是最簡單的情況。貼上最大 30 列會填滿寬圖表的可捲動預覽，並測試每個類別欄位是否保持分隔而非被壓縮。重複的標籤是被允許的，並會依照輸入順序保持為獨立的長條，因此工作中的範例可以重複類別名稱，並觀察第二個實例出現在第一個的右側。只要每列遵循嚴格的單一逗號規則，且每個值都是非負有限的十進位數值，從任何數字清單製作的長條圖便遵循相同的程序。
有兩個角落情況的變化有助於驗證工具的行為。全為零的貼上(例如 "Team A,0"、"Team B,0"、"Team C,0")會產生座標軸從零到一、長條在基準線上維持零高度的圖表，且預覽中包含明確的全零註記。混合小非零值(例如 "Tiny,1")與極大值(例如 "Huge,1e18")的貼上，則展示了線性刻度的限制:在 SVG 座標精度下，小長條可能會看不見，但其提示框仍會顯示 "1"。這兩個範例能夠暴露出線性刻度的邊界條件，而不需要額外的設定。
Limits to Watch While Running the Example
The most common reason an example fails is a malformed row, and the parser is intentionally strict about that. A single extra comma, a quoted label, a typed unit, a hexadecimal token, an empty label, an Infinity, or a NaN rejects the entire request rather than producing a partial chart. Values must be nonnegative finite base-ten numbers; ordinary decimals and e-notation are accepted, negative zero is normalized to zero, and nonzero values from 1e-300 through 1e300 are supported. Lexical nonzero input that underflows to zero and input above the maximum are rejected, so an example that lists "1e-400" alongside the rest of the rows will fail at the parse step rather than render with one missing bar.
The example should also be read with the stated scale in mind. Bar height uses a nonnegative linear scale that maps zero to the baseline and the displayed axis maximum to the plot top, with five evenly spaced reference ticks exposing the range, and the approach is deterministic but is not a promise to reproduce every D3 tick choice. The chart does not use logarithmic scaling, normalize to percentages, or imply statistical significance. Axis labels are rounded to a practical precision, so the source numbers should be kept when exact analysis is required. The tool does not aggregate, sort, infer units, add legends or series, choose colors by meaning, or verify whether a chart communicates responsibly, so the final review of labels, axis range, zero handling, extreme-scale visibility, and tooltips belongs to the person publishing the example.