Winforms中Chart控件动态添加单列垂直ChartAreas并实现自动滚动咨询

1. 前置容器配置 #

你需要先为Chart控件嵌套一个支持滚动的外层容器，以实现超出高度时的滚动效果：

• 向窗体添加一个Panel控件，设置属性如下：
  • Dock = DockStyle.Fill
  • AutoScroll = true
• 将原有Chart控件移入该Panel内，设置Chart的属性如下：
  • Dock = DockStyle.None
  • Anchor = AnchorStyles.Left | AnchorStyles.Top | AnchorStyles.Right
  • 初始宽度设为panel.ClientSize.Width，保证宽度占满父容器

2. 核心逻辑修改 #

你原有代码出现布局异常的原因是Chart默认会将所有ChartArea压缩适配控件当前高度，数量超过3个时高度被挤压到阈值以下就会出现重叠、变形问题，建议放弃默认的自动布局规则，改为手动计算每个ChartArea的尺寸和位置。

固定参数配置（可根据需求自行调整数值） #

// 单个ChartArea的高度（像素）
private const int SingleChartAreaHeight = 180;
// ChartArea之间的垂直间距（像素）
private const int ChartAreaMargin = 20;
// Chart上下边距（像素）
private const int ChartPadding = 10;

优化后的AddChartArea方法 #

private void AddChartArea(int index)
{
    string chartAreaName = index.ToString();
    var newArea = chart.ChartAreas.Add(chartAreaName);
    // 关闭自动布局，手动控制尺寸
    newArea.Position.Auto = false;
    newArea.InnerPlotPosition.Auto = false;
    // 宽度占满Chart的可用宽度，左右留少量边距
    newArea.Position.X = 2;
    newArea.Position.Width = 96;
    newArea.InnerPlotPosition.X = 5;
    newArea.InnerPlotPosition.Width = 94;

    var newSeries = new Series();
    chart.Series.Add(newSeries);
    newSeries.ChartType = SeriesChartType.Line;
    newSeries.MarkerStyle = MarkerStyle.Diamond;
    newSeries.ChartArea = chartAreaName;

    // 所有ChartArea添加完成后统一刷新布局
    RefreshChartLayout();
}

布局刷新方法 #

private void RefreshChartLayout()
{
    int areaCount = chart.ChartAreas.Count;
    if (areaCount == 0) return;

    // 计算Chart控件总高度
    int totalChartHeight = ChartPadding * 2 + areaCount * SingleChartAreaHeight + (areaCount - 1) * ChartAreaMargin;
    chart.Height = totalChartHeight;
    chart.Width = panel.ClientSize.Width; // 同步宽度适配父容器

    // 逐个设置每个ChartArea的垂直位置和高度
    for (int i = 0; i < areaCount; i++)
    {
        var area = chart.ChartAreas[i];
        // 计算当前ChartArea的顶部Y坐标（像素）
        int yPixel = ChartPadding + i * (SingleChartAreaHeight + ChartAreaMargin);
        // 转换为Chart坐标系的百分比值
        float yPercent = (float)yPixel / totalChartHeight * 100;
        float heightPercent = (float)SingleChartAreaHeight / totalChartHeight * 100;

        area.Position.Y = yPercent;
        area.Position.Height = heightPercent;
        area.InnerPlotPosition.Y = 8; // 绘图区相对ChartArea的上边距百分比
        area.InnerPlotPosition.Height = 88; // 绘图区相对ChartArea的高度百分比
    }
}

3. 附加适配 #

如果需要支持窗体大小变化时自动适配宽度，可添加Panel的SizeChanged事件：

private void panel_SizeChanged(object sender, EventArgs e)
{
    if (chart != null)
    {
        chart.Width = panel.ClientSize.Width;
    }
}

内容的提问来源于stack exchange，提问作者Secret-guy