使用折線圖製作工具時,標籤可以包含逗號,因為這個工具對每一行非空白的資料都套用同一個可預測的規則:該行最後一個逗號就是標籤與數值之間的分隔符,而它前面的所有逗號都會保留在標籤文字中。這代表像「New York, East, 42」這樣的一行會被解析為 label = "New York, East"、value = 42,而不會被當作三個欄位或標籤錯位。同一條規則也適用於以逗號書寫的日期、由多個部分組成的類別(如「Sales, North America, 1500」),以及像「Q1, 2024, 88.5」這樣的簡寫季度。正是這種「以最後一個逗號為準」的行為,讓解析器能夠容忍現實世界的資料:標籤常常包含帶有地區的地名、格式化過的日期,或是帶有公司後綴的部門名稱。所有處理都在目前的瀏覽器中執行,因此您可以直接測試含有逗號的標籤是否能正確解析,無需上傳任何檔案;如果某一行被拒絕,它會被計算並顯示在結果旁邊,而不是被悄悄丟棄或隱藏在圖表中。

can labels contain commas when using line graph maker
使用折線圖製作工具時標籤可以包含逗號嗎

標籤與數值解析規則的運作方式

輸入中每一行非空白的資料都遵循同一條規則:最後一個逗號用來分隔標籤與數值。該最後一個逗號左側的所有內容(包括其他逗號)都是標籤的一部分。該最後一個逗號右側、去除空白後的內容則被視為數值,且必須能夠以標準或科學記號表示為有限的數字,且絕對值不得超過 1e12。空標籤、格式錯誤的數字、字串「Infinity」,以及絕對值超過 1e12 的行都屬於無效,並會被統計在結果旁的「略過行」通知中。空白行則會直接被忽略,不會列入任何計算。

輸入上限為 50,000 個 UTF-16 編碼單位,且圖表最多處理 200 行非空白的資料。超過此數量的行會被略過並另外回報,因此可見的略過通知分為兩部分:無效的行以及超出上限的行。這很有用,因為像「1e20」這樣的值雖然是有效的 JavaScript 數字,但會超過大小上限並被回報為無效;而符合規則但出現在第 201 行的值則會被回報為超出上限,不會與真正損壞的行混為一談。

含逗號的標籤:實際可運作的範例

最簡單的理解方式是從右邊(而非左邊)讀取每一行:找出最後一個逗號,將其後的內容視為數值,其他部分則視為標籤。這可以避免一種常見的混淆:當標籤本身包含逗號時,若改為從第一個逗號切分,數值就會被誤判。

行的文字標籤數值
New York, East, 42New York, East42
Q1, 2024, 88.5Q1, 202488.5
Sales, North America, 1500Sales, North America1500
Berlin, DE, -3.2Berlin, DE-3.2
Tokyo 2024, 1.5e3Tokyo 20241.5e3

在產生圖表前應該檢查的列包括任何「預期數值剛好位於該行尾端」的情況。像「Group A, B, C」這樣的標籤,若數值為 10,應寫成「Group A, B, C, 10」。如果您不小心打成「Group A, 10, B, C」,解析器會把標籤讀成「Group A, 10, B」,並嘗試將「C」解讀為數值,導致失敗並被回報為無效的行。將數值重新排到該行最右端就是修正方法。

輸入含有逗號的資料行

  1. 開啟 折線圖製作工具,並輸入一段簡潔的圖表標題,描述您要繪製的資料序列。
  2. 開始輸入資料區,並以「標籤,數值」的格式,將每個點各自放在獨立的一行。
  3. 當標籤需要包含逗號時,請將逗號放在標籤內部,並在數值之前只保留一個、最後的逗號,例如:New York, East, 42。
  4. 數值請使用標準或科學記號,且絕對值不得超過 1e12;正數、負數、零以及小數值皆可接受。
  5. 產生圖表後,請閱讀略過結果旁的說明,確認無效的行與超出上限的行都符合您預期的數量。
  6. 確認繪製的順序與您輸入的順序一致,且座標軸標籤反映出資料中最小與最大的有效數值。
  7. 圖表看起來正確後,下載獨立的 SVG 檔案;預覽與匯出的檔案會使用同一張圖表。

對於同時也想確認含逗號的資料不會離開本機裝置的讀者,相關指南 無需上傳檔案即可製作折線圖 會更詳細地說明同一套純本機操作的流程。

工具略過某一行的時機

結果旁的略過通知有其用途。格式錯誤的數字、字串「Infinity」、空標籤,以及絕對值超過 1e12 的情況,都會使該行被計入無效數量。超過 200 行處理上限的行則會被歸入另一個獨立的「超出上限」計數,而不會與無效總數混在一起。請務必確認「已繪製的點數 + 略過的行數」與您輸入的行數相符,因為若不相符,通常代表某個數值在不知不覺中轉換失敗,例如某個您原本想放在標籤中的字母,卻不小心放到了最後一個逗號之後。

在產生圖表後編輯標題或資料,會清除先前已渲染的圖表,並停用下載按鈕,直到您再次產生為止。此行為是為了讓可見的圖表保持誠實:您看到的圖表永遠反映您最近一次提交的輸入。如果在某次成功產生後再次產生卻失敗,先前的輸出會被清除,而不會留在畫面上、看似代表新的輸入內容。

檢視並下載獨立的 SVG 檔案

下載前,請確認標題、繪製點的順序,以及垂直座標軸的範圍。垂直座標軸會以線性刻度,從最小有效數值延伸至最大有效數值;這可能會讓微小的變化看起來比實際更大,因此請以顯示出來的座標軸標籤為準,而非憑視覺面積判斷。五條水平格線與座標軸標籤會顯示實際呈現的範圍;若是常數數列,則會使用對稱的非零範圍,讓線條保持在中央可見的位置,而不會因為零範圍而消失。

下載的檔案是獨立的 SVG,這是一種開放的向量影像格式,在縮放或列印時都能保持清晰,並可用現代瀏覽器開啟,或匯入許多文件、簡報、設計類應用程式。由於是向量輸出,因此圖表不會像螢幕截圖那樣繼承像素尺寸或模糊感;其中包含圖表標題、座標軸、水平格線、標籤、連接線、點標記,以及可供輔助存取的點標題。想要深入了解 SVG 內容的讀者,可以參考 MDN SVG 教學 中關於此格式的說明。

過長的標籤會讓水平座標軸顯得擁擠,特別是在窄螢幕上;因此在重視可讀性的情況下,縮短標籤或減少點數往往是最乾淨的解法。在小型裝置上,預覽區可能會出現水平捲動,以便匯出的圖表能維持穩定的 800 by 480 viewBox。SVG 使用白色背景與藍色線條,以獲得廣泛的相容性;若出版品需要特定的品牌配色、字型、輔助存取處理或印刷標準,可在匯出後使用合適的向量工具進行編輯。

如果您正在權衡各種選擇,心智圖製作工具入門:從大綱到 SVG 一文對此有詳細說明。