從瀏覽器工具匯出的獨立 SVG 長條圖,可以作為圖片直接上傳到任何 Canva 設計中 — 你只需使用嚴格的 label,value 資料列建立一次圖表,然後將產生的檔案拖曳到 Canva 頁面、簡報或社群媒體範本中。Canva 原生的圖表區塊很適合作為快速視覺佔位符,但它不像專注的產生器那樣接受貼上的資料、不允許你調整刻度間距,而且在你移動或 resize 圖表時會重新渲染畫布。當數字本身就是訊息時 — 例如問卷摘要、每月銷售排行、逐類別比較 — 在專用工具中建立 SVG 可讓你擁有確定性的座標軸刻度、精確的零值處理,以及一個在 Canva 重新渲染畫布時不會位移的可下載檔案。結果是一個從輸入到匯出都完全由你掌控的圖表,以及一份從你在預覽中審閱過的相同標記所產生的可交付項目,因此協作者看到的正是最終會上線的內容。
在 Canva 外部建立圖表,然後拖入 Canva
當資料是概略的時候,Canva 的內建圖表元素很方便。但當圖表屬於報告、簡報或社群媒體貼文的一部分,而讀者會引用其中的數字時,它就不那麼方便了。圖表會被重新調整樣式以符合周遭的配色,而 Canva 中任何後續的版面變更都可能毫無預警地移動長條、刻度和標籤。
像 Bar Chart Maker 這樣專注的瀏覽器工具採取了不同的做法。你提供 2 到 30 條嚴格的 label,value 資料列,工具會建立一個具有五個均勻間距參考刻度的確定性 SVG,相同的字串同時驅動預覽和下載。不會上傳任何內容,圖表不綁定任何設計主題,你取得的檔案會與你審閱過的標記一致。當你將該檔案放入 Canva 時,顏色、座標軸刻度和長條比例會完全保持工具產生的樣子。
對於資料密集的設計(例如問卷回顧、每月 KPI 儀表板、類別比較),這種關注點分離至關重要。圖表變成一個乾淨的獨立素材,可以在頁面、社群媒體範本和簡報之間重複使用,而無需在每次設計被複製時重做底層數字。由於 SVG 高度為 520 像素並隨著資料列增加而水平擴展,你可以在 Canva 內以任何寬度放置圖表而不會損失標籤的可讀性,類別欄位也保持分開,而不是被擠在一起。
以正確的方式格式化你的資料
解析器刻意設計得很嚴格,以確保頁面上的每張圖表都完全反映輸入的內容。每一個非空白的資料列必須包含一個標籤、然後剛好一個逗號、然後一個數值 token。空白或僅含空白的行會被忽略,但任何違反規則的資料列會拒絕整個請求 — 工具絕不會默默保留前 30 列、跳過錯誤的資料列、用零替代缺失的值,或呈現一張不完整的圖表。
輸入受到兩個預算的限制:標籤最多可包含 24 個 UTF-16 程式碼單位,數值 token 最多 40 個。每個標籤和數字的前後空白會被修剪,但引號欄位內的任何內容、任何額外的逗號或任何額外的欄位都會被拒絕,因為不支援包含引號逗號的完整 CSV。數值必須是非負的有限十進位數字;接受一般小數和 e/E 記號,但不接受 Infinity、NaN、十六進位和運算式。支援 1e-300 到 1e300 的非零值;詞法上為非零但會下溢為零的輸入,以及超過最大值的輸入,會被拒絕。負零會被正規化為零。
| 輸入模式 | 結果 |
|---|---|
| Apples,12 | 接受 — 標籤 “Apples”,值 12 |
| Oranges,1.5e3 | 接受 — 科學記號沒問題 |
| Pears, 42 | 接受 — 周圍的空白會被修剪 |
| Sales Q1, 1200 | 拒絕 — 標籤內含額外的逗號 |
| “Apples, Inc”,12 | 拒絕 — 不支援引號欄位 |
| Apples | 拒絕 — 缺少逗號分隔符 |
| ,12 | 拒絕 — 標籤為空 |
| Apples, | 拒絕 — 數值 token 為空 |
| Apples,-3 | 拒絕 — 數值必須為非負 |
| (空白行) | 忽略 — 不計入 2–30 列的預算 |
允許重複的標籤,並依輸入順序保持為獨立的長條。工具不會彙總、排序或推斷單位,因此順序和措辭會完全保留你輸入的樣子。如需更詳細地了解相同輸入規則並搭配更多範例資料集,指南 how to make a bar chart from any list of numbers 是值得搭配閱讀的好夥伴。
產生並檢視你的長條圖
這份操作說明刻意保持簡短,因為大部分工作都在輸入端。
- 在瀏覽器中開啟 Bar Chart Maker,如果想要的話,為圖表輸入一個標題。即使可見標題為空,仍會接收無障礙標籤 “Bar chart”,讓螢幕閱讀器能描述此素材。
- 將 2 到 30 個非空白資料列貼到資料區域中,每行一筆,使用上述嚴格的 label,value 格式。
- 點擊 Generate。工具會解析每一個非空白資料列,計算一個非負的線性刻度,將上限往上取整到 10 的冪次的有限 1、2、5 或 10 倍數,並在 y 軸上佈局五個均勻間距的參考刻度。軸標籤最多使用六個有效實用數字,或在數值需要時使用科學記號。
- 仔細閱讀預覽。確認每個類別標籤都出現,五個刻度值符合資料,零值正好位於基線上,且沒有極端範圍的值將較小的長條擠壓到可見精度之下。
- 點擊 Download 來儲存獨立的 SVG。由於檔案是使用與預覽中相同的 SVG 字串所建立,下載的圖表會與你審閱過的標記一致。
- 如果產生之後編輯了標題或資料,先前的預覽、狀態和下載會被清除。再次 Generate 以同時更新可見的預覽和下載連結。成功產生時會從與預覽相同的字串建立一個 Blob URL,當標題或資料變更、結果被取代、產生失敗或元件卸載時,該 URL 會被撤銷,因此不會累積過時的 ObjectURL。
將 SVG 放入你的 Canva 設計
SVG 儲存到電腦後,Canva 端的工作就很簡短而具體。
- 在 Canva 中,開啟你想讓圖表存在的設計 — 一張簡報投 Instagram 貼文、報告頁面,或空白自訂尺寸的畫布。
- 從左側邊欄選擇 Uploads,將下載的 SVG 檔案拖曳到上傳區域,或點擊 Upload files 並選擇它。
- 從 Uploads 分頁將上傳的圖表拖曳到畫布上。由於檔案是向量 SVG,Canva 可以讓你乾淨地調整大小而不會出現像素化。
- 將圖表放置在支援文字的上方或旁邊,使用 Canva 的智慧輔助線對齊,並新增設計所需的任何標題、說明文字或標註。
- 當你匯出設計(PNG、JPG、PDF 或 MP4)時,嵌入的圖表會保留由工具產生的精確座標軸刻度、基線和長條比例 — 該檔案不會針對新資料重新渲染。
Canva 將 SVG 視為一般圖片素材,因此日後對數字的任何編輯都需要在 Bar Chart Maker 中重新產生圖表、重新下載 SVG,並重新上傳。請將圖表視為快照,而不是即時資料來源。由於原始數字在下載之前只存在於輸入框和預覽中,在記事應用程式或試算表中保留一份 label,value 清單的副本,可以讓下個月資料變更時的重新執行輕鬆無痛。
閱讀圖表並掌握邊角情況
發布之前,請掃描預覽中工具明確處理的三種情況。
零值。基線代表零。任何值為 0 的資料列會渲染為位於基線上、高度為零的長條,這是「沒有測量」的正確視覺呈現。工具提示仍然會回報 0,因此螢幕閱讀器和懸停使用者會得到相同的答案。
全為零的資料。如果每個值都是 0,工具會切換到明確的零到一參考軸。每個長條在基線上都是零高度,並會出現全為零的註記。這避免了除以零,並讓圖表誠實地反映所提供的內容,而不是悄悄替換成假範圍。
極端的數值範圍。y 軸是嚴格的線性刻度。舉例來說,當某個值是 1,000,000 而另一個是 5 時,小長條的像素高度可能會低於圖表的座標精度而實際消失。工具提示仍會回報 5,但視覺上長條已經消失。工具不會虛構一個最小高度的長條,因為這樣做會破壞所述的線性刻度。對於有此類分布的資料,請使用對數圖表或將類別拆分到不同的圖表中。
五個數值參考刻度位於零和取整後的上限之間,因此你可以在不懸停於個別長條的情況下對軸進行健全性檢查。刻度標籤最多使用六個有效實用數字,或在數值需要時使用科學記號,而 SVG 輸出高度為 520 像素並隨著資料列增加而水平擴展,因此 30 個標籤永遠不會被擠在一起。寬圖表在預覽中會捲動,而不是將每個標籤擠進行動裝置的寬度,座標是有限的、經過邊界驗證的,並對標記四捨五入到小數點後三位,以保持幾何穩定。
誠實的限制，以及何時該改用其他工具
以下是「Bar Chart Maker」刻意不做的一些事情，因為它的目標是產出嚴格且可預期的 SVG，而不是一個包山包海的圖表編輯器：
- 沒有對數座標軸。請參考前面關於極值範圍的說明。
- 沒有百分比標準化、沒有統計顯著性標記，也沒有自動排序或彙總功能。
- 沒有多重數列、堆疊長條圖或群組分類。每張圖表每一列只會有一根長條，並依照你輸入的順序排列。
- 沒有基於語意選色的功能。長條共用單一視覺樣式，任何主題調整都要在 SVG 上傳到 Canva 之後在 Canva 端進行。
- 沒有公式、沒有可運算的表達式，也沒有單位推斷。數值 token 必須是字面上的非負十進位數字，或可解析為有限值的 e/E 科學記號。
- 沒有點陣影像輸出。匯出格式僅支援 SVG，這也正是它在 Canva 中能保持清晰銳利的原因。
此圖表是一份符合規範的 SVG 2 文件 — 其中 rect、line、text、g 和 title 等元素直接取自 W3C SVG 2 規格，因此你上傳到 Canva 的檔案，在各瀏覽器、簡報檔以及 PDF 匯出中都能呈現完全相同的結果。每個使用者字串在進入 text、tooltip、title 或無障礙屬性之前都會經過 XML 跳脫，因此 & 符號、角括號、引號以及撇號都會被轉為實體；類指令碼的標籤則會以可見文字的形式保留，而不會被當成 SVG 元素；XML 不允許的控制字元則會被替換為 U+FFFD。一切都在本機處理：標籤、數值、標題、SVG 或任何互動行為都不會被上傳。在發布前，請檢查標籤、座標軸範圍、零值處理、極值範圍下的可見度以及工具提示。如果你的圖表需要對數 y 軸、多重數列、自動加總或由公式驅動的數值，這個工具無法幫你達成目標，此時改用更通用的圖表函式庫才是正確的下一步。對於一張能乾淨地嵌入 Canva 設計中、單一且精確的快照式比較圖，這些嚴格的輸入規則是一項特色，而不是限制。
想深入了解，請參閱 在瀏覽器中線上將表格轉換為圖表。