條形圖製作器
將 2 轉換為 30 的標籤、值列,製成可讀的條形圖並下載精確預覽 SVG。
隱私權:你的檔案不會離開裝置,所有處理均在瀏覽器本機完成。
使用方式
- 1.輸入一個可選標題,並貼上 2 到 30 的嚴格標籤,值列,每列非空值之間必須用一個逗號分隔。
- 2.產生並驗證類別標籤、五個刻度值、基準線、零值以及任何極端範圍可視性限制。
- 3.下載獨立的 SVG,其為根據預覽中顯示的精確字串所建立。
關於條形圖製作器
條形圖製作器可將一個小型類別資料集轉換為目前瀏覽器中的垂直條形圖。請為每個類別輸入一行非空值,格式為標籤、數值,並可選擇性地新增標題後產生。圖表包含基準線、五個數值參考刻度、每個被接受的行對應一個條形、旋轉標籤、提示框以及可存取的描述。一個產生的 SVG 字串同時驅動可視預覽與其 Blob 下載,因此輸出的檔案與你審閱的標籤相符。輸入是故意採用 CSV-lite 而非完整的 CSV。每一行非空值必須包含恰好一個逗號、逗號前為標籤、逗號後為數值。空白或僅包含空白字元的行將被忽略。帶引號的欄位、帶引號的逗號、額外的欄位、空標籤、帶單位的數值、運算式、十六進位、Infinity 和 NaN 不被支援。每個標籤與數值周圍的前導與尾隨空白字元會被刪除。一個標籤最多包含 24 UTF-16 字元單位,一個數值最多包含 40。精確的限制被接受,超出一個字元單位則失敗。圖表需要 2 到 30 個非空值行。過少、過多或其中一行格式錯誤將拒絕整個請求。 解析器從來不會只保留第一個 30,會跳過錯誤的列,替換為零,或顯示不完整的圖表。編輯標題或資料會立即清除之前的預覽、狀態和下載。值必須是非負的有限十進位制數字。普通小數和 e/E 記法被接受。負零會被規範為零。1e-300 到 1e300 之間的非零值被支援;語彙上非零的輸入如果下溢至零以及超出最大值的輸入會被拒絕。允許重複標籤,並在輸入順序中保持為獨立的條形。工具不會聚合、排序或推斷單位。條形高度使用非負的線性比例。零會對應到基準線,顯示的軸最大值會對應到圖表頂端。上限會向上取至有限 1、2、5 或 10 的十次方倍數,並顯示五個均勻間隔的參考刻度以顯示範圍。這是一種本產品定義的 nice-domain 方法,雖然決定性強,但並不能保證重現每個 D3 刻度選擇。圖表不會使用對數比例、規範為百分比或暗示統計顯著性。極為寬廣的值範圍可能在 SVG 坐標精度下使正條形視覺上與零無法區分。 其提示訊息仍會顯示該值。這個工具不會自行建立最小高度的條形圖,因為這樣會破壞所說明的線性比例。當必須讓極小的類別與數值相差數個數量級的專案同時可見時,應使用對數圖或分組顯示的圖表。所有值為零的資料會使用明確的零到一參考範圍,並保持所有條形圖的高度為零,同時顯示全部為零的說明。這樣可以避免除以零的情況,而不改變提供的值。SVG 的高度為 520 像素,並隨著新增的列向右延展。類別欄位會保持分離,寬圖表會在預覽視窗中滾動,而不是將 30 標籤擠入行動寬度中。座標為有限值,經過邊界驗證並四捨五入至三位小數用於標註。座標軸標籤使用最多六位有效數字或科學記號表示。當需要精確分析時,應保留原始數值。使用者輸入的字串在輸入文字、提示訊息、標題或輔助功能屬性前會進行 XML 轉義處理。安培符號、角度符號、引號和單引號會轉換為對應的實體。XML 禁止使用的控制項與未配對的代理字元會轉換為 U+FFFD。數值座標只能來自經過驗證的有限值。 標籤類似指令碼因此保持為可見文字,而非 SVG 元素。SVG 使用 W3C 名稱空間與標準 rect、line、text、g 與 title 元素。即使為空白的可見標題,仍會收到可辨識標籤 Bar chart。成功的產生會從與預覽中使用的相同 SVG 字串建立一個 Blob URL。該 URL 在正常連結下載時仍然有效,當標題或資料改變、結果被取代、產生失敗或元件解除安裝時會被撤銷。這避免了立即撤銷下載的競爭條件與累積的 ObjectURL 洩漏。Blob 建立或 URL 建立失敗會產生錯誤且不會有過期下載。所有東西都保持在本機:沒有標籤、值、標題、SVG 或互動會被上傳。這個工具不會評估公式、取得資料、解析完整的 CSV、建立點陣圖、加入圖例或系列、根據意義選擇顏色,或驗證圖表是否能負責任地傳達資訊。在釋出前請檢查標籤、座標軸範圍、零值處理、極端比例的可見性與提示資訊。
方法與來源
解析 2 到 30 之間非空行,並在標籤與數字詞彙預算內進行解析,每行需包含一個逗號與一個嚴格非負有限小數或科學記號值。計算一個有限非負線性比例尺、1/2/5/10 美觀上限網域、五個均勻間隔的刻度、零高度零條形圖與明確的全零狀態。驗證 SVG 範圍,將座標四捨五入至三位小數,取代 XML 禁止字元,並對每個使用者字串進行實體轉換。儲存一個產生的 SVG 用於預覽與 Blob 下載。追蹤其 ObjectURL 並在編輯、取代、失敗或解除安裝時撤銷。測試涵蓋解析、精確限制、八種固定佈局結果、零與極端資料、XML 注入、標題範圍與防禦性佈局驗證。
常見問題
- 標籤可以包含逗號嗎?
- 不可以。這是 CSV-lite,不是完整的 CSV:每個非空行必須包含恰好一個逗號,且引用逗號不受支援。
- 在 30 行數之上會發生什麼事?
- 產生會根據精確的非空行數失敗。這個工具從來不會靜默地只保留前 30 行。
- 如果每個值都是零會怎麼樣?
- 圖表會顯示從零到一的參考軸、基準線上的零高度條形圖,以及明確標註所有為零的說明。
- 為何在一個極大的值旁邊,一個極小的正條形圖看不見?
- 在極端範圍內的線性比例可能小於 SVG 坐標精度。提示框會保留該值;當需要可視性時,請使用對數或分離圖表。
- 圖表資料會上傳嗎?
- 不會。解析、佈局、SVG 產生、預覽、Blob 建立以及匯出全都留在當前瀏覽器分頁中。
相關工具
產生器 使用指南
查看全部- Bar Chart Best Practices: Choosing Scales and Labels (英文原文)
- Bar Chart Maker With Error Bars: What It Supports (英文原文)
- How to Make a Bar Chart in PowerPoint From Any List (英文原文)
- How to Make a Bar Chart in matplotlib Without Code (英文原文)
- How to Make a Bar Chart in Google Sheets: Two Routes (英文原文)
- Make a Bar Chart in Canva From CSV-Lite Rows (英文原文)
- Make a Bar Chart From Excel Data Without Excel (英文原文)
- Adjust Bar Width in Any Bar Chart with One Simple Tool (英文原文)
- How to Make a Bar Chart From Any List of Numbers (英文原文)
- How to Create a Bar Chart With Multiple Bars in SVG (英文原文)
- How to Use the Coin Flip App for a Fair Toss (英文原文)
- How to Generate Bingo Cards With Pictures (or Numbers) (英文原文)
- Avatar Generator on iPhone: Make a Profile PNG in Safari (英文原文)
- How to Create an Acrostic Poem on Rain (英文原文)
- Make a Table Chart in Canva From a Clean SVG (英文原文)
- Download a YouTube Thumbnail From Any Video Link (英文原文)
- Create Yes or No on Excel Without a Spreadsheet Formula (英文原文)
- Scatter Plot in Excel With 3 Variables: Prep and Build (英文原文)
- Convert Word to JPG: Blend Two Words for the Filename (英文原文)
- What Should I Eat? A Fast Way to Pick a Meal (英文原文)