DevExpress 控件快速上手之 ChartControl：XYDiagram2D（折线图）

▪ 前言

DevExpress 中有一个专门用来绘制图表的插件 ChartControl，可以绘制折线图、饼状图、柱状图等图表。这篇文章将介绍如何快速上手 XYDiagram2D（折线图） 的使用方法。

动态创建，顾名思义就是利用 C# 创建一个折线图。
相对于动态，还有一个是静态创建，简单讲静态创建就是直接在 xaml 里编写折线图的代码，其好处就是可以直接利用 VS2015 的工具箱和属性进行可视化拖拽修改，方便快捷。

但是出于灵活性和重用性的考虑，推荐使用动态创建；本文也将全部采用动态创建的方式来构建折线图。

▪ Demo 01

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-04gRBESP-1608164152666)(http://note.youdao.com/yws/api/personal/file/5217FFF3642744E0A2D3904DB00E47A4?method=download&shareKey=f715e6b3f49ff93d162a7f6cf51c1c3a)]

CS 代码

// 初始化
Random random = new Random();

// 初始化
LineSeries2D diagramSerie;
SeriesPointCollection seriesPointCollection = new SeriesPointCollection();
ContinuousNumericScaleOptions continuousNumericScaleOptions;

// 初始化 XYDiagram2D（折线图）对象
XYDiagram2D diagram = new XYDiagram2D();


// X 轴的配置
diagram.AxisX = new AxisX2D();
//diagram.AxisX.Title = new AxisTitle() { Content = "X轴" };

diagram.AxisX.MinorCount = 2;  // X 轴值的小标段个数
diagram.AxisX.GridLinesMinorVisible = true;  // X 轴的小标段网格线显示

diagram.AxisX.GridLinesVisible = true;  // X 轴的大标段网格线显示

diagram.AxisX.WholeRange = new Range();
diagram.AxisX.WholeRange.MinValue = 0;  // X 轴的最小值
diagram.AxisX.WholeRange.MaxValue = 100;  // X 轴的最大值
diagram.AxisX.WholeRange.SideMarginsValue = 0;  // X 轴的扩展值，比如Y轴值范围：0～100，而这个字段如果设置为5，那么X轴值将变为：-5～105
            
continuousNumericScaleOptions = new ContinuousNumericScaleOptions();
continuousNumericScaleOptions.AutoGrid = false;  // 如果需要自定义 NumericScaleOptions，那么尽量关闭网格自动布局
continuousNumericScaleOptions.GridSpacing = 20;  // X 轴的大标段值，该值结合 MaxValue 可以算出大标段的数量：MaxValue÷GridSpacing
continuousNumericScaleOptions.GridAlignment = 1;  // X 轴的大标段合并计数，默认值为 1
diagram.AxisX.NumericScaleOptions = continuousNumericScaleOptions;


// Y 轴的配置
diagram.AxisY = new AxisY2D();
//diagram.AxisY.Title = new AxisTitle() { Content = "Y轴" };

diagram.AxisY.MinorCount = 1;  // Y 轴的小标段个数
diagram.AxisY.TickmarksMinorVisible = true;  // Y 轴的小标段显示
diagram.AxisY.GridLinesMinorVisible = true;  // Y 轴的小标段网格线显示

diagram.AxisY.Label = new AxisLabel();  // Y 轴的大标段标签对象
diagram.AxisY.Label.Visible = true;  // Y 轴的大标段标签显示（默认：true）
diagram.AxisY.GridLinesVisible = true;  // Y 轴的大标段网格线显示

diagram.AxisY.WholeRange = new Range();
diagram.AxisY.WholeRange.MinValue = -10;  // Y 轴的最小值
diagram.AxisY.WholeRange.MaxValue = 10;  // Y 轴的最大值
diagram.AxisY.WholeRange.SideMarginsValue = 0;  // Y 轴的扩展值，比如Y轴值范围：0～100，而这个字段如果设置为5，那么Y轴值将变为：-5～105

continuousNumericScaleOptions = new ContinuousNumericScaleOptions();
continuousNumericScaleOptions.AutoGrid = false;  // 如果需要自定义 NumericScaleOptions，那么尽量关闭网格自动布局
continuousNumericScaleOptions.GridSpacing = 1;  // Y 轴的大标段值，该值结合 MaxValue 可以算出大标段的数量：MaxValue÷GridSpacing
continuousNumericScaleOptions.GridAlignment = 1;  // Y 轴的大标段合并计数，默认值为 1
diagram.AxisY.NumericScaleOptions = continuousNumericScaleOptions;


// 创建一条连续的折线
diagramSerie = new LineSeries2D();
diagramSerie.CrosshairEnabled = false;  // 关闭鼠标移动上去时显示的瞄准线

// for( int i = 0; i <= 100; i++ ) diagramSerie.Points.Add(new SeriesPoint(i,random.Next(-10,11)));  // 生成 100个（X轴） 0～10 随机值（Y轴）的点

for( int i = 0; i <= 100; i++ ) seriesPointCollection.Add(new SeriesPoint(i,random.Next(-10,11)));  // 生成 100个（X轴） 0～10 随机值（Y轴）的点
diagramSerie.Points.AddRange(seriesPointCollection);

diagram.Series.Add(diagramSerie);


/*
// 设置图表主题：黑色
diagram.DefaultPane = new Pane();
diagram.DefaultPane.DomainBrush = new SolidColorBrush(Color.FromRgb(0,0,0));  // 主图表区域背景

//diagram.AxisX.Brush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#33FFFFFF"));  // X 轴分段线颜色
//diagram.AxisY.Brush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#33FFFFFF"));  // Y 轴分段线颜色

uiChart.Background = new SolidColorBrush(Color.FromRgb(0,0,0));  // 整体图表区域背景
uiChart.BorderBrush = new SolidColorBrush(Color.FromRgb(0,0,0));  // 整体图表区域边框
*/

// 赋值图表
uiChart.Diagram = diagram;

Series 中的每一项代表一条折线，如果一个图标里有多条折线，那么继续 diagram.Series.Add(); 增加即可。

XAML 代码：

<dxc:ChartControl x:Name="uiChart" Width="800" Height="400">
    <!-- 预留一个元素，能提升动态构建图表时的初始化速度 -->
    <dxc:XYDiagram2D Visibility="Hidden" />
</dxc:ChartControl>