DevExpress 折线图和柱状图的绘制与数据绑定

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, "检修量统计分析\n\n", " 修时(天): ", "平均修时:" + 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 = ;
// 线条上的标识形状是否需要
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("宋体", );
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 > )
builder.AppendLine(valueName + hitInfo.SeriesPoint.Values[]);
}
if (builder.Length > )
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 = ;
// X轴滚动条
diagram.AxisX.Range.Auto = false;
diagram.AxisX.Range.MinValueInternal = ;
diagram.AxisX.Range.MaxValueInternal = ;
// Y轴滚动条
diagram.EnableScrolling = true;
//X轴刻度是否显示
diagram.AxisX.Tickmarks.Visible = true;
// X轴文字方向
diagram.AxisX.Label.Angle = ;
diagram.AxisX.Tickmarks.MinorVisible = true;
diagram.AxisX.MinorCount = ;
// 从 x 轴原点开始显示
diagram.AxisX.Range.ScrollingRange.SideMarginsEnabled = true;
diagram.AxisX.Range.ScrollingRange.MinValue = ;
// 基线信息
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("宋体", );
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 = ; 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 = ;
bsv.Transparency = ;
series1.Label.Visible = false;
chart.Series.Add(series1);
} //X轴刻度间隔设置
XYDiagram diagram = (XYDiagram)chart.Diagram;
if (diagram == null)
return;
diagram.AxisX.MinorCount = ;
// x轴间距
diagram.AxisX.GridSpacingAuto = false;
diagram.AxisX.GridSpacing = ;
// X轴滚动条
diagram.AxisX.Range.Auto = false;
// if(diagram.AxisX.Range.MaxValueInternal > diagram.AxisX.Range.MinValueInternal)
diagram.AxisX.Range.MinValueInternal = ;
diagram.AxisX.Range.MaxValueInternal = ;
diagram.EnableScrolling = true;
//X轴刻度是否显示
diagram.AxisX.Tickmarks.Visible = false;
// X轴文字方向
diagram.AxisX.Label.Angle = ;
diagram.AxisX.Tickmarks.MinorVisible = true;
diagram.AxisX.MinorCount = ;
// 从 x 轴原点开始显示
diagram.AxisX.Range.ScrollingRange.SideMarginsEnabled = true;
diagram.AxisX.Range.ScrollingRange.MinValue = ;
diagram.Margins.Left = ;
// 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[]);
}
if (builder.Length > )
charBartoolTip.ShowHint("生产线工作量平衡分析 \n\n" + 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/
上一篇:深入浅出ECharts系列 (二) 折线图


下一篇:AFNetworking 3.0 断点续传 使用记录