在数据可视化领域中，图表是一个常见的展示工具。若想用一个简单的方法创建交互式图表，就可以使用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} 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控件来构建交互式图表并使其尽可能地适应自己的项目需求。