【WinForm UI控件系列】散点图/折线图控件 （支持数值型、时间型、字符串型）

前言c# winform UI控件系列Net6纯GDI绘图无依赖虽然做不到最好争取做好更好用一、效果图 x轴三种类型数值、时间、字符串支持五种颜色风格。标题位置支持左中右布局x轴标题、y轴标题支持旋转角度。图例支持位置定义选择合适位置是否显示连线是否显示网格线是否圆滑曲线二、使用说明ScatterPlot 散点图/折线图控件控件简介ScatterPlot 是一个功能强大的散点图和折线图控件参考 ScottPlot 设计支持平滑曲线、多种X轴类型数值型、字符串型、日期时间型、网格线、值提示和图例显示。主要特性多种X轴类型支持 Numeric数值、Category字符串类别、DateTime日期时间平滑曲线支持 Smooth 平滑曲线显示可调整张力网格线支持 X/Y 轴网格线显示控制值提示鼠标悬停显示数据点值支持自动格式化图例位置控制支持 7 种图例位置None, TopLeft, TopCenter, TopRight, BottomLeft, BottomCenter, BottomRight轴标签旋转支持 X/Y 轴标签旋转角度设置自动日期时间格式根据时间跨度自动选择最优显示格式属性变更通知实现 INotifyPropertyChanged属性值改变立即生效基本使用简单散点图// 创建散点图控件varscatterPlotnewScatterPlot{DockDockStyle.Fill,ColorTypeColorType.Primary};// 添加数据系列varseriesnewScatterSeries{Name系列1,ShowLinetrue,ShowMarkerstrue,Smoothtrue};// 添加数据点for(inti0;i10;i){series.Points.Add(newScatterPoint(i,Math.Sin(i*0.5)*1020));}scatterPlot.Series.Add(series);scatterPlot.RefreshPlot();this.Controls.Add(scatterPlot);X轴类型设置// 数值型默认scatterPlot.XAxisTypeXAxisType.Numeric;// 字符串类别型scatterPlot.XAxisTypeXAxisType.Category;// 日期时间型scatterPlot.XAxisTypeXAxisType.DateTime;日期时间型数据当使用XAxisType.DateTime时控件会自动根据时间跨度选择合适的显示格式时间跨度X轴显示格式Tooltip格式≤24小时HH:mmHH:mm≤72小时MM-dd HH:mmMM-dd HH:mm≤30天MM-ddMM-dd≤1年yyyy-MMyyyy-MM1年yyyy-MM-ddyyyy-MM-dd// 日期时间型示例24小时内数据scatterPlot.XAxisTypeXAxisType.DateTime;scatterPlot.Title24小时温度变化;scatterPlot.XAxisLabel时间;varseriesnewScatterSeries{Name今日温度,ShowLinetrue,ShowMarkerstrue};// 添加24小时内的数据点DateTimetodayDateTime.Now.Date;series.Add(today.AddHours(0),18);series.Add(today.AddHours(6),20);series.Add(today.AddHours(12),28);series.Add(today.AddHours(18),24);series.Add(today.AddHours(24),19);scatterPlot.AddSeries(series);scatterPlot.RefreshPlot();图例位置控制scatterPlot.ShowLegendtrue;scatterPlot.LegendPositionLegendPosition.TopRight;// 右上角scatterPlot.LegendOrientationLegendOrientation.Horizontal;// 水平排列轴标签旋转// X轴标签旋转 45 度scatterPlot.AxisLabelStyle.XAxisRotation45;// Y轴标签旋转 -90 度scatterPlot.AxisLabelStyle.YAxisRotation-90;网格线控制// 显示 X 轴网格线scatterPlot.GridLineStyle.ShowXtrue;// 显示 Y 轴网格线scatterPlot.GridLineStyle.ShowYtrue;// 设置网格线颜色scatterPlot.GridLineStyle.ColorColor.FromArgb(230,230,230);属性说明主要属性属性名类型默认值说明SeriesList-数据系列集合XAxisTypeXAxisTypeNumericX轴类型ColorTypeColorTypePrimary色彩类型Titlestring“”图表标题XAxisLabelstring“”X轴标题YAxisLabelstring“”Y轴标题图例属性属性名类型默认值说明ShowLegendbooltrue是否显示图例LegendPositionLegendPositionBottomCenter图例位置LegendOrientationLegendOrientationHorizontal图例排列方向轴标签样式属性名类型默认值说明AxisLabelStyle.XAxisRotationint0X轴标签旋转角度AxisLabelStyle.YAxisRotationint0Y轴标签旋转角度AxisLabelStyle.FontSizefloat9标签字体大小AxisLabelStyle.ColorColorGray标签颜色网格线样式属性名类型默认值说明GridLineStyle.ShowXbooltrue是否显示X轴网格线GridLineStyle.ShowYbooltrue是否显示Y轴网格线GridLineStyle.ColorColorLightGray网格线颜色GridLineStyle.Widthint1网格线宽度事件PointClicked数据点点击事件可用于显示详细信息scatterPlot.PointClicked(sender,args){stringxValue;if(scatterPlot.XAxisTypeXAxisType.DateTime){xValuenewDateTime((long)args.Point.X).ToString(MM-dd HH:mm);}else{xValueargs.Point.X.ToString();}MessageBox.Show($系列:{args.Series.Name}\nX:{xValue}\nY:{args.Point.Y:F2});};完整示例24小时温度变化varscatterPlotnewScatterPlot{DockDockStyle.Fill,Title24小时温度变化,XAxisLabel时间,YAxisLabel温度 (°C),XAxisTypeXAxisType.DateTime,ShowLegendtrue,LegendPositionLegendPosition.BottomCenter};// 今日温度vartodaySeriesnewScatterSeries{Name今日温度,LegendText今日,ShowLinetrue,ShowMarkerstrue,Smoothtrue,SmoothTension0.4f,LineWidth2};DateTimetodayDateTime.Now.Date;todaySeries.Add(today.AddHours(0),18);todaySeries.Add(today.AddHours(2),17);todaySeries.Add(today.AddHours(4),16);todaySeries.Add(today.AddHours(6),17);todaySeries.Add(today.AddHours(8),20);todaySeries.Add(today.AddHours(10),24);todaySeries.Add(today.AddHours(12),28);todaySeries.Add(today.AddHours(14),30);todaySeries.Add(today.AddHours(16),29);todaySeries.Add(today.AddHours(18),26);todaySeries.Add(today.AddHours(20),23);todaySeries.Add(today.AddHours(22),20);todaySeries.Add(today.AddHours(24),19);scatterPlot.AddSeries(todaySeries);scatterPlot.RefreshPlot();this.Controls.Add(scatterPlot);多日期温度对比varscatterPlotnewScatterPlot{DockDockStyle.Fill,Title温度趋势图,XAxisLabel日期,YAxisLabel温度 (°C),XAxisTypeXAxisType.DateTime,ShowLegendtrue,LegendPositionLegendPosition.TopRight};// 本周温度varseries1newScatterSeries{Name本周温度,LegendText本周,ShowLinetrue,ShowMarkerstrue,Smoothtrue,LineWidth2};// 添加7天数据for(inti-6;i0;i){series1.Add(DateTime.Now.AddDays(i).Date,20Math.Sin(i*0.5)*5);}scatterPlot.AddSeries(series1);scatterPlot.RefreshPlot();注意事项日期时间数据使用DateTime.ToOADate()或DateTime.Ticks转换为数值存储刷新图表修改数据后调用RefreshPlot()重新绘制平滑曲线设置Smooth true并可通过SmoothTension调整平滑度0-1之间图例绘制图例始终在最上层显示不会被网格线遮挡轴标题设置XAxisLabel或YAxisLabel会自动预留空间避免与轴标签重叠三、后记陆续补充完善中敬请关注如有需求有好的建议请留言(xue5zhijing)