長條圖制作器是一個本地的長條圖產生器,可處理 2 到 30 筆嚴格的 label,value 列,其匯出的 SVG 為每個接受的數值包含一條線性長條——但它不會建立統計誤差線。 長條圖制作器接受一個選填的標題、每個分類一個標籤與一個非負有限數值,然後產生一個包含基線、五個參考刻度、旋轉標籤、工具提示和無障礙說明的垂直長條圖。沒有任何欄位可以輸入下界誤差、上界誤差、信賴區間、標準差、標準誤差、變異數或不確定性範圍,且此工具不會加上鬚線、端帽或顯著性標記。如果需要誤差線以顯示每個長條的變異或不確定性,本產品無法產生所要求的統計圖表,應改用具備誤差線功能的工具。對於需要乾淨的線性長條圖以及與預覽中完全相同標記的獨立 SVG 的讀者,或需要為另一個不確定性工作流程提供中心數值部分的讀者而言,長條圖制作器是合適的解決方案。解析、產生、預覽與 Blob 匯出皆在目前的瀏覽器分頁中進行;標籤、數值、標題、SVG 與互動資料皆不會被上傳。進行分析時請使用精確的來源數值,當長條到端點的距離具有統計意義時,請使用不同的圖表方法。

bar chart maker with error bars
bar chart maker with error bars

先了解誤差線的限制

誤差線通常會在分類的主要數值上加入下端點、上端點,或兩者皆加。長條圖制作器的輸入模型刻意較為嚴格:每個非空列僅提供一個數值。標題或分類標籤皆無法定義不確定性範圍,且產生器並不會根據其他列計算標準差、標準誤差、信賴區間、變異數或任何其他離散統計量。圖表輸出僅反映貼上的內容,每個接受的列只繪製一條長條。

圖表功能長條圖制作器行為
每個分類的數值每個非空 label,value 列僅有一個嚴格的數值
不確定性輸入輸入合約中未定義下界誤差、上界誤差、區間或統計誤差欄位
計算的統計量不會從資料集衍生標準差、標準誤差、變異數或信賴區間
視覺編碼每個接受的列一條長條、零基線,以及線性刻度上的五個數值參考刻度
不確定性的視覺標記任何長條上皆未繪製鬚線、端帽、誤差線段或陰影帶
輸出使用與可見預覽及下載 Blob 相同字串所產生的獨立 SVG
處理位置目前的瀏覽器分頁,不上傳標籤、數值、標題或 SVG 內容

從嚴格的列建立長條圖

當立即的工作是將小型類別資料集轉為線性長條圖,並將審核過的結果匯出為 SVG 時,請使用長條圖制作器。

  1. 加入選填的標題。若圖表需要標題,請輸入可見標題,或將標題欄位留空。空白可見標題仍會收到無障礙標籤「Bar chart.」。
  2. 準備 2 到 30 筆分類列。使用嚴格格式 label,value,在每個非空行放入一個分類。空白或僅含空白的行會被忽略,但若要成功產生,仍必須有 2 到 30 個非空列。
  3. 保持分隔符與符元預算精確。每個非空列必須只包含一個逗號,標籤在前,數值符元在後。標籤最多可包含 24 個 UTF-16 程式碼單位,而數值符元最多可包含 40 個。剛好達到上限會被接受,但只要標籤或符元超過上限一個程式碼單位,請求便會失敗。
  4. 僅使用支援的數字。數值必須為非負、有限的十進位數字。接受一般小數與使用 e 或 E 的科學記號表示法,並將負零正規化為零。支援 1e-300 到 1e300 之間的非零數值。會下溢為零的詞法非零輸入,以及超過最大值的輸入將被拒絕。
  5. 產生完整請求。解析器要求 2 到 30 個接受的列。一個格式錯誤的列會導致整個請求失敗:此工具不會捨棄錯誤列、替代為零、保留前 30 列,或顯示部分圖表。重複標籤會依原始順序保留為獨立的長條,因為此工具不會進行彙總或排序。
  6. 驗證預覽。檢查每個分類標籤、五個參考刻度、零基線、全零行為,以及任何極小或極大的正值。若某個小值看起來與零無法區分,請檢查其工具提示中回報的數值。編輯標題或資料會立即清除先前的預覽、狀態與下載。
  7. 下載審核過的 SVG。在圖表通過審核後選取下載動作。同一個產生的 SVG 字串同時驅動可見預覽與 Blob 下載,因此匯出的檔案與介面中審核過的標記相符。

維持輸入規則不變

此工具接受的是精簡 CSV 列,而非完整的 CSV。此區別很重要,因為有幾個常見的試算表格式對此產生器而言並不有效,若結構錯誤,會導致整個請求失敗,而不是產生部分圖表。

輸入區域已驗證的規則
列數剛好 2 到 30 個非空列;過少或過多都會使整個請求失敗
逗號每個非空列剛好一個逗號;引號內的逗號並非獨立功能
標籤必須在逗號之前,最多 24 個 UTF-16 程式碼單位,且不可為空
數值符元必須在逗號之後,最多 40 個程式碼單位,並剖析為單一嚴格數字
不支援的格式引號欄位、引號內的逗號、額外欄位、型別化單位、運算式、十六進位、Infinity 與 NaN
空白空白行會被忽略,每個標籤與數字周圍的空白會被修剪
請求結果所有列都必須通過;不會產生部分圖表、替代、彙總或重新排序

讀取五刻度線性刻度

長條高度使用非負線性刻度。零對應到基線,而顯示的軸最大值對應到圖表頂端。上界會以確定性的方式計算,並向上四捨五入為 10 的冪的有限 1、2、5 或 10 倍數。接著以五個等距的參考刻度顯示所選範圍。圖表不使用對數刻度、不將數值正規化為百分比,亦不暗示統計顯著性。

這種產品定義的「美觀範圍」做法是確定性的,但並不保證重現不同刻度函式庫所做的每個刻度選擇。如需線性刻度的一般背景,可參考 D3 線性刻度文件 中更廣泛的概念,但長條圖制作器自身的 1/2/5/10 範圍流程仍是此工具的決定性行為。軸標籤最多可使用六個實際有效位數或科學記號表示法,以維持顯示可讀性。該顯示精度不應取代分析時的來源資料集。當需要精確數值、端點或後續比較時,請保留原始數字。

檢查零與極端值

零的處理是明確的。全零資料集會產生零到一的參考範圍,將每個長條保持在基線上的零高度,並顯示全零註記。這避免出現未定義的定義域而不改變所提供的數值,讀者也能清楚看到資料集中沒有正值的明確信號。

極寬的正值範圍需要不同類型的審核。在線性刻度上,將極小的分類放在比其大數百個數量級的數值旁,可能會產生小於 SVG 座標精度的長條。圖表不會加上人為的最小高度,因為這樣做會破壞既定的刻度,且此工具不會發明最小高度長條,以免誤導線性比例。工具提示仍會回報該小值,但若每個正值分類都必須在較大值旁保持視覺上可區分,則對數刻度或獨立的圖表會更為合適。

檢查並下載精確的 SVG

下載前,請確認標題、標籤、列順序、基線、五個刻度值、零長條以及任何極端範圍註記皆能傳達預期的資料。對於難以僅從長條高度判斷的數值,工具提示提供了另一種檢查路徑。空白可見標題仍具有無障礙名稱 Bar chart。

輸出高度為 520 像素,並會隨著列數增加而水平擴展。在最多 30 個分類時,各欄位仍會保持分離,且寬幅圖表會在預覽中捲動,而非將每個標籤擠入手機寬度。座標為有限值、已通過邊界驗證,並四捨五入至三位小數作為標記。SVG 使用 W3C 命名空間與標準的 rect、line、text、g 與 title 元素;W3C SVG 2 規格 提供了相關標準參考。

使用者提供的文字在進入可見文字、工具提示、標題或無障礙屬性之前會先進行 XML 跳脫。& 符、角括號、引號及撇號會轉為實體。XML 不允許的控制字元與未配對的代理項會轉為 U+FFFD。數值座標僅來自已驗證的有限值。因此類似指令碼的標籤會保持為可見文字,而不會變成 SVG 元素。在成功產生時,同一個產生的字串會用於預覽與 Blob 下載。Blob URL 會在標題或資料變更、結果被取代、產生失敗或元件卸載時撤銷,以避免立即撤銷下載的競爭情況與累積的 ObjectURL 洩漏。若 Blob 或 URL 建立失敗,此工具會回報錯誤,且不會提供過期的下載。

Compare what each tool is built to do

Different chart tools exist for different jobs, and recognizing the boundary ahead of time saves a round trip through an editor.

QuestionBar Chart MakerGeneric spreadsheet chartingStatistical plotting library
Input modelStrict 2 to 30 label,value rows, one comma per rowFull CSV or cell range with flexible columnsProgrammatic arrays or data frames
Uncertainty supportNone: one value per category, no error fieldsSome spreadsheet charts add error bars from cell rangesOften accepts lower and upper error values per point
Scale behaviorDeterministic linear scale with a 1/2/5/10 nice upper bound and five ticksOften auto-scales with library-specific tick choicesLinear or logarithmic, depending on call
Output formatStandalone SVG created from one reviewed string, downloaded as a BlobRaster image, chart object, or bothRaster image, vector, or interactive HTML
Processing locationCurrent browser tab, no uploadOften requires uploading or syncing the spreadsheetLocal script execution by the analyst
Best fitQuick linear category charts with a reviewed standalone SVGGeneral workbooks and team-shared sheetsStatistical communication with derived uncertainty intervals

Use a safe error-bar workflow

  1. Define the uncertainty measure. State whether the required endpoint represents a confidence interval, a standard error, a standard deviation, a variance, an interquartile range, or another agreed statistic, and record the definition with the source data.
  2. Calculate the lower and upper values outside this tool. Preserve the category label, central value, lower endpoint, upper endpoint, and the statistic's definition in the source dataset. Bar Chart Maker will not derive these values and will not place them on the SVG.
  3. Choose a chart generator that supports those endpoints. Use software that can draw a whisker, cap, interval, or other agreed visual mark for each category, and verify that the chosen tool accepts the lower and upper values as input fields rather than treating them as additional categories.
  4. Use Bar Chart Maker for the central-value chart when needed. Paste only the strict central label,value rows to create a linear preview, or export the category central values as a standalone SVG for reuse. Editing the title or data immediately clears the previous preview, status, and download, so keep a copy of the source rows.
  5. Verify meaning before publication. Confirm that the chosen statistic, endpoint direction, axis range, zero handling, and visual design answer the underlying question. The tool does not determine statistical significance, does not infer units, and does not decide whether a chart is responsible, so a final review pass belongs to the author.

For an error-bar chart, adding the interval after downloading the SVG would no longer be the exact reviewed product output. It would also require a separate visual editor, a new verification pass, and a re-check that the bar heights match the central values shown in the reviewed preview. When uncertainty is essential to the result, generate the complete error-bar chart with a tool designed to accept and render those values, and reserve Bar Chart Maker for the clean linear chart it actually produces.

For a deeper look, see Excel Line Graph With 1 Variable: Clean Chart Fast.

For a deeper look, see Create a Pie Chart for Your Budget in 3 Steps.