1. 程式人生 > >C# WinForm開發系列之c# 通過.net自帶的chart控制元件繪製餅圖,柱形圖和折線圖的基礎使用和擴充套件

C# WinForm開發系列之c# 通過.net自帶的chart控制元件繪製餅圖,柱形圖和折線圖的基礎使用和擴充套件

一.需要實現的目標是:

1.將資料繫結到pie的後臺資料中,自動生成餅圖。

2.生成的餅圖有詳細文字的說明。

1.設定chart1的屬性Legends中預設的Legend1的Enable為false;

如圖1所示:

圖1 2.設定Series的ChartType為Pie,如圖2所示:

圖2
圖3 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.後臺程式碼主要實現了資料繫結和將指示的文字移到餅圖的外側。如圖4所示:

圖4 折線圖和柱形圖的生成和餅圖相同。

二.chart畫餅圖,折線圖,柱形圖的擴充套件。

1.使用chart控制元件建立,跟上面相同;

2.進行關於柱形圖樣式的資料資料,

程式碼展示:

 //畫圖柱形圖的條數決定是由資料來源也就Series決定。Series是物件,動態建立即可。
        private void Form2_Load(object sender, EventArgs e)
        {
            //畫圖柱形圖的條數決定是由資料來源也就Series決定。Series是物件,動態建立即可。
            Series s1 = new Series();
            Series s2 = new Series();
            Series s3 = new Series();

    //隨機
            Random r = new Random();
            for (int i = 1; i < 13; i++)
            {
                //繫結資料
                s1.Points.AddXY(i, r.Next(20, 30));
                s2.Points.AddXY(i, r.Next(10, 30));
                s3.Points.AddXY(i, r.Next(20, 30));
            }
            //指定柱形條的顏色
            s1.Color = Color.Green;
            s2.Color = Color.Red;
            s3.Color = Color.Black;
            //加入到chart1中
            chart1.Series.Add(s1);
            chart1.Series.Add(s2);
            chart1.Series.Add(s3);
        }

3.柱形圖效果如圖5所示:


圖5

4.C# chart繫結資料的幾種方式

(1)、陣列, List 等簡單Collection型別的方式

Series s1= new Series(); 然後繫結資料就可以了 chart1.Series["s1"].Points.DataBindXY(Hdop, Vdop); (2)DataTable方式

  Series dataTable3Series = newSeries("dataTable3");

  dataTable3Series.Points.DataBind(dataTable3.AsEnumerable(), "日期""日發展""");

dataTable3Series.XValueType = ChartValueType.DateTime;//設定X軸型別為時間 dataTable3Series.ChartType = SeriesChartType.Line;  //設定Y軸為折線 chart1.Series.Add(dataTable3Series);//加入你的chart1

三.chart控制元件畫圖的一些關鍵點

1.如何將折線圖的各個資料點凸顯出來

程式碼如下:

 private void Form3_Load(object sender, EventArgs e)
        {
            List<string> xData = new List<string>() { "A", "B", "C", "D" };
            List<int> yData = new List<int>() { 10, 20, 30, 40 };
            //線條顏色
            chart1.Series[0].Color = Color.Green;
            //線條粗細
            chart1.Series[0].BorderWidth = 3;
            //標記點邊框顏色      
            chart1.Series[0].MarkerBorderColor = Color.Black;
            //標記點邊框大小
            chart1.Series[0].MarkerBorderWidth = 3;
            //標記點中心顏色
            chart1.Series[0].MarkerColor = Color.Red;
            //標記點大小
            chart1.Series[0].MarkerSize = 8;
            //標記點型別     
            chart1.Series[0].MarkerStyle = MarkerStyle.Circle;
            //將文字移到外側
            chart1.Series[0]["PieLabelStyle"] = "Outside";
            //繪製黑色的連線
            chart1.Series[0]["PieLineColor"] = "Black";
            chart1.Series[0].Points.DataBindXY(xData, yData);
        }

效果圖如圖6所示:


圖6

2.  如何去掉柱形圖縱向線條

程式碼如下:

  private void Form2_Load(object sender, EventArgs e)
        {
            //畫圖柱形圖的條數決定是由資料來源也就Series決定。Series是物件,動態建立即可。
            Series s1 = new Series();
            Series s2 = new Series();
            Series s3 = new Series();
            Random r = new Random();
            for (int i = 1; i < 13; i++)
            {
                //繫結資料
                s1.Points.AddXY(i, r.Next(20, 30));
                s2.Points.AddXY(i, r.Next(10, 30));
                s3.Points.AddXY(i, r.Next(20, 30));
            }
            //指定柱形條的顏色
            s1.Color = Color.Green;
            s2.Color = Color.Red;
            s3.Color = Color.Black; 
            //加入到chart1中
            //X軸上網格
            chart1.ChartAreas[0].Axes[0].MajorGrid.Enabled = false;
            //y軸上網格
            //ct.ChartAreas[0].Axes[1].MajorGrid.Enabled = false;      
            chart1.Series.Add(s1);
            chart1.Series.Add(s2);
            chart1.Series.Add(s3);
        }

效果如圖7所示:


圖7

3.  如何使用chart控制元件畫圓環圖

操作與餅形圖,折線圖等相似,只是需要將chartType設定為Doughnut;

如圖8所示:

圖8

在這裡可以設定關於圓環的內外百分比,如圖9所示:


圖9

效果圖如圖10所示:


圖10

注意:程式碼設定圓環大小程式碼如下:

 //DoughnutRadius用來設定用作圓環圖大小的半徑百分比
 chart1.Series["data"].CustomProperties = "DoughnutRadius = 20";