### 问题解构 针对用户提出的 C# 7.3 环境下使用 Chart 控件绘制复杂横向堆叠柱形图的需求，核心难点与逻辑拆解如下： 1. **图表类型选择**：要求“横向堆叠”，即 X 轴为数值，Y 轴为分类（时间），柱状图横向延伸。在 Chart 控件中，需使用 `StackedBar` 类型，并通过反转坐标轴实现“横向”效果，或直接使用 `Bar` 类型配合特定轴配置。 2. **时间轴处理（Y轴）**：要求 Y 轴展示“昨天早上7点到今天早上7点”。这需要动态计算时间范围，并设置 Chart 的 Y 轴为时间类型，且格式化为短时间格式（如 HH:mm）。 3. **数据绑定与分组**：数据源为 DataTable（两列：数值、状态）。由于状态可重复，需将“状态”作为分组依据，为每个状态创建一个 `Series`。 4. **堆叠逻辑**：同一时间点（Y轴位置）的不同状态数据需要在横向上依次堆叠。这要求所有状态 Series 的 X 轴对齐方式一致，且 ChartType 设为堆叠模式。 5. **交互触发**：通过 Button 点击事件触发数据加载与绘图逻辑。 ### 方案推演 1. **数据预处理**： * 从 DataTable 中读取数据。 * 提取所有唯一的“状态”值，用于动态生成 Series。 * 提取时间列，确定 Y 轴的刻度范围（Min/Max）。 2. **图表配置**： * **ChartArea**：设置 `AxisY` 为时间轴，`AxisX` 为数值轴。为了实现“横向”效果（时间在垂直方向），通常使用 `Bar` 图表类型，其默认 Y 轴为分类/时间轴，X 轴为数值轴，符合需求。 * **Series**：遍历唯一状态，为每个状态创建一个 Series。设置 `ChartType = SeriesChartType.StackedBar`（堆叠条形图）。根据状态分配不同的颜色。 * **数据点绑定**：遍历 DataTable，根据状态找到对应的 Series，将数据点（数值，时间）添加进去。 3. **技术细节修正**： * 标准的 `StackedBar` 是垂直堆叠的。若要“横向堆叠”，在 .NET Chart 中通常指 `StackedBar`（柱子是横向的，Y轴是分类）。如果用户指的是“垂直堆叠但时间在横轴”，则用 `StackedColumn`。根据描述“Y轴为时间”，这明确指向 `StackedBar`。 * **时间轴设置**：必须设置 `AxisY.LabelStyle.Format = "HH:mm"` 以及 `IntervalType = DateTimeIntervalType.Hours` 以保证时间显示正确 [ref_5]。 ### 具体代码实现 以下代码基于 WinForm 环境，假设已存在一个 `Chart` 控件（名为 `chart1`）和一个 `Button` 控件（名为 `btnDraw`）。 ```csharp using System; using System.Data; using System.Drawing; using System.Windows.Forms; using System.Windows.Forms.DataVisualization.Charting; namespace ChartApp { public partial class MainForm : Form { public MainForm() { InitializeComponent(); } private void btnDraw_Click(object sender, EventArgs e) { // 1. 准备模拟数据 (DataTable: 数值, 状态, 时间) // 实际场景中，这里应是从数据库或业务逻辑获取的真实 DataTable DataTable dt = new DataTable(); dt.Columns.Add("Value", typeof(double)); dt.Columns.Add("Status", typeof(string)); dt.Columns.Add("Time", typeof(DateTime)); DateTime yesterday7AM = DateTime.Today.AddDays(-1).AddHours(7); Random rnd = new Random(); // 模拟生成数据：不同时间点，不同状态 for (int i = 0; i < 24; i++) { DateTime currentTime = yesterday7AM.AddHours(i); // 模拟每个时间点可能有多个状态的数据（堆叠效果） dt.Rows.Add(rnd.NextDouble() * 10, "运行中", currentTime); dt.Rows.Add(rnd.NextDouble() * 5, "待机", currentTime); if (i % 3 == 0) dt.Rows.Add(rnd.NextDouble() * 2, "故障", currentTime); } // 2. 初始化图表控件 BindStackedBarChart(dt); } private void BindStackedBarChart(DataTable dt) { // 清空现有图表数据 chart1.Series.Clear(); chart1.ChartAreas.Clear(); chart1.Legends.Clear(); // 创建图表区域 ChartArea chartArea = new ChartArea("DefaultArea"); chart1.ChartAreas.Add(chartArea); // 配置 Y 轴（时间轴） // 横向条形图 (Bar) 的 Y 轴是分类/时间轴，X 轴是数值轴 chartArea.AxisY.LabelStyle.Format = "HH:mm"; // 时间显示格式 [ref_5] chartArea.AxisY.IntervalType = DateTimeIntervalType.Hours; // 刻度间隔类型 chartArea.AxisY.Interval = 1; // 每小时一个刻度 chartArea.AxisY.LabelStyle.Angle = -45; // 标签倾斜以防重叠 // 配置 X 轴（数值轴） chartArea.AxisX.Title = "数值 (堆叠总量)"; chartArea.AxisX.LabelStyle.Format = "0.0"; // 3. 动态生成 Series (按状态分组) // 获取所有唯一状态 var distinctStatuses = dt.AsEnumerable().Select(row => row.Field<string>("Status")).Distinct().ToList(); // 预定义颜色池 Color[] colors = new Color[] { Color.Green, Color.Blue, Color.Red, Color.Orange, Color.Purple }; int colorIndex = 0; foreach (var status in distinctStatuses) { Series series = new Series(status); series.ChartType = SeriesChartType.StackedBar; // 关键：设置为堆叠条形图 [ref_6] // 分配颜色 if (colorIndex < colors.Length) { series.Color = colors[colorIndex]; } else { series.Color = Color.FromArgb(rnd.Next(256), rnd.Next(256), rnd.Next(256)); } colorIndex++; // 绑定数据 // 筛选当前状态的所有数据行 var rows = dt.AsEnumerable().Where(r => r.Field<string>("Status") == status); foreach (var row in rows) { double val = row.Field<double>("Value"); DateTime time = row.Field<DateTime>("Time"); // 添加数据点：X轴为数值，Y轴为时间 // 注意：对于横向条形图，AddXY(xVal, yVal) 中 yVal 对应 Y 轴（时间） series.Points.AddXY(val, time); } chart1.Series.Add(series); } // 4. 设置图例 Legend legend = new Legend(); chart1.Legends.Add(legend); legend.Docking = Docking.Bottom; // 图例位置 // 5. 刷新图表 chart1.Invalidate(); } } } ``` ### 关键实现步骤解析 | 步骤 | 操作内容 | 对应代码/属性 | 说明 | | :--- | :--- | :--- | :--- | | **1. 时间轴配置** | 设置 Y 轴为时间类型 | `AxisY.LabelStyle.Format = "HH:mm"`<br>`AxisY.IntervalType = DateTimeIntervalType.Hours` | 确保 Y 轴正确显示“昨天7点”到“今天7点”的时间序列，并按小时分隔 [ref_5]。 | | **2. 图表类型** | 选择横向堆叠图 | `SeriesChartType.StackedBar` | `StackedBar` 默认 Y 轴为分类轴，X 轴为数值轴，符合“Y轴为时间”的横向布局需求。若使用 `StackedColumn` 则时间会在 X 轴 [ref_6]。 | | **3. 状态分组** | 动态创建 Series | 遍历 `distinctStatuses` | 为每个不同的状态创建独立的 Series，这是实现“不同状态不同颜色”和“堆叠”的前提。 | | **4. 数据点绑定** | 填充数据 | `series.Points.AddXY(val, time)` | 将数值映射到 X 轴，时间映射到 Y 轴。相同时间点的数据会自动在 X 轴方向上根据 Series 顺序堆叠。 | | **5. 视觉优化** | 颜色与图例 | `series.Color`<br>`Legend` | 为不同状态分配颜色，并添加图例以便用户区分不同颜色的含义。 | ### 补充说明 * **数据源处理**：代码中使用了 LINQ 对 DataTable 进行分组和筛选，这是处理“重复状态”数据最高效的方式。如果数据量极大，建议在数据库层面完成分组统计。 * **对齐问题**：在堆叠图中，确保所有 Series 的数据点（特别是时间点）能够正确对齐至关重要。通过直接将 DateTime 对象作为 Y 轴值传递，Chart 控件会自动处理时间轴的对齐逻辑 [ref_1]。 * **滚动与缩放**：如果时间跨度较大（例如超过24小时），可以启用 ChartArea 的 `CursorX` 和 `CursorY` 属性来实现滚动条和缩放功能，提升用户体验 [ref_3]。 该方案完整实现了从数据源加载、时间轴配置、状态颜色区分到横向堆叠绘制的全过程，可直接应用于 C# WinForm 开发场景。