DevExpress WinForms使用教程：Diagram Control

<think>我们正在使用DevExpress的ChartControl控件来绘制范围条形图（Range Bar）。范围条形图通常用于表示一个范围，例如时间范围、温度范围等，每个条形有两个值（起点和终点）。 根据DevExpress文档，范围条形图属于Range系列。我们可以通过创建Series并设置其View为RangeBarSeriesView来实现。 步骤： 1. 创建ChartControl控件（如果已存在则跳过）。 2. 创建两个Series对象，并设置其View为RangeBarSeriesView（注意：范围条形图需要两个值，即起点和终点，因此数据点需要两个数值）。 3. 设置数据源，每个数据项应包含两个数值（例如，LowValue和HighValue）以及一个类别（如Category）。 4. 将系列添加到ChartControl的Series集合中。 5. 配置坐标轴（通常横轴为数值轴，纵轴为类别轴，但也可以根据需求调整）。 6. 添加标题等其他元素。 参考示例代码： 注意：以下代码是WinForms环境的示例。 ```csharp using DevExpress.XtraCharts; // 假设我们有一个ChartControl实例chartControl1 chartControl1.Series.Clear(); // 创建一个系列 Series series1 = new Series("Series 1", ViewType.RangeBar); // 设置数据源（这里使用匿名类型，实际中可以使用自定义类型） series1.DataSource = new[] { new { Category = "A", LowValue = 10, HighValue = 20 }, new { Category = "B", LowValue = 15, HighValue = 25 }, new { Category = "C", LowValue = 5, HighValue = 15 } }; // 设置数据绑定 series1.ArgumentScaleType = ScaleType.Qualitative; series1.ArgumentDataMember = "Category"; // 类别数据成员 // 范围条形图需要两个值：低值和高值 series1.ValueScaleType = ScaleType.Numerical; series1.ValueDataMembers.AddRange(new string[] { "LowValue", "HighValue" }); // 设置视图类型为RangeBar RangeBarSeriesView view = (RangeBarSeriesView)series1.View; // 可以设置一些视图属性，例如条形方向（水平或垂直） view.BarWidth = 0.5; // 设置条形宽度 // 将系列添加到图表 chartControl1.Series.Add(series1); // 配置坐标轴 // 默认情况下，横轴是数值轴，纵轴是类别轴。但范围条形图通常是水平条形，所以数值轴在横轴（X轴），类别在纵轴（Y轴）。 // 如果需要垂直条形图，可以调整坐标轴的方向，但通常范围条形图是水平的。 // 设置图表标题 ChartTitle chartTitle1 = new ChartTitle(); chartTitle1.Text = "范围条形图示例"; chartControl1.Titles.Add(chartTitle1); // 刷新图表 chartControl1.RefreshData(); chartControl1.Refresh(); ``` 注意：如果希望条形垂直显示，可以考虑使用RangeBarSeriesView的Transposed属性，或者交换坐标轴。但通常范围条形图是水平条形（即类别在Y轴，数值在X轴）。在DevExpress中，默认情况下，对于RangeBar系列，数值轴是横轴（X轴），类别轴是纵轴（Y轴）。如果你希望交换，可以设置： view.Transposed = true; // 这将使条形变为垂直方向（数值轴变为Y轴，类别轴变为X轴） 另外，如果数据源中的两个值不是LowValue和HighValue，而是其他属性名，请相应修改ValueDataMembers。 以上代码创建了一个简单的范围条形图。根据实际需求，可能还需要设置图例、标签、颜色等。 参考文档： [DevExpress Chart Control - Range Bar Series View](https://docs.devexpress.com/WindowsForms/DevExpress.XtraCharts.RangeBarSeriesView?p=netframework) [DevExpress Chart Control - Series](https://docs.devexpress.com/WindowsForms/DevExpress.XtraCharts.Series?p=netframework) 如果遇到问题，请检查DevExpress的版本，并确保引用了正确的程序集。 引用[^1]中提到了如何添加图表标题，我们在代码中也使用了类似方法。 根据引用[^3]，可以访问DevExpress官网文档获取更多信息。 注意：上述代码是基础示例，实际应用中可能需要根据具体需求调整。</think>### DevExpress ChartControl 绘制范围条形图（Range Bar）指南 范围条形图（Range Bar）用于表示数据范围（如温度范围、价格区间等），每个条形显示起始值和结束值。在 DevExpress 中可通过以下步骤实现： #### 核心步骤 1. **创建数据模型** 定义包含范围值的数据结构： ```csharp public class RangeData { public string Category { get; set; } // 类别名称 public double StartValue { get; set; } // 起始值 public double EndValue { get; set; } // 结束值 } ``` 2. **准备数据源** ```csharp List<RangeData> data = new List<RangeData> { new RangeData { Category = "产品A", StartValue = 15, EndValue = 35 }, new RangeData { Category = "产品B", StartValue = 20, EndValue = 45 }, new RangeData { Category = "产品C", StartValue = 10, EndValue = 30 } }; ``` 3. **配置图表系列** ```csharp Series series = new Series("销售范围", ViewType.RangeBar); series.DataSource = data; series.ArgumentDataMember = "Category"; // 绑定类别字段 series.ValueDataMembers.AddRange("StartValue", "EndValue"); // 绑定范围值 chartControl1.Series.Add(series); ``` 4. **调整视图属性** ```csharp RangeBarSeriesView view = (RangeBarSeriesView)series.View; view.BarWidth = 0.6; // 设置条形宽度 view.Transposed = true; // 水平显示条形（默认垂直） ``` 5. **添加图表标题**（引用[^1]） ```csharp ChartTitle chartTitle = new ChartTitle(); chartTitle.Text = "产品销售范围分析"; chartControl1.Titles.Add(chartTitle); ``` #### 完整示例代码 ```csharp // 初始化图表 chartControl1.DataSource = data; chartControl1.SeriesTemplate.View = new RangeBarSeriesView(); // 创建系列 Series series = new Series("数据范围", ViewType.RangeBar); series.DataSource = data; series.ArgumentDataMember = "Category"; series.ValueDataMembers.AddRange("StartValue", "EndValue"); // 配置视图 RangeBarSeriesView view = (RangeBarSeriesView)series.View; view.ColorEach = true; // 每个条形不同颜色 view.BarWidth = 0.5; // 添加坐标轴标签 chartControl1.Diagram.XYDiagram.AxisX.Title.Text = "产品类别"; chartControl1.Diagram.XYDiagram.AxisY.Title.Text = "数值范围"; // 添加标题（引用[^1]） ChartTitle title = new ChartTitle { Text = "范围条形图示例" }; chartControl1.Titles.Add(title); chartControl1.Series.Add(series); ``` #### 关键配置说明 1. **数据绑定** - `ArgumentDataMember` 绑定分类轴（通常为Y轴） - `ValueDataMembers` 需绑定**两个数值字段**（起始/结束值） 2. **方向控制** - `view.Transposed = true`：水平条形（默认垂直） - 坐标轴可通过 `XYDiagram.AxisX` 和 `AxisY` 调整 3. **样式优化** ```csharp // 设置条形颜色 view.FillStyle.FillMode = FillMode.Solid; ((SolidFillOptions)view.FillStyle.Options).Color = Color.SteelBlue; // 添加数据标签 view.Label.TextPattern = "{S}: {V1}-{V2}"; ``` #### 效果说明 最终将生成类似下图的效果：  *(图片来源：DevExpress官方文档[^2])* > **提示**：更多高级功能（如动画、3D效果）可参考[DevExpress官方文档](https://docs.devexpress.com/WindowsForms/DevExpress.XtraCharts.RangeBarSeriesView)[^3]。