C#--圖示控制元件Chart使用
阿新 • • 發佈:2020-11-16
以下是學習筆記:
效果如下:
1,新增Chart資料實體類
/// <summary> /// Chart資料實體類 /// </summary> public class ChartData { public ChartData() { } public ChartData(string text, double value) { this.Text = text; this.Value = value; } /// <summary> /// 顯示的文字 /// </summary> public string Text { get; set; } /// <summary> /// 顯示的值 /// </summary> public double Value { get; set; } }
2,新增Chart屬性設定的類,通用的類
/// <summary> /// 高階圖表設定類,通用類 /// </summary> public class SuperChart { //當前要使用的圖表控制元件物件 private Chart chart = null; public SuperChart(Chart chart) { this.chart = chart; } /// <summary> /// 繪製圖表的通用方法 /// </summary> /// <param name="chartType">圖表顯示的型別</param> /// <param name="dataList">圖表所需要的資料</param> public void ShowChart(SeriesChartType chartType, List<ChartData> dataList) { //【1】清除所有的圖表序列 this.chart.Series.Clear(); //【2】建立一個圖表序列物件(一個圖表,可以新增多個圖表序列,也就是繪圖物件),如果有多條曲線的顯示 Series series1 = new Series(); series1.ChartType = chartType;//設定圖表序列物件顯示的型別 this.chart.Series.Add(series1);//新增到圖表序列集合 //【3】設定當前圖表序列的各種屬性值 for (int i = 0; i < dataList.Count ; i++) { //3.1 獲取資料物件的兩個值 string text = dataList[i].Text; double value = dataList[i].Value; //3.2 使用x和y的值將DataPoint物件新增進去 series1.Points.AddXY(text, value); //3.3 設定資料點顯示內容 series1.Points[i].LabelToolTip = value.ToString();//滑鼠放到標籤上面的提示 series1.Points[i].ToolTip = value.ToString();//圖形上面的提示,在一個區域裡面顯示 //3.4 根據圖形樣式設定顯示的形式和內容 if (chartType == SeriesChartType.Pie)//如果是餅形圖 { // series1.Points[i].Label = "#AXISLABEL(#VAL)";//設定標籤顯示的內容=X軸內容+value series1.Points[i].Label = "#AXISLABEL(#PERCENT)";//X軸+百分比 // series1.Points[i].Label = "#AXISLABEL(#VAL)(#PERCENT)"; series1["PieLabelStyle"] = "Outside"; //在外側顯示Lable // series1["PieLabelStyle"] = "Inside"; series1["PieLineColor"] = "Black";//繪製連線 } else if (chartType == SeriesChartType.Doughnut)//圓環圖 { series1.Points[i].Label = "#AXISLABEL (#PERCENT)"; series1["PieLabelStyle"] = "Inside"; } else //如果是其他圖形,顯示百分比或數值 { series1.Points[i].Label = "(#PERCENT)"; } if (chartType != SeriesChartType.Pie) { series1.Points[i].AxisLabel = string.Format("{0} {1}", text, value); } } //【4】設定圖表繪圖區域的X和Y座標值(Y:表示具體要顯示的數值之間的間隔) this.chart.ChartAreas[0].AxisY.Interval = 10;//也可以設定成20 this.chart.ChartAreas[0].AxisX.Interval = 1; //一般都設定為1 } }
餅形圖說明:
3,在窗體中使用,窗體程式碼:
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; //引用名稱空間 using System.Windows.Forms.DataVisualization.Charting; namespace UseChartDemo { public partial class FrmChart : Form { private SuperChart superChart = null; private List<ChartData> dataList = new List<ChartData>();//用來儲存資料的集合 public FrmChart() { InitializeComponent(); //初始化自定義圖表設定物件 superChart = new SuperChart(this.chart1); Init();//實際開發中,可以從資料庫或其他資料來源查詢 } private void Init() { //建立一個隨機數用來生成資料 Random random = new Random(); dataList.Add(new ChartData("北京", random.Next(100))); dataList.Add(new ChartData("上海", random.Next(100))); dataList.Add(new ChartData("天津", random.Next(100))); dataList.Add(new ChartData("深圳", random.Next(100))); dataList.Add(new ChartData("南京", random.Next(100))); } //顯示餅形圖 private void btnPie_Click(object sender, EventArgs e) { this.superChart.ShowChart(SeriesChartType.Pie, dataList); } //顯示柱狀圖 private void btnColumn_Click(object sender, EventArgs e) { this.superChart.ShowChart(SeriesChartType.Column, dataList); } //折線圖 private void btnLine_Click(object sender, EventArgs e) { this.superChart.ShowChart(SeriesChartType.Line, dataList); } //橫條圖 private void btnBar_Click(object sender, EventArgs e) { this.superChart.ShowChart(SeriesChartType.Bar, dataList); } //圓環圖 private void btnDoughnut_Click(object sender, EventArgs e) { this.superChart.ShowChart(SeriesChartType.Doughnut, dataList); } //樣條圖 private void btnSpline_Click(object sender, EventArgs e) { this.superChart.ShowChart(SeriesChartType.Spline, dataList); } //樣條面積圖 private void btnSplineArea_Click(object sender, EventArgs e) { this.superChart.ShowChart(SeriesChartType.SplineArea, dataList); } } }