DevExpress 组件是一个非常丰富和强大的组件，适合各种可视化图形的绘制与展示，在数据分析展示中是个很有帮助的，网上也有很多关于这方面的文章，关于折线图或柱状图的画法，以下是自己在工作中接触到的和自己整理的，直接上代码。
/// <summary>
///折线图
/// </summary>
/// <param name="table">数据源</param>
public void DrawChart(DataTable table)
{
this.panel5.Controls.Clear();
// 线图
ChartControl charLine = new ChartControl();
// 总投入
Series series1 = new Series("车组修时", ViewType.Line);
series1.DataSource = table;
charLine.Series.Add(series1);
SetSeries(series1, "TRAINSETNAME", new string[] { "DAYS" });
// 检修车间
Series series2 = new Series("检修车间", ViewType.Line);
series2.DataSource = table;
charLine.Series.Add(series2);
SetSeries(series2, "TRAINSETNAME", new string[] { "I_DAYJX" });
// 转向架车间
Series series3 = new Series("转向架车间", ViewType.Line);
series3.DataSource = table;
charLine.Series.Add(series3);
SetSeries(series3, "TRAINSETNAME", new string[] { "I_DAYZXJ" });
// 设置 chartControl 属性
SetChartControl(charLine, "检修量统计分析
", " 修时(天): ", "平均修时:" + avgRepairDay + " 天", avgRepairDay);
// 添加 charControl
this.panel5.Controls.Add(charLine);
}
/// <summary> /// 设置Series 的属性 /// </summary> /// <param name="ser"></param> /// <param name="argumentDataMember"></param> /// <param name="valueDataMember"></param> private void SetSeries(Series series, string argumentDataMember, string[] valueDataMember) { // X 轴类型 series.ArgumentScaleType = ScaleType.Qualitative; //显示的信息和数据 series.PointOptions.PointView = PointView.Values; // X轴显示字段 series.ArgumentDataMember = argumentDataMember; series.ValueScaleType = ScaleType.Numerical; // Y轴取值字段 series.ValueDataMembers.AddRange(valueDataMember); // 隐藏线条上的显示内容，线条上的数值 series.Label.Visible = false; // series View 属性 LineSeriesView lineView = (LineSeriesView)series.View; // 线条上点的标识形状 lineView.LineMarkerOptions.Kind = MarkerKind.Circle; // 线条类型,实线,虚线 lineView.LineStyle.DashStyle = DashStyle.Solid; // 鼠标悬浮提示 lineView.LineMarkerOptions.Visible = true; // 改小圆点到最小值，就不画了 lineView.LineMarkerOptions.Size = 7; // 线条上的标识形状是否需要 lineView.LineMarkerOptions.Visible = true; }
/// <summary> /// 设置 chartControl 属性 /// </summary> /// <param name="chartControl"></param> private void SetChartControl(ChartControl chartControl, string title, string valueName, string constantLineTitle, double constantLineValue) { //Y轴坐标标题 chartControl.Dock = DockStyle.Fill; // 标题 chartControl.Titles.Clear(); ChartTitle chartTitle = new ChartTitle(); chartTitle.Text = title; chartTitle.TextColor = Color.Black; chartTitle.Font = new Font("宋体", 10); chartTitle.Dock = ChartTitleDockStyle.Right; chartTitle.Alignment = StringAlignment.Center; chartControl.Titles.Add(chartTitle); chartControl.Legend.Visible = true; // 鼠标移动悬浮窗口提示信息 ToolTipController toolTip = new ToolTipController(); chartControl.MouseMove += new MouseEventHandler((obj, arg) => { ChartHitInfo hitInfo = chartControl.CalcHitInfo(arg.Location); StringBuilder builder = new StringBuilder(); if (hitInfo.InSeriesLabel || hitInfo.InSeries || hitInfo.InTrendLine || hitInfo.InConstantLine) { if ((Series)hitInfo.Series != null) { builder.AppendLine(" 车间: " + ((Series)hitInfo.Series).Name); } } if (hitInfo.SeriesPoint != null) { builder.AppendLine(" 车组: " + hitInfo.SeriesPoint.Argument); if (!hitInfo.SeriesPoint.IsEmpty && hitInfo.SeriesPoint.Values != null && hitInfo.SeriesPoint.Values.Length > 0) builder.AppendLine(valueName + hitInfo.SeriesPoint.Values[0]); } if (builder.Length > 0) toolTip.ShowHint(title + builder.ToString(), chartControl.PointToScreen(arg.Location)); else toolTip.HideHint(); }); // 隐藏提示信息 chartControl.MouseLeave += new EventHandler((obj, arg) => { toolTip.HideHint(); }); //X轴刻度间隔设置 XYDiagram diagram = (XYDiagram)chartControl.Diagram; if (diagram == null) return; // x轴间距 diagram.AxisX.GridSpacingAuto = false; diagram.AxisX.GridSpacing = 200; // X轴滚动条 diagram.AxisX.Range.Auto = false; diagram.AxisX.Range.MinValueInternal = 1; diagram.AxisX.Range.MaxValueInternal = 14; // Y轴滚动条 diagram.EnableScrolling = true; //X轴刻度是否显示 diagram.AxisX.Tickmarks.Visible = true; // X轴文字方向 diagram.AxisX.Label.Angle = 0; diagram.AxisX.Tickmarks.MinorVisible = true; diagram.AxisX.MinorCount = 9; // 从 x 轴原点开始显示 diagram.AxisX.Range.ScrollingRange.SideMarginsEnabled = true; diagram.AxisX.Range.ScrollingRange.MinValue = 0; // 基线信息 ConstantLine cl = new ConstantLine(constantLineTitle, constantLineValue); cl.Color = Color.Red; cl.Title.TextColor = Color.Red; cl.Title.Font = new Font("宋体", 12F); diagram.AxisY.ConstantLines.Add(cl); }
2.柱状图的绘制与折线图大致一样，不同的地方在于，柱状图的每一个柱子都对应一个 series 对象，有多少个柱子就要创建多少个 series 对象
/// <summary> /// 创建山积图 /// </summary> /// <param name="table"></param> private void CreateChartControl(DataTable table) { //动态生成一个柱状图表，调用下面的静态方法 chart = new ChartControl(); //Y轴坐标标题 chart.Dock = DockStyle.Fill; chart.Legend.Visible = false; // 标题 ChartTitle chartTitle = new ChartTitle(); chartTitle.Text = "生产线工作量平衡分析"; chartTitle.TextColor = Color.Black; chartTitle.Font = new Font("宋体", 10); chartTitle.Dock = ChartTitleDockStyle.Right; chartTitle.Alignment = StringAlignment.Center; chart.Titles.Clear(); chart.Titles.Add(chartTitle); chart.RuntimeSelection = true; // 鼠标热点 chart.ObjectHotTracked += new HotTrackEventHandler(charBar_ObjectHotTracked); // 悬浮提示窗口 chart.MouseMove += new MouseEventHandler(charBar_MouseMove); // 隐藏悬浮提示窗口 chart.MouseLeave += new EventHandler(charBar_MouseLeave); for (int i = 0; i < table.Rows.Count; i++) { string name = table.Rows[i]["S_WORKORDERNAME"].ToString(); // 柱状图里的一个柱 Series series1 = new Series(name, ViewType.Bar); var p1 = new SeriesPoint(strTemp, avg); p1.Tag = name; series1.Points.Add(p1); series1.ArgumentScaleType = ScaleType.Qualitative; //柱状图显示的信息和数据 series1.PointOptions.PointView = PointView.SeriesName; BarSeriesView bsv = (BarSeriesView)series1.View; bsv.BarWidth = 1; bsv.Transparency = 5; series1.Label.Visible = false; chart.Series.Add(series1); } //X轴刻度间隔设置 XYDiagram diagram = (XYDiagram)chart.Diagram; if (diagram == null) return; diagram.AxisX.MinorCount = 80; // x轴间距 diagram.AxisX.GridSpacingAuto = false; diagram.AxisX.GridSpacing = 200; // X轴滚动条 diagram.AxisX.Range.Auto = false; // if(diagram.AxisX.Range.MaxValueInternal > diagram.AxisX.Range.MinValueInternal) diagram.AxisX.Range.MinValueInternal = 1; diagram.AxisX.Range.MaxValueInternal = 25; diagram.EnableScrolling = true; //X轴刻度是否显示 diagram.AxisX.Tickmarks.Visible = false; // X轴文字方向 diagram.AxisX.Label.Angle = 10; diagram.AxisX.Tickmarks.MinorVisible = true; diagram.AxisX.MinorCount = 9; // 从 x 轴原点开始显示 diagram.AxisX.Range.ScrollingRange.SideMarginsEnabled = true; diagram.AxisX.Range.ScrollingRange.MinValue = 0; diagram.Margins.Left = 35; // Y 轴刻度 diagram.AxisY.Range.Auto = true; //diagram.AxisY.Range.MaxValue = 80; // 创建车型单选 CreateRadioButtonForTrain(diagram); }
/// <summary> /// 鼠标移动,窗口悬浮 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void charBar_MouseMove(object sender, MouseEventArgs e) { ChartHitInfo hitInfo = charBar.CalcHitInfo(e.Location); StringBuilder builder = new StringBuilder(); if (hitInfo.SeriesPoint != null) { builder.AppendLine(" 工序名称: " + hitInfo.SeriesPoint.Tag.ToString()); if (!hitInfo.SeriesPoint.IsEmpty) builder.AppendLine(" 修时(小时): " + hitInfo.SeriesPoint.Values[0]); } if (builder.Length > 0) charBartoolTip.ShowHint("生产线工作量平衡分析 " + builder.ToString(), charBar.PointToScreen(e.Location)); else charBartoolTip.HideHint(); } /// <summary> /// 鼠标离开 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void charBar_MouseLeave(object sender, EventArgs e) { charBartoolTip.HideHint(); }
/// <summary> /// 鼠标滑过时,高亮显示 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void charBar_ObjectHotTracked(object sender, HotTrackEventArgs e) { if (e.Object is Series) e.Cancel = false; else e.Cancel = true; }
3. 相关资料
Devexpress 官网地址： https://www.devexpress.com/
Devexpress 官网文档：https://www.devexpress.com/support/documentation/