🏆 作者简介，愚公搬代码 🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，阿里云专家博主，腾讯云优秀博主，掘金优秀博主，51CTO博客专家等。 🏆《近期荣誉》：2022年CSDN博客之星TOP2，2022年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀前言

Winform控件是Windows Forms中的用户界面元素，它们可以用于创建Windows应用程序的各种视觉和交互组件，例如按钮、标签、文本框、下拉列表框、复选框、单选框、进度条等。开发人员可以使用Winform控件来构建用户界面并响应用户的操作行为，从而创建功能强大的桌面应用程序。

🚀一、Chart控件详解

Winform中的Chart控件是一个用于创建和显示图表的控件。它可以轻松地在Windows窗体中添加各种类型的图表，如柱状图、线性图、饼图等。以下是使用Chart控件的一些基本步骤：

添加Chart控件：从Visual Studio Toolbox窗口中拖拽Chart控件到Windows窗体中。
数据绑定：在窗体加载时，将数据绑定到Chart控件中。例如，可以使用数据集或数据表等来提供数据。
添加数据系列：使用Chart控件的Series属性来添加数据系列。每个数据系列代表一个图表中的一组数据。
设定图表类型：可以使用Chart控件的ChartType属性来设置图表类型。例如，可以设置为柱状图、线性图、饼图等。
设定坐标轴：可以使用Chart控件的Axis属性来设定坐标轴。例如，可以设置X坐标轴和Y坐标轴的刻度等。
设定图例：图例是用于解释图表内容的标识。可以使用Chart控件的Legend属性来设定图例。例如，可以设置图例的位置和显示项等。
设定样式：可以使用Chart控件的各种样式属性来修改图表的外观。例如，可以修改图表的背景色、线条颜色等。
显示图表：在所有设置完成后，使用Chart控件的DataBind和Refresh方法来显示图表。DataBind方法将数据绑定到图表中，而Refresh方法则刷新图表的显示。

Chart控件是一个非常强大和灵活的控件，可以用于创建各种类型的图表，并提供丰富的属性和方法以定制图表的外观和行为。

注意：为了跨平台以及兼容，基于.net6创建的winform项目是没有chart图表控件的，但是可以通过nuget 包管理器来进行扩展, 比如：ScottPlot 图表控件。

🔎1.属性介绍

🦋1.1 DataSource

在WinForm中使用Chart控件时，可以通过设置DataSource属性来绑定数据源。以下是一些步骤：

首先，确保已将Chart控件添加到窗体设计器中。
在设计时或运行时，创建数据源，并将数据源绑定到Chart控件。可以使用任何.NET数据源，如DataTable、BindingSource、List等。
在代码中，使用DataSource属性将数据源分配给Chart控件。

例如，以下代码演示如何将DataTable绑定到Chart控件：

chart1.Series.Clear();
Series series2 = new Series();
series2.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
series2.LegendText = "曲线2";//设置图例文本
series2.Color = Color.Blue;//曲线的颜色
series2.BorderWidth = 2;//曲线的宽度
chart1.Series.Add(series2);
DataTable dt = new DataTable();
dt.Columns.Add("序号");
dt.Columns.Add("值");
for (int i = 0; i < 5; i++)
{
    dt.Rows.Add();
    dt.Rows[i][0] = i + 1;
    dt.Rows[i][1] = (i + 1) * 10;
}
chart1.DataSource = dt;//绑定数据源
chart1.Series[0].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
chart1.Series[0].YValueMembers = "值";//设置曲线的X轴绑定dt中的名为"值"的列

在这里插入图片描述

🦋1.2 Annotations

Chart控件的Annotations属性用于向图表中添加注释，可以用来标记特殊的数据点或者添加一些说明性文字。Annotations属性是一个AnnotationCollection类型的对象，它包含了所有的注释对象。

在Winform中，可以通过以下几个步骤来使用Annotations属性：

创建Chart控件：在Visual Studio的工具箱中，找到Chart控件，拖动到窗体中并设置好其属性。
添加注释：使用Chart控件的Annotations属性添加注释，可以通过以下代码实现：

// 创建一个注释对象，并设置其属性
TextAnnotation annotation = new TextAnnotation();
annotation.Text = "这是一段注释";
annotation.ForeColor = Color.Red;
annotation.Font = new Font("宋体", 14);
annotation.X = 3;
annotation.Y = 10;

// 将注释对象添加到AnnotationCollection中
chart1.Annotations.Add(annotation);

上述代码中，首先定义了一个TextAnnotation类型的注释对象，设置了其文本、前景色、字体以及位置等属性。然后将注释对象添加到Chart控件的Annotations属性中，即可在图表上显示该注释。

显示注释：通过设置注释对象的Visible属性，可以控制注释的显示和隐藏。例如，以下代码可以控制所有注释的显示：

foreach (var annotation in chart1.Annotations)
{
    annotation.Visible = true;
}

使用Annotations属性可以方便地在图表中添加注释，使图表更具说明性和可读性。如果需要更复杂的注释样式，还可以使用其他类型的Annotation对象，例如LineAnnotation、RectangleAnnotation等。

在这里插入图片描述

🦋1.3 ChartAreas

☀️1.3.1 对其

private void Form1_Load(object sender, EventArgs e)
{
    chart1.ChartAreas.Clear();
    ChartArea chartArea1 = new ChartArea();
    chartArea1.BackColor = Color.Red;

    ElementPosition elementPosition = chartArea1.Position;
    chartArea1.Position = new ElementPosition(0, 0, 50, 50);//设置的值范围时0到100，对应的0%到100%。
    chartArea1.InnerPlotPosition = new ElementPosition(0, 0, 100, 100);//不包括轴标签和刻度线
    chart1.ChartAreas.Add(chartArea1);

    ChartArea chartArea2 = new ChartArea();
    chartArea2.BackColor = Color.Yellow;
    chartArea2.Position = new ElementPosition(0, 50, 100, 50);
    chart1.ChartAreas.Add(chartArea2);

    chart1.Series.Clear();
    Series series2 = new Series();
    series2.ChartArea = chart1.ChartAreas[0].Name;
    series2.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
    series2.LegendText = "曲线1";//设置图例文本
    series2.Color = Color.Green;//曲线的颜色
    series2.BorderWidth = 2;//曲线的宽度
    chart1.Series.Add(series2);
    DataTable dt = new DataTable();
    dt.Columns.Add("序号");
    dt.Columns.Add("值1");
    dt.Columns.Add("值2");
    for (int i = 0; i < 5; i++)
    {
        dt.Rows.Add();
        dt.Rows[i][0] = i + 1;
        dt.Rows[i][1] = (i + 1) * 10;
        dt.Rows[i][2] = (i + 1) * 100;
    }
    chart1.DataSource = dt;//绑定数据源
    chart1.Series[0].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
    chart1.Series[0].YValueMembers = "值1";//设置曲线的X轴绑定dt中的名为"值"的列




    Series series3 = new Series();
    series3.ChartArea = chart1.ChartAreas[1].Name;
    series3.ChartType = System.Windows.Forms.DataVisualization.Charting.SeriesChartType.Line;
    series3.LegendText = "曲线2";//设置图例文本
    series3.Color = Color.Blue;//曲线的颜色
    series3.BorderWidth = 2;//曲线的宽度
    chart1.Series.Add(series3);


    chart1.Series[1].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
    chart1.Series[1].YValueMembers = "值2";//设置曲线的X轴绑定dt中的名为"值"的列

}

在这里插入图片描述

☀️1.3.2 3D显示

private void Form1_Load(object sender, EventArgs e)
{
    chart1.ChartAreas.Clear();
    ChartArea chartArea1 = new ChartArea();
    chartArea1.BackColor = Color.Red;

    ElementPosition elementPosition = chartArea1.Position;
    chartArea1.Position = new ElementPosition(0, 0, 50, 50);//设置的值范围时0到100，对应的0%到100%。
    chartArea1.InnerPlotPosition = new ElementPosition(10, 10, 90, 90);//不包括轴标签和刻度线
    chartArea1.Area3DStyle.Enable3D = true;
    chart1.ChartAreas.Add(chartArea1);

    chart1.Series.Clear();
    Series series2 = new Series();
    series2.ChartArea = chart1.ChartAreas[0].Name;
    series2.ChartType = SeriesChartType.Column;//柱状图
    series2.LegendText = "曲线1";//设置图例文本
    series2.Color = Color.Green;//曲线的颜色
    series2.BorderWidth = 2;//曲线的宽度
    chart1.Series.Add(series2);
    DataTable dt = new DataTable();
    dt.Columns.Add("序号");
    dt.Columns.Add("值1");
    dt.Columns.Add("值2");
    for (int i = 0; i < 5; i++)
    {
        dt.Rows.Add();
        dt.Rows[i][0] = i + 1;
        dt.Rows[i][1] = (i + 1) * 10;
        dt.Rows[i][2] = (i + 1) * 100;
    }
    chart1.DataSource = dt;//绑定数据源
    chart1.Series[0].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
    chart1.Series[0].YValueMembers = "值1";//设置曲线的X轴绑定dt中的名为"值"的列
}

在这里插入图片描述

☀️1.3.3 外观

private void Form1_Load(object sender, EventArgs e)
{
    chart1.ChartAreas.Clear();
    ChartArea chartArea1 = new ChartArea();


    ElementPosition elementPosition = chartArea1.Position;
    //chartArea1.Position = new ElementPosition(0, 0, 50, 50);//设置的值范围时0到100，对应的0%到100%。
    //chartArea1.InnerPlotPosition = new ElementPosition(10, 10, 90, 90);//不包括轴标签和刻度线

    //外观设置
    chartArea1.Visible = true;
    chartArea1.BackColor = Color.Red;//背景色，如果BackSecondaryColor和Color属性不一样则BackColor为渐变开始的颜色
    chartArea1.BackGradientStyle = GradientStyle.None;//从左到右渐变
    chartArea1.BackSecondaryColor = Color.Yellow;//渐变结束的颜色
    chartArea1.BackHatchStyle = ChartHatchStyle.Cross;//阴影样式,颜色由BackSecondaryColor指定
    chartArea1.BackImage = @"C:\Users\Happy\Pictures\Saved Pictures\2d0e6f4495ee9cab920b2bdaeb155e37.jpeg";//设置背景图像，路径
    chartArea1.BackImageAlignment = ChartImageAlignmentStyle.TopRight;//该属性只能在BackImageWrapMode为Unscaled时使用
    chartArea1.BackImageWrapMode = ChartImageWrapMode.Scaled;//设置图像显示模式，Scaled为缩放图像让其适应图表元素大小，一般情况下是需要使用缩放的
    chartArea1.BackImageTransparentColor = Color.Red;//碰到BackImage中有透明颜色时，应该使用什么颜色替代
    chartArea1.BorderColor = Color.Yellow;//边框颜色
    chartArea1.BorderWidth = 5;//边框宽度
    chartArea1.BorderDashStyle = ChartDashStyle.DashDot;//边框线型
    chartArea1.IsSameFontSizeForAllAxes = true;//设置轴标签大小是否相等
    chartArea1.ShadowColor = Color.Goldenrod;//阴影颜色
    chartArea1.ShadowOffset = 20;//阴影偏移量
    chart1.ChartAreas.Add(chartArea1);

    chart1.Series.Clear();
    Series series2 = new Series();
    series2.ChartArea = chart1.ChartAreas[0].Name;
    series2.ChartType = SeriesChartType.Column;//柱状图
    series2.LegendText = "曲线1";//设置图例文本
    series2.Color = Color.Green;//曲线的颜色
    series2.BorderWidth = 2;//曲线的宽度
    chart1.Series.Add(series2);
    DataTable dt = new DataTable();
    dt.Columns.Add("序号");
    dt.Columns.Add("值1");
    dt.Columns.Add("值2");
    for (int i = 0; i < 5; i++)
    {
        dt.Rows.Add();
        dt.Rows[i][0] = i + 1;
        dt.Rows[i][1] = (i + 1) * 10;
        dt.Rows[i][2] = (i + 1) * 100;
    }
    chart1.DataSource = dt;//绑定数据源
    chart1.Series[0].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
    chart1.Series[0].YValueMembers = "值1";//设置曲线的X轴绑定dt中的名为"值"的列
}

在这里插入图片描述

☀️1.3.4 游标

private void Form1_Load(object sender, EventArgs e)
{
    chart1.ChartAreas.Clear();
    ChartArea chartArea1 = new ChartArea();
    chartArea1.CursorX.AutoScroll = true;//当选择范围超出当前坐标范围时，是否发生自动滚动
    chartArea1.CursorX.IsUserEnabled = true;//是否显示游标
    chartArea1.CursorX.IsUserSelectionEnabled = true;//是否允许用户使用鼠标选择范围
    chartArea1.CursorX.Position = 1.5;
    chartArea1.CursorX.Interval = 0.5;//设置当用户选择范围时，间隔多少出现游标
    chartArea1.CursorX.IntervalType = DateTimeIntervalType.Auto;//间隔的单位
    chartArea1.CursorX.IntervalOffset = 0;//没啥作用
    chartArea1.CursorX.IntervalOffsetType = DateTimeIntervalType.Auto;//没啥作用
    chartArea1.CursorX.LineColor = Color.Yellow;
    chartArea1.CursorX.LineDashStyle = ChartDashStyle.Dot;
    chartArea1.CursorX.LineWidth = 3;
    chartArea1.CursorX.SelectionColor = Color.Red;
    chartArea1.CursorX.SelectionStart = 1;
    chartArea1.CursorX.SelectionEnd = 2;


    chartArea1.AxisX.ScaleView.Zoomable = true;//是否开启缩放用户界面
    chartArea1.AxisX.ScaleView.Size = 3;//设置缩放时X坐标的显示的范围
    chartArea1.AxisX.IsMarginVisible = false;//如果为true，则在第一个点的左边增加一个空格，在最后一个点的右边也增加一个空格

    chart1.ChartAreas.Add(chartArea1);

    chart1.Series.Clear();
    Series series2 = new Series();
    series2.ChartArea = chart1.ChartAreas[0].Name;
    series2.ChartType = SeriesChartType.Line;//曲线
    series2.LegendText = "曲线1";//设置图例文本
    series2.Color = Color.Green;//曲线的颜色
    series2.BorderWidth = 2;//曲线的宽度
    series2.MarkerStyle = MarkerStyle.Circle;
    series2.IsValueShownAsLabel = true;
    chart1.Series.Add(series2);
    DataTable dt = new DataTable();
    dt.Columns.Add("序号");
    dt.Columns.Add("值1");
    dt.Columns.Add("值2");
    for (int i = 0; i < 5; i++)
    {
        dt.Rows.Add();
        dt.Rows[i][0] = i + 1;
        dt.Rows[i][1] = (i + 1) * 10;
        dt.Rows[i][2] = (i + 1) * 100;
    }
    chart1.DataSource = dt;//绑定数据源
    chart1.Series[0].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
    chart1.Series[0].YValueMembers = "值1";//设置曲线的X轴绑定dt中的名为"值"的列

}

在这里插入图片描述

☀️1.3.5 轴

🌈1.3.5.1 X轴

private void Form1_Load(object sender, EventArgs e)
{
    chart1.ChartAreas.Clear();
    ChartArea chartArea1 = new ChartArea();


    //轴标签
    chartArea1.AxisX.IsMarginVisible = false;//如果为true，则在第一个点的左边增加一个空格，在最后一个点的右边也增加一个空格
    chartArea1.AxisX.IsLabelAutoFit = false;//自动调整轴标签
    chartArea1.AxisX.LabelAutoFitMaxFontSize = 10;//自动调整标签时最大字体大小
    chartArea1.AxisX.LabelAutoFitMinFontSize = 5;//自动调整标签时最小字体大小
    chartArea1.AxisX.LabelAutoFitStyle = LabelAutoFitStyles.LabelsAngleStep30;//自动调整标签的角度范围


    //自定义标签，有时候需要把IsLabelAutoFit设置为true，不然自定义标签效果看不出来
    for (int i = 0; i < 5; i++)
    {
        int rowIndex = 0;
        CustomLabel label = new CustomLabel(i + 0.5, i + 1.5, (i + 1).ToString() + "月", rowIndex, LabelMarkStyle.None);
        chartArea1.AxisX.CustomLabels.Add(label);
    }

    chartArea1.AxisX.LabelStyle.Angle = 0;//角度
    chartArea1.AxisX.LabelStyle.Font = new Font("宋体", 15);//字体类型和大小
    chartArea1.AxisX.LabelStyle.ForeColor = Color.Red;//字体颜色
    chartArea1.AxisX.LabelStyle.Format = "F2";//感觉没什么用
    chartArea1.AxisX.LabelStyle.Interval = 1;//间隔多久显示一个标签
    chartArea1.AxisX.LabelStyle.IntervalType = DateTimeIntervalType.Auto;//标签间隔使用的单位
    chartArea1.AxisX.LabelStyle.IntervalOffset = 0;//间隔的偏移，一般不使用
    chartArea1.AxisX.LabelStyle.IntervalOffsetType = DateTimeIntervalType.Auto;//一般不使用
    chartArea1.AxisX.LabelStyle.IsEndLabelVisible = true;//是否在轴的末尾显示标签，一般是true
    chartArea1.AxisX.LabelStyle.IsStaggered = false;//如果为true，则标签显示的时候一个在上一个在下，显示为交错排列
    chartArea1.AxisX.LabelStyle.Tag = "";//可以绑定数据
    chartArea1.AxisX.LabelStyle.TruncatedLabels = true;//不知道具体作用
    chart1.ChartAreas.Add(chartArea1);

    chart1.Series.Clear();
    Series series2 = new Series();
    series2.ChartArea = chart1.ChartAreas[0].Name;
    series2.ChartType = SeriesChartType.Line;//曲线
    series2.LegendText = "曲线1";//设置图例文本
    series2.Color = Color.Green;//曲线的颜色
    series2.BorderWidth = 2;//曲线的宽度
    series2.MarkerStyle = MarkerStyle.Circle;
    series2.IsValueShownAsLabel = true;
    chart1.Series.Add(series2);
    DataTable dt = new DataTable();
    dt.Columns.Add("序号");
    dt.Columns.Add("值1");
    dt.Columns.Add("值2");
    for (int i = 0; i < 5; i++)
    {
        dt.Rows.Add();
        dt.Rows[i][0] = i + 1;
        dt.Rows[i][1] = (i + 1) * 10;
        dt.Rows[i][2] = (i + 1) * 100;
    }
    chart1.DataSource = dt;//绑定数据源
    chart1.Series[0].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
    chart1.Series[0].YValueMembers = "值1";//设置曲线的X轴绑定dt中的名为"值"的列

}

在这里插入图片描述

🦋1.4 Legends

private void Form1_Load(object sender, EventArgs e)
{
    chart1.ChartAreas.Clear();
    ChartArea chartArea1 = new ChartArea();

    chartArea1.AxisX.IsMarginVisible = false;//如果该属性为true，则在第一个数据点的左边以及最后一个数据点的右边添加空格
    chart1.ChartAreas.Add(chartArea1);

    chart1.Series.Clear();
    Series series2 = new Series();
    series2.ChartArea = chart1.ChartAreas[0].Name;
    series2.ChartType = SeriesChartType.Line;//曲线
    series2.LegendText = "曲线 1";//设置图例文本
    series2.Color = Color.Green;//曲线的颜色
    series2.BorderWidth = 2;//曲线的宽度
    series2.MarkerStyle = MarkerStyle.Circle;
    series2.IsValueShownAsLabel = true;
    chart1.Series.Add(series2);
    DataTable dt = new DataTable();
    dt.Columns.Add("序号");
    dt.Columns.Add("值1");
    dt.Columns.Add("值2");
    for (int i = 0; i < 10; i++)
    {
        dt.Rows.Add();
        dt.Rows[i][0] = (i + 1);
        dt.Rows[i][1] = (i + 1) * 10;
        dt.Rows[i][2] = (i + 1) * 100;
    }
    chart1.DataSource = dt;//绑定数据源
    chart1.Series[0].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
    chart1.Series[0].YValueMembers = "值1";//设置曲线的X轴绑定dt中的名为"值"的列

    //标题
    chart1.Legends[0].Title = "图例标题";//图例标题文本
    chart1.Legends[0].TitleAlignment = StringAlignment.Center;//图例标题对齐方式
    chart1.Legends[0].TitleFont = new Font("宋体", 20); //图例标题字体类型和大小
    chart1.Legends[0].TitleBackColor = Color.Gold;//图例标题背景颜色
    chart1.Legends[0].TitleForeColor = Color.Black;//图例标题文本颜色
    chart1.Legends[0].TitleSeparator = LegendSeparatorStyle.DotLine;//图例分割线类型
    chart1.Legends[0].TitleSeparatorColor = Color.Green; //图例分割线颜色

    //停靠
    chart1.Legends[0].Alignment = StringAlignment.Near;//图例对齐方式
    chart1.Legends[0].DockedToChartArea = chartArea1.Name;
    chart1.Legends[0].Docking = Docking.Right;//图例停靠方式
    chart1.Legends[0].IsDockedInsideChartArea = false;//此时一定要设置DockedToChartArea属性
    chart1.Legends[0].MaximumAutoSize = 50;//尚不知道具体作用


    //外观
    chart1.Legends[0].Enabled = true;
    chart1.Legends[0].LegendStyle = LegendStyle.Row; //图例样式
    chart1.Legends[0].TableStyle = LegendTableStyle.Wide;//图例表样式
    chart1.Legends[0].AutoFitMinFontSize = 50;
    chart1.Legends[0].BackColor = Color.Yellow;//图例背景色开始颜色
    chart1.Legends[0].BackGradientStyle = GradientStyle.LeftRight;//渐变颜色样式
    chart1.Legends[0].BackHatchStyle = ChartHatchStyle.None;
    chart1.Legends[0].BackSecondaryColor = Color.Blue;//图例背景色结束颜色
    chart1.Legends[0].BorderColor = Color.Red; //图例边框颜色
    chart1.Legends[0].BorderWidth = 2;// 图例边框线宽
    chart1.Legends[0].BorderColor = Color.Red; //图例边框颜色
    chart1.Legends[0].BorderDashStyle = ChartDashStyle.Dash;

    chart1.Legends[0].Font = new Font("宋体", 20);
    chart1.Legends[0].ForeColor = Color.Red;
    chart1.Legends[0].InterlacedRows = false;
    chart1.Legends[0].InterlacedRowsColor = Color.Yellow;
    chart1.Legends[0].IsEquallySpacedItems = true;
    chart1.Legends[0].IsTextAutoFit = false;//图例文本自动改变大小，会导致Legends[0].Font =失效
                                            //chart1.Legends[0].Position = new ElementPosition(50,50,50,50);//设置图例位置
    chart1.Legends[0].ShadowColor = Color.Yellow;
    chart1.Legends[0].ShadowOffset = 0;
    chart1.Legends[0].TextWrapThreshold = 2;//当图例文本超过此属性指定的值时，遇到下一个空格字符时，文本将自动换行。如果文本中没有空格字符，则不会换行。将TextWrapThreshold属性设置为零可禁用该功能


}

在这里插入图片描述

🦋1.5 标题

private void Form1_Load(object sender, EventArgs e)
{
    chart1.Titles.Clear();
    Title title = new Title();
    chart1.Titles.Add(title);
    title.Alignment = ContentAlignment.MiddleCenter;//标题显示的位置
    title.BackColor = Color.Red;//背景色
    title.BorderColor = Color.Blue;//边框颜色
    title.DockedToChartArea = chart1.ChartAreas[0].Name;//停靠在那个ChartAreas边上
    title.Docking = Docking.Top;//停靠方式
    title.Font = new Font("宋体", 20);//字体
    title.ForeColor = Color.Green;//字体颜色
    title.IsDockedInsideChartArea = true;//是否在ChartArea 里面显示
    title.Text = "曲线";//标题文本
    title.TextOrientation = TextOrientation.Horizontal;//标题显示方向
    title.TextStyle = TextStyle.Emboss;//标题样式
    title.Visible = true;//是否显示标题

    chart1.ChartAreas.Clear();
    ChartArea chartArea1 = new ChartArea();




    chartArea1.AxisX.IsMarginVisible = false;//如果该属性为true，则在第一个数据点的左边以及最后一个数据点的右边添加空格
    chart1.ChartAreas.Add(chartArea1);

    chart1.Series.Clear();
    Series series2 = new Series();
    series2.ChartArea = chart1.ChartAreas[0].Name;
    series2.ChartType = SeriesChartType.Line;//曲线
    series2.LegendText = "曲线 1";//设置图例文本
    series2.Color = Color.Green;//曲线的颜色
    series2.BorderWidth = 2;//曲线的宽度
    series2.MarkerStyle = MarkerStyle.Circle;
    series2.IsValueShownAsLabel = true;
    chart1.Series.Add(series2);
    DataTable dt = new DataTable();
    dt.Columns.Add("序号");
    dt.Columns.Add("值1");
    dt.Columns.Add("值2");
    for (int i = 0; i < 10; i++)
    {
        dt.Rows.Add();
        dt.Rows[i][0] = (i + 1);
        dt.Rows[i][1] = (i + 1) * 10;
        dt.Rows[i][2] = (i + 1) * 100;
    }
    chart1.DataSource = dt;//绑定数据源
    chart1.Series[0].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
    chart1.Series[0].YValueMembers = "值1";//设置曲线的X轴绑定dt中的名为"值"的列

}

在这里插入图片描述

🦋1.6 Series

private void Form1_Load(object sender, EventArgs e)
{
    chart1.ChartAreas.Clear();
    ChartArea chartArea1 = new ChartArea();

    chartArea1.AxisX.IsMarginVisible = false;//如果该属性为true，则在第一个数据点的左边以及最后一个数据点的右边添加空格
    chart1.ChartAreas.Add(chartArea1);

    chart1.Series.Clear();
    Series series2 = new Series();

    //标记
    series2.MarkerBorderColor = Color.Blue;//标记边框颜色
    series2.MarkerBorderWidth = 2;//标记边框宽度
    series2.MarkerColor = Color.Red;//标记颜色
    series2.MarkerStyle = MarkerStyle.Circle;//标记类型
    series2.MarkerSize = 10;//标记尺寸
    series2.MarkerStep = 2;//多少间隔显示一个标记
    //series2.MarkerImage =@"C:\Users\zhaij\Desktop\香蕉.jpg";//需要设置图像尺寸和标记大小相同，不然图像太大，该属性基本不用


    series2.ChartArea = chart1.ChartAreas[0].Name;
    series2.ChartType = SeriesChartType.Line;//曲线
    series2.LegendText = "曲线1";//设置图例文本
    series2.Color = Color.Green;//曲线的颜色
    series2.BorderWidth = 2;//曲线的宽度

    series2.IsValueShownAsLabel = true;
    chart1.Series.Add(series2);
    DataTable dt = new DataTable();
    dt.Columns.Add("序号");
    dt.Columns.Add("值1");
    dt.Columns.Add("值2");
    for (int i = 0; i < 10; i++)
    {
        dt.Rows.Add();
        dt.Rows[i][0] = (i + 1);
        dt.Rows[i][1] = (i + 1) * 10;
        dt.Rows[i][2] = (i + 1) * 100;
    }
    chart1.DataSource = dt;//绑定数据源
    chart1.Series[0].XValueMember = "序号";//设置曲线的X轴绑定dt中的名为"序号"的列
    chart1.Series[0].YValueMembers = "值1";//设置曲线的X轴绑定dt中的名为"值"的列


}

在这里插入图片描述

🔎2.常用场景

Winform中的Chart控件是一个数据可视化工具，它可以用来展示各种统计图表和数据图表。以下是Chart控件的常用场景：

数据分析和可视化：Chart控件可以用来展示各种数据的图表，比如折线图、柱状图、饼状图、散点图等，便于用户更好地理解和分析数据。
实时监控：Chart控件可以用来实时展示数据的变化趋势，比如股票行情、气象数据等，具有很高的实时性和快速响应能力。
测试和调试：Chart控件可以用来测试和调试各种算法和模型，比如机器学习算法、图像处理算法等，便于用户更好地理解算法的工作原理和效果。
产品展示：Chart控件可以用来展示各种产品的销售情况和趋势，比如电商平台、实时在线游戏等，便于用户更好地了解产品的市场表现和走势。

Chart控件在数据可视化和数据分析方面有着广泛的应用，可以大大提升用户的数据分析效率和工作效率。

🔎3.具体案例

我们可以使用Yahoo Finance API来获取实时的股票数据，并将数据展示在Chart控件中。首先，需要引入以下命名空间：

using System.Windows.Forms.DataVisualization.Charting;
using System.Net;
using System.IO;
using Newtonsoft.Json.Linq;

然后，在控件初始化时，可以设置Chart的属性，如标题、坐标轴、图表类型等：

private void Form1_Load(object sender, EventArgs e)
{
    // 设置Chart属性
    chart1.Titles.Add("股票价格走势图");
    chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.LightGray;
    chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.LightGray;
    chart1.ChartAreas[0].AxisX.LabelStyle.Format = "yyyy-MM-dd";
    chart1.Series.Clear();
}

接下来，可以编写一个方法来获取股票数据，并将数据添加到Chart的数据系列中：

private void GetStockData(string symbol)
{
    // 获取股票数据
    string url = String.Format("https://query1.finance.yahoo.com/v7/finance/chart/{0}?range=1d&interval=5m", symbol);
    WebClient client = new WebClient();
    Stream stream = client.OpenRead(url);
    StreamReader reader = new StreamReader(stream);
    string json = reader.ReadToEnd();
    JObject stockData = JObject.Parse(json);

    // 添加数据系列
    JArray prices = (JArray)stockData["chart"]["result"][0]["indicators"]["quote"][0]["close"];
    List<double> priceList = prices.Select(p => (double)p).ToList();
    DateTime startDate = new DateTime(1970, 1, 1, 0, 0, 0, DateTimeKind.Utc);
    JArray timestamps = (JArray)stockData["chart"]["result"][0]["timestamp"];
    List<DateTime> timeList = new List<DateTime>();
    foreach (long timestamp in timestamps)
    {
        DateTime dateTime = startDate.AddMilliseconds(timestamp);
        timeList.Add(dateTime);
    }
    Series series = new Series(symbol);
    series.XValueType = ChartValueType.DateTime;
    for (int i = 0; i < priceList.Count; i++)
    {
        series.Points.AddXY(timeList[i], priceList[i]);
    }
    chart1.Series.Add(series);
}

最后，在按钮点击事件中，可以调用此方法来获取数据并添加到Chart控件中：

private void button1_Click(object sender, EventArgs e)
{
    GetStockData(textBox1.Text);
}

这样，就可以通过Chart控件展示实时的股票数据了。

在这里插入图片描述

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

(完)WPF和Winform控件绘图专题（二）

【愚公系列】2023年11月 Winform控件专题 Chart控件详解

🚀前言

🚀一、Chart控件详解

🔎1.属性介绍

🦋1.1 DataSource

🦋1.2 Annotations

🦋1.3 ChartAreas

☀️1.3.1 对其

☀️1.3.2 3D显示

☀️1.3.3 外观

☀️1.3.4 游标

☀️1.3.5 轴

🌈1.3.5.1 X轴

🦋1.4 Legends

🦋1.5 标题

🦋1.6 Series

🔎2.常用场景

🔎3.具体案例

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐