在数据可视化领域中，图表是一个常见的展示工具。若想用一个简单的方法创建交互式图表，就可以使用DevExpress框架中最常用的控件之一——ChartControl。

本文将会为开发人员详细介绍如何使用ChartControl控件来创建交互式图表。

1.使用DevExpress图表控件之前需要做哪些准备？

在使用ChartControl之前我们需要安装DevExpress的WinForms插件。同时我们需要定义一个图表控件。安装好DLL文件之后，在设计工具箱里面我们可以找到DevExpress中的控件。

图1：DevExpress组件中的ChartControl控件

2.ChartControl控件的主要部分是什么？

ChartControl控件包含以下主要部分：

系列系列是数据的集合，其有以下许多类型，如：LineSeriesView, StockSeriesView和SplineSeriesView。当我们向控件中添加多个系列时，他们将出现在图表上的同一区域中。

图例图例是图表的关键部分之一。它可以标识出每个系列的名称，方便用户查看每个系列所表示的含义。

轴轴是用来显示数据的，ChartControl支持X轴、Y轴、Z轴。对于每个轴，我们可以设置标签、范围、间距等属性。

另外，还有其他的属性，比如背景色、边框、区域颜色、区域边框、指示线等等。

图2 ChartControl控件

3.ChartControl控件如何在代码中构建？

步骤1：添加控件

在DevExpress中，我们通过拖拉控件的方式添加ChartControl控件(图3)。

图3 ChartControl控件的添加

步骤2：为ChartControl控件添加一个基础系列

为了添加一个系列到图表控件内，我们可以使用Series类。

```csharp

Series s = new Series("Series1", ViewType.Line);

chartControl1.Series.Add(s);

```

步骤3：为ChartControl控件添加数据点

我们可以使用以下代码来向基础系列中添加数据点。

```csharp

s.Points.Add(new SeriesPoint(1, 3));

s.Points.Add(new SeriesPoint(2, 4));

s.Points.Add(new SeriesPoint(3, 2));

```

步骤4：为ChartControl控件添加一个轴

可以使用两种方法来添加轴。

```csharp

//方法一

chartControl1.Series[0].ArgumentScaleType = ScaleType.Numerical;

chartControl1.Series[0].ValueScaleType = ScaleType.Numerical;

//方法二

XYDiagram diagram = (XYDiagram)chartControl1.Diagram;

diagram.AxisX.WholeRange.Auto = false;

diagram.AxisX.WholeRange.StartSideMargin = 0;

diagram.AxisX.WholeRange.EndSideMargin = 0;

```

最后，我们得到的效果如下图所示。

图4：ChartControl控件简单示例

4.ChartControl控件的更高级操作

添加数据源

先为ChartControl控件添加数据源。

```csharp

//添加数据源

DataTable table = new DataTable("Table1");

//添加数据

table.Columns.Add("Year", typeof(DateTime));

table.Columns.Add("Sales", typeof(decimal));

table.Rows.Add(new object[] { new DateTime(2015, 1, 1), 3541 });

table.Rows.Add(new object[] { new DateTime(2016, 1, 1), 4132 });

table.Rows.Add(new object[] { new DateTime(2017, 1, 1), 5773 });

table.Rows.Add(new object[] { new DateTime(2018, 1, 1), 7111 });

table.Rows.Add(new object[] { new DateTime(2019, 1, 1), 8170 });

table.Rows.Add(new object[] { new DateTime(2020, 1, 1), 10022 });

```

使用数据源

给ChartControl控件添加数据：

```csharp

//添加数据，指定x轴和y轴

Series s1 = new Series("Sales", ViewType.Line);

s1.ArgumentDataMember = "Year";

s1.ValueDataMembers.AddRange("Sales");

s1.DataSource = table;

ChartControl1.Series.Add(s1);

```

自定义样式

修改ChartControl控件的样式可以在设计时或者在运行时编码时实现。比如：

```csharp

//修改样式

s1.LabelsVisibility = DevExpress.Utils.DefaultBoolean.True;

s1.LegendText = "Sales by Year";

s1.ToolTipPointPattern = "Year: {S}\n Sales: {V}";

```

添加图例

调整图例的样式。

```csharp

//添加图例

Legend legend = new Legend();

ChartControl1.Legends.Add(legend);

legend.Title.Text = "Sales";

legend.AlignmentHorizontal = LegendAlignmentHorizontal.Center;

legend.AlignmentVertical = LegendAlignmentVertical.Bottom;

```

图5：ChartControl控件示例代码及效果

5.其他高级操作

删除系列：

```csharp

//删除基础系列

chartControl1.Series[0].Dispose();

chartControl1.Series.Remove(chartControl1.Series[0]);

```

临时隐藏系列：

```csharp

//临时隐藏基础系列

if (chartControl1.Series[0].Visible)

{

chartControl1.Series[0].Visible = false;

}

else

{

chartControl1.Series[0].Visible = true;

}

```

6.结论

通过使用ChartControl控件，我们可以轻松地创建交互式的图表，而且还可以使用许多高级功能来优化图表。不仅如此，控件还提供了丰富的事件，可以响应用户对图表的操作。

本文对ChartControl控件的基本操作以及更高级的用法进行了介绍。我相信，读者能够了解如何使用ChartControl控件来构建交互式图表并使其尽可能地适应自己的项目需求。