C# Development | 如何使用 Chart 繪製折線圖，若資料量較多時可以使用滾動條查看折線圖

Chart 只顯示固定數量資料，且視窗會隨著最新一筆資料更新後移動焦點致最新資料位置

前言

最近學弟剛好問我一個問題，因為要把一些資料繪製成折線圖，但使用 Visual Studio 裡面的 chart 畫出來老是只會一直長資料，到最後就變成一坨密密麻麻的線，剪不斷理還亂…藉這個機會來稍微研究一下有關 chart 的相關資料。

概念簡介

簡單來說，小時候應該都有聽過「點線面」這個說法，所以要畫成一個圖最基本的最小單位就是「點」，只要將「點」的 X 軸座標與 Y 軸座標設定好，並把所有要的點蒐集起來交給 chart 去繪製就可以了。

在 Chart 裡面有兩個重要的屬性，一個是 Series，另一個是 ChartAreas。

• Series : 代表一條線，裡面紀錄了很多點。
• ChartAreas : 主要用來顯示線 ( Series ) 的圖形。

• Chart class MSDN link:

Chart 類別 (System.Web.UI.DataVisualization.Charting)

Example

主要利用一個 timer 計時，每一段時間 ( 300 ms )產生一個點 ( Point )並加入 Series 來組成一條線，點的 X 座標為為從 0 開始往後增加；Y 軸座標為由亂數產生的值 ( 0~100 之間的數值 )。

1. 建立一個 Windows Form Application 專案 ( 本文是用 Visual Studio 2015, .NET Framework 4.5.2 )。

2. 從 Toolbox 中找到 Chart 元件加入 Form 中並調整至合適大小。新增完 Chart 後在 Properties 中的 Series 選項右側按下「…」的按鈕，會跳出 Series Collection Editor 的視窗，並找到 ChartType 的欄位選擇 Line 然後按 OK 即可完成 Chart 的基本設定。

新增 Chart 元件

Chart 的基本設定

3. 進入編輯程式碼頁面 ( 快捷鍵為 F7 )，程式碼如下：

執行結果

成功劃出折線圖，並且視窗焦點會跟著最新新增的點移動，且線也不會積成一大坨。這樣就完成囉！

尾聲

這次的算是比較簡單的功能，但因為 Chart 的屬性有很多，所以當初找要設定那些 Properties 花了多一點時間。不過幫學弟解決了一個小問題，也順便多學了一些有關 Chart 元件的知識感覺不錯。

跟大家分享一下，我弟開了一個說書的 YouTube channel，如果大家對於閱讀大量文字覺得有點困難，不妨可以到他的頻道聽他分享閱讀的精華重點。

連結在下面👇👇👇

複利思維

如果你喜歡我的分享可以幫我拍幾下手，對於我的分享如果覺得有啟發或是希望有更多人看到可以幫我分享連結，如果有什麼建議或是想法都很歡迎留言告訴我🙂