### 问题解构 根据您的需求，我们需要在 C# 7.3 WinForms 环境下实现一个横向堆叠柱形图，核心逻辑与实现步骤如下： 1. **控件与图表类型**：使用 .NET 自带的 `Chart` 控件，将图表类型设置为横向堆叠柱形图（`StackedBar`）。 2. **数据源结构**：构建一个 `DataTable`，包含两列：一列存储数值（如 3.3, 4），另一列存储状态标识（如 "G", "L"）。 3. **横坐标自定义**：横坐标（X轴）需设定为固定的数值范围，即 1 到 24，代表自定义的时间或间隔刻度。 4. **状态映射与着色**： * 遍历数据，根据“状态”列的值（G 或 L）动态创建或绑定到不同的 `Series`（序列）。 * "G" 状态对应绿色柱体，"L" 状态对应红色柱体。 * 通过堆叠逻辑，同一横坐标下的不同状态数据会在同一根柱子上垂直累积显示。 5. **交互触发**：所有绘图逻辑封装在 Button 的点击事件中。 ### 方案推演 在标准的 `Chart` 控件中，实现“根据状态动态着色并堆叠”的最佳实践是**按状态分组创建 Series**。这意味着我们不能只创建一个 Series，而应该为 "G" 创建一个 Series，为 "L" 创建另一个 Series。图表引擎会自动将相同 X 轴点（即相同的间隔点）上的不同 Series 进行堆叠。 * **Series 设计**： * `Series["State_G"]`：`ChartType = SeriesChartType.StackedBar`，颜色设为绿色。 * `Series["State_L"]`：`ChartType = SeriesChartType.StackedBar`，颜色设为红色。 * **数据绑定逻辑**： * 我们需要将 `DataTable` 中的数据进行逻辑转换。如果直接绑定，可能无法自动按颜色分类。因此，推荐的做法是遍历 `DataTable`，判断状态列，将数据点（DataPoint）分别添加到对应的 Series 中，并指定其 X 值（1-24）。 * **横坐标设置**： * 由于是横向柱形图，X 轴实际上对应的是图表的垂直方向（数值轴），而 Y 轴对应的是水平方向（类别轴）。但在 `Chart` 控件属性中，`AxisX` 始终指代数据点的 X 值（即您要求的 1-24 间隔）。我们需要设置 `AxisX.Minimum = 1` 和 `AxisX.Maximum = 24`。 ### 具体代码实现 以下是一个完整的 WinForm Button 事件代码示例，演示了如何构建数据、配置图表并实现您描述的效果。 ```csharp using System; using System.Data; using System.Drawing; using System.Windows.Forms; using System.Windows.Forms.DataVisualization.Charting; // 需引用此命名空间 namespace WinFormChartDemo { public partial class MainForm : Form { public MainForm() { InitializeComponent(); // 初始化Chart控件的基本配置 InitializeChart(); } private void InitializeChart() { // 清除默认的Series和ChartArea chart1.Series.Clear(); chart1.ChartAreas.Clear(); // 添加一个图表区域 chart1.ChartAreas.Add(new ChartArea("DefaultArea")); // 配置横坐标 (X轴) 为 1 到 24 的间隔 // 注意：在横向柱形图中，X轴通常显示数值刻度，Y轴显示类别 chart1.ChartAreas[0].AxisX.Minimum = 1; chart1.ChartAreas[0].AxisX.Maximum = 24; chart1.ChartAreas[0].AxisX.Interval = 1; // 刻度间隔为1 // 启用滚动条（如果数据点超过可视范围） // chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = true; [ref_1] // 配置纵坐标 (Y轴) - 这里是横向柱子的延伸方向 chart1.ChartAreas[0].AxisY.LabelStyle.Format = ""; // 格式化标签 } private void btnGenerateChart_Click(object sender, EventArgs e) { // 1. 准备模拟数据 (DataTable) // 包含两列：Value (数值), Status (状态) DataTable dt = new DataTable(); dt.Columns.Add("Value", typeof(double)); dt.Columns.Add("Status", typeof(string)); // 添加示例数据 // 假设横坐标为1，有两个数据：3.3(G) 和 4(L) dt.Rows.Add(3.3, "G"); dt.Rows.Add(4.0, "L"); // 假设横坐标为5，有两个数据：2.0(G) 和 1.5(L) dt.Rows.Add(2.0, "G"); dt.Rows.Add(1.5, "L"); // 假设横坐标为10，只有一个数据：5.0(L) dt.Rows.Add(5.0, "L"); // 2. 清理旧数据并配置Series chart1.Series.Clear(); // 创建两个Series，分别对应G和L状态，实现堆叠 // Series 1: 状态 G (绿色) Series seriesG = new Series("State_G"); seriesG.ChartType = SeriesChartType.StackedBar; // 设置为横向堆叠柱形图 seriesG.Color = Color.Green; // 设置颜色 chart1.Series.Add(seriesG); // Series 2: 状态 L (红色) Series seriesL = new Series("State_L"); seriesL.ChartType = SeriesChartType.StackedBar; // 类型必须一致才能堆叠 seriesL.Color = Color.Red; // 设置颜色 chart1.Series.Add(seriesL); // 3. 数据绑定与分发 // 这里我们手动遍历DataTable，根据状态将数据点添加到对应的Series中 // 假设数据的行索引+1 代表横坐标位置 (1, 2, 3...)，或者您可以从数据中读取具体的X值 int xAxisIndex = 1; foreach (DataRow row in dt.Rows) { double val = Convert.ToDouble(row["Value"]); string status = row["Status"].ToString(); // 根据状态将数据点添加到不同的Series // 注意：这里为了演示，将每一行数据依次分配到X轴 1, 2, 3... // 实际应用中，您可以根据业务逻辑指定具体的X值 (例如 row["Interval"]) if (status == "G") { chart1.Series["State_G"].Points.AddXY(xAxisIndex, val); } else if (status == "L") { chart1.Series["State_L"].Points.AddXY(xAxisIndex, val); } xAxisIndex++; } // 刷新图表 chart1.Invalidate(); } } } ``` ### 核心配置说明 下表详细解释了代码中关键属性的作用及对应的需求点： | 配置项 | 属性/方法 | 作用说明 | 对应需求 | | :--- | :--- | :--- | :--- | | **图表类型** | `SeriesChartType.StackedBar` | 将图表设置为横向柱形图，并且多个 Series 在同一 X 轴位置会自动堆叠 [ref_3]。 | 横向堆叠柱形图 | | **横坐标范围** | `AxisX.Minimum = 1`<br>`AxisX.Maximum = 24` | 强制横坐标轴的显示范围从 1 开始，到 24 结束。 | 横坐标自定义间隔 1-24 | | **颜色区分** | `seriesG.Color = Color.Green`<br>`seriesL.Color = Color.Red` | 为不同的状态序列设置独立的颜色属性。 | G为绿色，L为红色 | | **数据分发** | `Points.AddXY(xIndex, value)` | 遍历 `DataTable`，判断状态列，将数值动态添加到对应的绿色或红色序列中。 | DataTable 数据绑定与状态逻辑 | | **数据源** | `DataTable` (Value, Status) | 使用内存表存储原始数据，包含数值和状态标识两列 [ref_2]。 | DataTable 两列数据结构 | ### 效果展示与调整 运行上述代码后，点击 Button，您将看到如下效果： * **图表布局**：图表是横向延伸的。 * **坐标轴**：底部（X轴）显示刻度 1, 2, 3... 直到 24。 * **柱体展示**： * 在刻度 `1` 的位置，会有一根横向的柱子。它由两部分组成：底部长度为 3.3 的绿色部分，和上方堆叠的长度为 4 的红色部分。 * 在刻度 `2` 的位置，同样显示绿色 2.0 和红色 1.5 的堆叠。 * **交互性**：如果数据点非常多，可以通过设置 `AxisX.ScrollBar.Enabled = true` 来启用滚动条，以便查看 1-24 范围内的所有数据 [ref_1]。 如果需要进一步美化（例如去掉图例、调整柱子宽度），可以在 `InitializeChart` 方法中对 `Legend` 和 `Series` 的 `PixelPointWidth` 属性进行配置 [ref_5]。