C# Chart折線圖使用滑鼠滾輪放大、縮小和平移曲線方式

2022-06-28 14:00:32

Chart折線圖使用滑鼠滾輪放大、縮小和平移曲線

使用滑鼠滾輪捲動放大和縮小X軸的寬度，滑鼠左鍵按住拖動實現曲線的左右平移，不再使用卷軸。

新增滑鼠滾輪事件

在chart控制元件自帶的滑鼠事件中並沒有滑鼠的滾輪事件，因此需要手動新增一下，在表單的Designer.cs檔案下的InitializeComponent()函數中新增如下程式碼

this.chart1.MouseWheel += new System.Windows.Forms.MouseEventHandler(this.chart1_MouseWheel);

實現滑鼠滾輪事件

private void chart1_MouseWheel(object sender, MouseEventArgs e)
{
	// 實驗發現滑鼠滾輪捲動一圈時e.Delta = 120，正反轉對應正負120
	if (chart1.ChartAreas[0].AxisX.ScaleView.Size > 0) // 防止越過左邊界
	{
		chart1.ChartAreas[0].AxisX.ScaleView.Size += (e.Delta / 120); // 每次縮放1
	}
	else if(e.Delta > 0)
	{
		chart1.ChartAreas[0].AxisX.ScaleView.Size += (e.Delta / 120); // 每次縮放1
	}           
}

上述方法即可實現滑鼠滾輪捲動完成曲線的縮放功能，下面實現滑鼠按鍵按住左右拖動實現曲線的左右平移。

初始化有關引數

// 定義兩個全域性變數
public bool isMouseDown = false;
public int lastMove = 0; // 用於記錄滑鼠上次移動的點，用於判斷是左移還是右移
// 初始化ScaleView，可根據首次出現在chart中的資料點數修改合適的值
chart1.ChartAreas[0].AxisX.ScaleView.Size = 5;
// 設定不顯示chart自帶的卷軸
chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = false;
chart1.ChartAreas[0].AxisY.ScrollBar.Enabled = false;
// 注意不要開啟X軸遊標，預設不開啟，如下設定false或者不設定下列引數
chart1.ChartAreas[0].CursorX.IsUserEnabled = false;
chart1.ChartAreas[0].CursorX.AutoScroll = false;
chart1.ChartAreas[0].CursorX.IsUserSelectionEnabled = false;

新增滑鼠按下、彈起和移動事件

上述事件在chart控制元件中均自帶，直接新增即可，事件程式碼如下：

// 滑鼠按下事件
private void chart1_MouseDown(object sender, MouseEventArgs e)
{
	lastMove  = 0;
    isMouseDown = true;
}
// 滑鼠彈起事件
private void chart1_MouseUp(object sender, MouseEventArgs e)
{
    isMouseDown = false;
}
// 滑鼠移動事件
private void chart1_MouseMove(object sender, MouseEventArgs e)
{
    if (isMouseDown)
    {
    	// 可更改（交換）如下加減1或if條件來設定滑鼠移動時曲線移動方向
        if(lastMove != 0 && e.X - lastMove > 0)
            chart1.ChartAreas[0].AxisX.ScaleView.Position += 1;  // 每次移動1
        else if(lastMove != 0 && e.X - lastMove < 0)
            chart1.ChartAreas[0].AxisX.ScaleView.Position -= 1; // 每次移動1
        lastMove = e.X;
    }
}

最終效果如下，圖片前面黑呼呼的為控制檯輸出，似乎有點看不清（可忽略），可觀察到滑鼠滾輪的變化。

如何使用Chart圖表

Chart控制元件可以用來繪製波形圖、柱狀圖、餅圖、折線圖等，用來進行資料表現是很不錯的，現在簡單說一下這個控制元件的使用方法

效果圖

我們首先要載入Chart控制元件

然後開啟控制元件的屬性視窗

在這個視窗裡面我們可以修改曲線的名稱，名稱在【資料》Name】裡面修改

講一下屬性視窗裡面我們用到的幾個選項的作用吧

資料

XValueType是X軸的資料型別，Y同理，這裡我們選Time，可以隨時間改變

圖表

ChartType是圖表的型別，我們可以選出我們想要用的型別，這裡選曲線

外觀

Color可以選擇曲線的顏色，這裡我選了紅色

左邊的成員框，是我們要顯示的曲線，可以新增多個

其他屬性如果有需要自行修改，修改好之後確定，回到視窗設計介面

在工具箱新增Timer

在Timer的事件視窗雙擊時鐘事件

程式碼如下，請自行對照填到對應的事件裡面去

public partial class Form1 : Form
    {
        int cnt = 0;
        public Form1()
        {
            InitializeComponent();
        }
 
        private void Form1_Load(object sender, EventArgs e)
        {
            timer1.Enabled = true;
        }
 
        private void timer1_Tick(object sender, EventArgs e)
        {
            chart1.Series[0].Points.AddY(cnt*cnt);
            label1.Text = cnt.ToString();
            cnt++;
        }
 
        private void chart1_Click(object sender, EventArgs e)
        {
 
        }
    }

cnt是個自變數，曲線顯示的是cnt為底的2次指數曲線

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。