一個免費的折線圖產生器,是一種瀏覽器工具,能把一份帶標籤的數字清單,轉換成一張可縮放的圖表,並讓你把它存成向量圖檔,不需要建立帳號、安裝軟體,也不需要把你的資料傳送到遠端伺服器。Line Graph Maker 做的正是這件事:它最多接受 200 筆帶標籤的數值,以相等的水平間距繪製這些點,套用一個從最小值到最大值的線性垂直刻度,並匯出一個獨立的 SVG 檔,內含標題、座標軸、格線、連接線與資料點標記。因為一切都在你目前的瀏覽器分頁中完成,解析、預覽渲染,以及 SVG 檔案本身,都是在本機產生的,你輸入的文字內容不會被上傳到 Lizely。這種組合——零成本、不需要註冊、不需要上傳,以及一份真正可以貼進文件、或在任何現代檢視器中開啟的向量檔案——正是這類免費折線圖工具,與那些需要帳號、會在你匯出的檔案上加上浮水印,或把你的資料儲存在他們伺服器上的廣告支持型圖表工具之間的區別所在。

在這個折線圖產生器中,「免費」代表什麼
當一個工具標榜自己是免費的折線圖產生器時,價格標籤只是其中一項重要的成本。其他成本通常藏在工作流程裡:建立帳號、把資料貼進一個會把它送到雲端服務的表單、在圖表算出來之前先看完一則廣告,或是接受匯出圖片上被加了浮水印。Line Graph Maker 避開了以上這四種成本。解析你的輸入內容、計算座標、渲染預覽,以及建構 SVG 檔案,這一切都在你目前的瀏覽器分頁中完成。
這一點在三個具體的層面上很重要。第一,你的原始數字會留在你的裝置上,這對銷售數字、班級名冊、實驗讀數,或任何你不想貼進第三方表單的資料集來說都很有用。第二,你拿到的檔案是一份真正的 SVG——一種在MDN SVG tutorial 中有說明的開放向量格式——所以當你把它縮放來用於簡報投影片,或印在海報上時,畫面依然清晰銳利。第三,匯出的內容就是你在預覽中看到的同一張圖表,所以不會出現「你檢查過的內容」和「你下載到的內容」之間重新渲染後產生落差的情況。
讓這個免費工具能運作的輸入格式
這個解析器遵循一條單一規則:在每一個非空白行中,最後一個逗號會把標籤和數值分開。前面的逗號會保留在標籤內,這代表像「New York, East」這樣的地名,可以直接當成標籤使用,而不會讓這個工具搞混。數值必須是一個有限的數字,可以用嚴格的十進位或科學記號表示,數量級不能超過 1e12。空白標籤、格式錯誤的數字、Infinity,以及絕對值超過 1e12 的數值,都屬於無效輸入,會被跳過,並另外計數。
| 輸入行 | 標籤 | 數值 | 是否被接受? |
|---|---|---|---|
| January, 42 | January | 42 | 是 |
| New York, East, 87.5 | New York, East | 87.5 | 是 |
| Run 3, 1.2e-5 | Run 3 | 1.2e-5 | 是 |
| Sensor A, -3 | Sensor A | -3 | 是 |
| Peak, Infinity | Peak | Infinity | 否 |
| 只有標籤 | — | — | 否 |
| (空白行) | — | — | 忽略 |
整份輸入內容上限為 50,000 個 UTF-16 碼元,這個工具在單一張圖表中,最多處理 200 個非空白列,以維持瀏覽器的反應速度。超過第 200 列的資料,並不會被悄悄丟棄——它們會被計數,並顯示在結果旁邊,讓你可以決定在匯出之前,是要精簡資料,還是把資料集拆開。
一步步建立你的第一張折線圖
- 開啟 Line Graph Maker,輸入一個簡潔的圖表標題,例如「Monthly signups, Q1.」。這個標題會成為你即將匯出的 SVG 檔的主標題。
- 依照上述的「標籤, 數值」格式,輸入至少兩行資料。單一一個點無法構成一條線,所以這個工具至少需要兩列有效資料,才會繪製任何圖形。
- 點選「產生」。預覽畫面會在本機渲染。在預覽畫面旁邊,查看座標軸標籤,以及任何明確的無效列或超出上限的提示訊息,然後在繼續之前,先修正被標記出來的資料列。
- 確認繪製的順序。這些標籤會依照你輸入的確切順序,沿著水平軸顯示出來;這個工具不會替你自動排序。
- 確認垂直軸。因為刻度是從最小值到最大值繪製的,這個軸不一定會從零開始——這個事實,會改變乍看之下一項變化顯得有多大。
- 下載這份獨立的 SVG 檔。這個檔案包含標題、座標軸、格線、標籤、連接線、資料點標記,以及供無障礙使用的資料點標題文字。在你產生出一張與目前輸入內容相符的圖表之前,下載按鈕會維持停用狀態。
編輯標題或資料內容,會自動清除先前的輸出結果,並停用下載按鈕,直到你再次產生圖表為止。這是刻意的設計:它能讓畫面上顯示的圖表,與畫面上顯示的輸入內容保持同步,讓你永遠不會匯出一張過時的圖片。
誠實地解讀這張圖表:座標軸、順序與限制
折線圖擅長做一件事:呈現順序與方向。它不能取代統計分析,這個工具也不會執行任何統計分析。這裡沒有迴歸線、沒有移動平均、沒有預測、沒有信賴區間、沒有誤差線,也沒有缺失值的內插。連接兩筆量測值之間畫出的一條線,並不能證明背後的實際過程,真的在這兩點之間平滑地變動。
舉一個快速的實作範例,假設有兩列資料:January, 10 以及February, 25。垂直軸會把最小值 10 對應到繪圖區的底部,把最大值 25 對應到繪圖區的頂部。一個點的 y 座標計算方式是:繪圖高度減去(數值減 10)除以 15,再乘以繪圖高度。以 January 為例,就是繪圖高度 − (10 − 10) / 15 × 繪圖高度 = 繪圖高度 − 0 × 繪圖高度 = 繪圖高度。以 February 為例,則是繪圖高度 − (25 − 10) / 15 × 繪圖高度 = 繪圖高度 − 1 × 繪圖高度 = 0。所以 January 會落在底部邊緣,February 會落在頂部邊緣——這條線會爬升整個繪圖區的高度,即使背後實際的變化只有 15 個單位。這項變化在視覺上的大小,完全取決於顯示出來的數值範圍,這也是為什麼這個工具會明確顯示座標軸標籤,而不是把它們隱藏起來。
如果你資料集中的每一個數值都相同,數值範圍就會是零,這會讓這條線收縮成單一一個點。這個工具的處理方式,是以這個常數值為中心,對稱地擴展數值範圍,讓這條線能保持顯示在繪圖區的中間位置。數字運算使用標準的 JavaScript 雙精度算術,座標軸標籤會保留有實際意義的有效位數,非常小或非常大的數值,則會以科學記號顯示。以上這些處理方式,都不會增加量測精確度——如果精確度對你很重要,請保留你的原始資料。
什麼時候免費的折線圖不是正確的工具
並不是每一組數字序列,都適合用折線圖呈現。水平軸會把每個標籤,視為依你輸入順序排列、間距相等的一個步驟。這對有序的類別(例如一年中的各個月份,或編號的實驗回合)來說是正確的,但當觀測值之間的間隔並不相等時,這樣做就不對了。下表整理了這個免費工具適用的情境,以及什麼時候換一個工具會更誠實。
| 情境 | 適合這項任務的圖表 | 原因 |
|---|---|---|
| 連續五個月的月度總計 | Line Graph Maker | 依月份順序、相等間距排列,符合這組資料的特性。 |
| 編號里程碑上的專案進度 | Line Graph Maker | 有序的類別 x 軸,單一 y 數列。 |
| 時間間隔不規則的感測器讀數 | XY Scatter Plot Maker | 必須保留 x 軸上不均等的距離關係。 |
| 沒有內在順序的分類支出 | Bar Chart Maker 或 Pie Chart Maker | 這些類別是名目性質的,而不是序列性質的。 |
| 兩個實測變數與一條趨勢線 | XY Scatter Plot Maker | 兩個軸都是數值型,彼此之間存在真實的距離關係。 |
如果你發現自己已經超出這個工具的能力範圍,匯出的結果仍然可以當作一份草稿使用。你可以在向量編輯器中開啟這個 SVG 檔並加以調整,或把同樣的資料貼進支援明確 x、y 欄位與真實日期軸的試算表應用程式中。
輸出結果:一份可在任何地方重複使用的獨立 SVG 檔
可下載的檔案,是一個具有固定 800 x 480 viewBox 的單一 SVG 檔。在較窄的螢幕上,預覽畫面可能會水平捲動,以維持圖表幾何形狀不變,而匯出的檔案,也會維持相同的幾何形狀。這個 SVG 使用白色背景與藍色線條,以維持與後續工具的廣泛相容性。它可以在任何現代瀏覽器中開啟,放進接受 SVG 格式的簡報軟體或文字處理軟體中,或匯入能讀取向量檔案的設計應用程式中。
在你匯出之前,請先檢查預覽畫面中的四個項目:圖表標題、水平軸上的資料列順序、垂直軸的數值範圍,以及任何跳過資料列或超出上限的提示訊息。過長的標籤,可能會讓水平軸顯得擁擠,在較窄的顯示器上尤其如此,所以如果可讀性對你很重要,請縮短標籤,或減少資料點的數量。如果某個出版用途需要特定的色彩配置、字體排印,或無障礙處理方式,請在匯出之後,於合適的向量工具中編輯這個 SVG 檔——這個檔案是純文字的 XML,可以接受進一步的編輯,而不需要重新渲染。
若想更深入了解這個檔案是如何建構出來的,standalone SVG chart guide 詳細說明了匯出檔案的各個組成部分。如果你的數字存放在試算表中,比起重新輸入一次,你更想直接貼上整批資料列,Excel paste-rows guide 則從那個起點出發,說明了如何使用同一個工具。