C# WinForm開發系列之chart控制項畫折線圖和直條圖並自訂滑鼠移動到資料標記點顯示提示資訊

原文出自http://blog.csdn.net/dannyiscoder/article/details/70768230

1.首先拖動chart控制項到表單，設定chart1的屬性Legends中預設的Legend1的Enable為false；

2.設定Series的ChartType為Line

3.後台綁定資料

 List<string> xData = new List<string>() { "A", "B", "C", "D" };
 List<int> yData = new List<int>() { 10, 20, 30, 40 };
 chart1.Series[0]["PieLabelStyle"] = "Outside";//將文字移到外側
 chart1.Series[0]["PieLineColor"] = "Black";//繪製黑色的連線。
 chart1.Series[0].Points.DataBindXY(xData, yData);

4.chant控制項內建的資訊提示為ToolTip(映射區),如圖1所示：

圖1

5.在表單載入中可通過如下代碼定義需要顯示的提示資訊，代碼如下：

 private void Form3_Load(object sender, EventArgs e)
 {
            List<string> xData = new List<string>() { "1", "2", "3", "4" };
            List<int> yData = new List<int>() { 10, 20, 30, 40 };
            //線條顏色
            chart1.Series[0].Color = Color.Green;
            //線條寬度
            chart1.Series[0].BorderWidth = 2;
            //標記點邊框顏色      
            chart1.Series[0].MarkerBorderColor = Color.Blue;
            //標記點邊框大小
            chart1.Series[0].MarkerBorderWidth = 3; //chart1.;// Xaxis 
            //標記點中心顏色
            chart1.Series[0].MarkerColor = Color.White;//AxisColor
            //標記點大小
            chart1.Series[0].MarkerSize = 8;
            //標記點類型     
            chart1.Series[0].MarkerStyle = MarkerStyle.Circle;   

    //需要提示的資訊    
            chart1.Series[0].ToolTip = "當前年份：#VAL\n最高分：#MAX\n最低分：#Min";


            //將文字移到外側
            chart1.Series[0]["PieLabelStyle"] = "Outside";
            //繪製黑色的連線
            chart1.Series[0]["PieLineColor"] = "Black";
            chart1.Series[0].Points.DataBindXY(xData, yData);
 }

6.效果如下圖2,3所示：

圖2

圖3

註：為了自訂提示資訊的樣式，我自己定義了一個提示框，通過如下方法進行顯示

7.在form表單上畫提示框，(使用兩個panel合并三個label),效果如圖4所示：

圖4

8.使用chart控制項的工具提示事件，如圖5所示：

圖5

9.(1)初始表單方法中隱藏自訂提示資訊，代碼如下：

public Form3()
{
      InitializeComponent();
      this.panel1.Visible = false;
}

(2)在表單載入方法裡綁定滑鼠移至上方工具提示事件，代碼如下：

 private void Form3_Load(object sender, EventArgs e)
{
       //懸停工具提示事件
       chart1.GetToolTipText += new EventHandler<ToolTipEventArgs>(chart1_GetToolTipText);

       List<string> xData = new List<string>() { "1", "2", "3", "4" };
       List<int> yData = new List<int>() { 10, 20, 30, 40 };
       //線條顏色
       chart1.Series[0].Color = Color.Green;
       //線條寬度
       chart1.Series[0].BorderWidth = 2;
       //標記點邊框顏色      
       chart1.Series[0].MarkerBorderColor = Color.Blue;
       //標記點邊框大小
       chart1.Series[0].MarkerBorderWidth = 3; //chart1.;// Xaxis 
       //標記點中心顏色
       chart1.Series[0].MarkerColor = Color.White;//AxisColor
       //標記點大小
       chart1.Series[0].MarkerSize = 8;
       //標記點類型     
       chart1.Series[0].MarkerStyle = MarkerStyle.Circle;//MarkerStyle.Circle;
       //將文字移到外側
       chart1.Series[0]["PieLabelStyle"] = "Outside";
       //繪製黑色的連線
       chart1.Series[0]["PieLineColor"] = "Black";
       chart1.Series[0].Points.DataBindXY(xData, yData);
 }

(3)懸停工具提示事件方法如下代碼：

//在具體事件處理函數中給出處理方法 
/*用chart的mousemove時間，即時跟蹤滑鼠最近的X軸的位置，然後把cursorX設定到那個位置上，

讓使用者知道我是選的那一個X的值，同時用tooltip顯示該X軸上所有的Y值*/
void chart1_GetToolTipText(object sender, ToolTipEventArgs e)
{

      //判斷滑鼠是否移動到資料標記點，是則顯示提示資訊
      if (e.HitTestResult.ChartElementType == ChartElementType.DataPoint)
      {
           int i = e.HitTestResult.PointIndex;
           DataPoint dp = e.HitTestResult.Series.Points[i];
           //分別顯示x軸和y軸的數值，其中{1:F3},表示顯示的是float類型，精確到小數點後3位。                     
           string r = string.Format("次數:{0};數值:{1} ", dp.XValue, dp.YValues[0]);

           //滑鼠相對於表單左上方的座標
            Point formPoint = this.PointToClient(Control.MousePosition);
            int x = formPoint.X;
            int y = formPoint.Y;
            //顯示提示資訊
    this.panel1.Visible = true;
            this.panel1.Location = new Point(x, y);
            this.label3.Text = r;
            }

    //滑鼠離開資料標記點，則隱藏提示資訊
            else {
                this.panel1.Visible = false;
            }
 }

7.當滑鼠移動到不同資料標記點是的提示效果如圖6，7所示：

圖6

圖7