DevExpress中使用ChartControl绘制折线图
作者：互联网
一、实现效果
①手动创建线性图表（添加图表标题）
②绘制单条线性图（可实现设置X和Y轴名称、绑定数据、缩放、复选框勾选是否显示、查看指定点信息）
③绘制多条线性图可实现设置X和Y轴名称、绑定数据、缩放、复选框勾选是否显示、查看指定点信息）
二、了解认识CharControl控件
可以先手动拖拽一个ChartControl到窗体查看设计效果，了解图表
点击图表右上角的小三角图标进行设计
三、实现步骤
3.1、编写线性图表的基础内容
#region 图表基础
/// <summary>
/// 创建图表
/// </summary>
/// <param name="titleName">图表的标题名称</param>
/// <param name="chartControlName">图表的名称</param>
/// <param name="initLocation">图表的初始位置</param>
/// <param name="InitSize">图表的初始大小</param>
/// <returns></returns>
private ChartControl CreateChart(string titleName,string chartControlName,
System.Drawing.Point initLocation, System.Drawing.Size InitSize)
{
ChartControl chartControl = new ChartControl();
chartControl.Legend.Name = "Default Legend";
chartControl.Location = initLocation;
chartControl.Name = chartControlName;
chartControl.Size = InitSize;
chartControl.SeriesSerializable = new DevExpress.XtraCharts.Series[0];
//添加标题
if (chartControl.Titles.Count < 1)
{
chartControl.Titles.Add(new ChartTitle());
chartControl.Titles[0].Text = titleName;
}
Controls.Add(chartControl);
chartControl.Show();
return chartControl;
}
/// <summary>
/// 清空图表
/// </summary>
/// <param name="chartControl">图表</param>
private void ClearChart(ChartControl chartControl)
{
if (chartControl != null)
{
this.Controls.Remove(chartControl);
chartControl = null;
chartControl?.Dispose();
}
}
/// <summary>
/// 填充数据到线性图表
/// </summary>
/// <param name="seriesName">图例类型名称</param>
/// <param name="curSeriesAllDataDic">图例类型对应的所有数据</param>
/// <param name="chartControl">线性图表</param>
/// <param name="viewType">线性图表类型</param>
private void FillDataToLineChart(string seriesName,
Dictionary<string, double> curSeriesAllDataDic,
ChartControl chartControl, ViewType viewType = ViewType.Line)
{
if (chartControl == null ||
curSeriesAllDataDic == null && curSeriesAllDataDic.Count == 0) return;
//添加一个类型的数据
Series series = new Series(seriesName, viewType);
foreach (var item in curSeriesAllDataDic)
{
series.Points.Add(new SeriesPoint(item.Key, item.Value));
}
chartControl.Series.Add(series);
//图例的样式设置
((LineSeriesView)series.View).MarkerVisibility = DevExpress.Utils.DefaultBoolean.True;
((LineSeriesView)series.View).LineMarkerOptions.Kind = MarkerKind.Circle;
((LineSeriesView)series.View).LineStyle.DashStyle = DashStyle.Solid;
}
/// <summary>
/// 图表设置
/// </summary>
/// <param name="chartControl">chartControl图表</param>
/// <param name="axisXName">X轴名称</param>
/// <param name="axisYName">Y轴名称</param>
private void ChartSettings(ChartControl chartControl, string axisXName, string axisYName)
{
//显示图例复选框
chartControl.Legend.MarkerMode = DevExpress.XtraCharts.LegendMarkerMode.CheckBoxAndMarker;
XYDiagram diagram = (XYDiagram)chartControl.Diagram;
if (diagram!=null)
{
//允许缩放X轴
diagram.EnableAxisXZooming = true;
diagram.AxisX.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
diagram.AxisX.Title.Alignment = StringAlignment.Far;
diagram.AxisX.Title.Text = axisXName;
//要开启滚动条需设置自动范围为false
diagram.AxisX.VisualRange.Auto = false;
//启用X轴滚动条
diagram.EnableAxisXScrolling = true;
在不拉动滚动条的时候，X轴显示的数据个数（固定X轴的长度）
//diagram.AxisX.WholeRange.SetMinMaxValues("2021/08/01", "2021/08/07");
// Define the whole range for the Y-axis.
diagram.AxisY.WholeRange.Auto = false;
diagram.AxisY.WholeRange.SetMinMaxValues(10, 70);
//允许缩放Y轴
diagram.EnableAxisYZooming = true;
diagram.AxisY.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
diagram.AxisY.Title.Alignment = StringAlignment.Far;
diagram.AxisY.Title.Text = axisYName;
//chartControl.CrosshairOptions.ShowArgumentLabels = true;
//chartControl.CrosshairOptions.ShowValueLine = true;
}
}
//初始化图表
private void InitChartSettings(ChartControl chartControl, string axisXName, string axisYName)
{
XYDiagram diagram = (XYDiagram)chartControl.Diagram;
if (diagram != null)
{
//允许缩放X轴
diagram.EnableAxisXZooming = true;
diagram.AxisX.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
diagram.AxisX.Title.Alignment = StringAlignment.Far;
diagram.AxisX.Title.Text = axisXName;
//要开启滚动条需设置自动范围为false
diagram.AxisX.VisualRange.Auto = false;
//启用X轴滚动条
diagram.EnableAxisXScrolling = true;
//在不拉动滚动条的时候，X轴显示的数据个数（固定X轴的长度）
diagram.AxisX.WholeRange.SetMinMaxValues(Convert.ToDateTime("2021/08/01"), Convert.ToDateTime("2021/08/07"));
// Define the whole range for the Y-axis.
diagram.AxisY.WholeRange.Auto = false;
diagram.AxisY.WholeRange.SetMinMaxValues(10, 70);
//允许缩放Y轴
diagram.EnableAxisYZooming = true;
diagram.AxisY.Title.Visibility = DevExpress.Utils.DefaultBoolean.True;
diagram.AxisY.Title.Alignment = StringAlignment.Far;
diagram.AxisY.Title.Text = axisYName;
//chartControl.CrosshairOptions.ShowArgumentLabels = true;
//chartControl.CrosshairOptions.ShowValueLine = true;
}
}
#endregion
3.2、线性图表【单线】创建
//创建线性图表【单线】
private void simpleButton1_Click(object sender, EventArgs e)
{
//0-清空图表
ClearChart(chartControl1);
//1-创建图表
chartControl1=CreateChart("线性图表","LineChart",new Point(10,12),new Size(600,360));
/*2-填充数据到图表*/
//模拟数据
Dictionary<string,Dictionary<string, double>> needFillDataDic =
new Dictionary<string, Dictionary<string, double>>();
Dictionary<string, double> tmpADic = new Dictionary<string, double>();
tmpADic.Add("2021/08/01", 36.5);
tmpADic.Add("2021/08/02", 22.3);
tmpADic.Add("2021/08/03", 21.1);
tmpADic.Add("2021/08/04", 25.8);
tmpADic.Add("2021/08/05", 32.3);
tmpADic.Add("2021/08/06", 42.0);
tmpADic.Add("2021/08/07", 35.5);
needFillDataDic.Add("类型A", tmpADic);
//填充数据
if (needFillDataDic!=null && needFillDataDic.Count>0)
{
foreach (var item in needFillDataDic)
{
string seriesName = item.Key;
Dictionary<string, double> curSeriesDataDic = item.Value;
FillDataToLineChart(seriesName, curSeriesDataDic, chartControl1);
}
}
//3-图表设置
ChartSettings(chartControl1, "日期", "数值（单位：个）");
}3.3、线性图表【多线】创建
//创建线性图表【多线】
private void simpleButton2_Click(object sender, EventArgs e)
{
//0-清空图表
ClearChart(chartControl1);
//1-创建图表
chartControl1 = CreateChart("线性图表", "LineChart", new Point(10, 12), new Size(600, 360));
/*2-填充数据到图表*/
//模拟数据
Dictionary<string, Dictionary<string, double>> needFillDataDic =
new Dictionary<string, Dictionary<string, double>>();
Dictionary<string, double> tmpADic = new Dictionary<string, double>();
tmpADic.Add("2021/08/01", 36.5);
tmpADic.Add("2021/08/02", 22.3);
tmpADic.Add("2021/08/03", 21.1);
tmpADic.Add("2021/08/04", 25.8);
tmpADic.Add("2021/08/05", 32.3);
tmpADic.Add("2021/08/06", 42.0);
tmpADic.Add("2021/08/07", 35.5);
needFillDataDic.Add("类型A", tmpADic);
Dictionary<string, double> tmpBDic = new Dictionary<string, double>();
tmpBDic.Add("2021/08/01", 66.5);
tmpBDic.Add("2021/08/02", 51.2);
tmpBDic.Add("2021/08/03", 44.6);
tmpBDic.Add("2021/08/04", 35.8);
tmpBDic.Add("2021/08/05", 42.3);
tmpBDic.Add("2021/08/06", 32.0);
tmpBDic.Add("2021/08/07", 55.5);
needFillDataDic.Add("类型B", tmpBDic);
//填充数据
if (needFillDataDic != null && needFillDataDic.Count > 0)
{
foreach (var item in needFillDataDic)
{
string seriesName = item.Key;
Dictionary<string, double> curSeriesDataDic = item.Value;
FillDataToLineChart(seriesName, curSeriesDataDic, chartControl1);
}
}
//3-图表设置
ChartSettings(chartControl1, "日期", "数值（单位：个）");
}四、官网参考资料
②官网手册
④AxisBase.Range Property | Cross-Platform Class Library | DevExpress Documentation
五、其他参考资料
标签：图表,DevExpress,08,diagram,Add,ChartControl,2021,折线图,chartControl 来源： https://blog.csdn.net/xiaochenXIHUA/article/details/120307234