如何在时间轴图表上绘制黑色矩形？现有代码异常求解决

我来帮你搞定这个问题！你遇到的核心问题是没有把时间轴的数据坐标转换成控件的像素坐标——直接用(0,0,200,200)这种像素级的矩形，要么落在图表的非数据绘制区域（比如轴标签、标题区），要么被控件的默认绘图逻辑覆盖，所以看起来只有绿色边框而非填充。

问题根源拆解 #

• 你的X轴是时间值而非整数索引，图表控件的绘图区域采用的是「数据坐标系」，而非普通的客户端像素坐标系
• 你直接使用的RectangleF(0,0,200,200)是控件的客户端像素坐标，和图表数据区的坐标系统不匹配
• 另外，类级别声明的SolidBrush如果没有正确释放，可能会导致GDI+资源泄漏，间接影响绘图效果

分步解决方案 #

1. 获取图表数据区的有效绘图边界 #

首先要拿到图表中实际绘制数据的区域（排除轴标签、标题等空白区），不同控件的获取方式略有差异：

• 如果你用的是WinForms自带的Chart控件：chart.ChartAreas[0].Position.ToRectangleF()
• 如果你用的是Infragistics UltraChart/UltraGrid：可以通过Chart.Pane.Area或Grid.DisplayLayout.ViewStyleInfo.DrawArea获取

2. 将时间坐标转换为像素坐标 #

这是最关键的一步！需要把你要绘制的时间范围转换成控件的像素位置：
假设你要绘制的时间范围是2024-05-01到2024-05-05，Y轴范围是0到100：

// 定义目标时间范围和Y值范围
DateTime targetXStart = new DateTime(2024, 5, 1);
DateTime targetXEnd = new DateTime(2024, 5, 5);
double targetYMin = 0;
double targetYMax = 100;

// 转换时间值为控件可识别的数值（大多数控件用OADate格式）
double xStartValue = targetXStart.ToOADate();
double xEndValue = targetXEnd.ToOADate();

// 转换为像素坐标
float xStartPixel = (float)chartArea.AxisX.ValueToPixelPosition(xStartValue);
float xEndPixel = (float)chartArea.AxisX.ValueToPixelPosition(xEndValue);
// 注意：Y轴是从上到下递增的，所以最大值对应顶部像素，最小值对应底部像素
float yStartPixel = (float)chartArea.AxisY.ValueToPixelPosition(targetYMax);
float yEndPixel = (float)chartArea.AxisY.ValueToPixelPosition(targetYMin);

3. 绘制填充矩形（并正确管理GDI+资源） #

用转换后的像素坐标创建矩形，并用using块确保SolidBrush被正确释放：

// 创建目标矩形（宽度为xEnd - xStart，高度为yEnd - yStart）
var fillRect = new RectangleF(xStartPixel, yStartPixel, xEndPixel - xStartPixel, yEndPixel - yStartPixel);

// 使用using块管理Brush资源，避免泄漏
using (var greenBrush = new SolidBrush(Color.Green))
{
    // 先填充矩形
    e.Graphics.FillRectangle(greenBrush, fillRect);
    // 如果需要黑色边框，额外绘制
    e.Graphics.DrawRectangle(Pens.Black, Rectangle.Round(fillRect));
}

完整修正后的示例代码（WinForms Chart控件） #

private void ugTopActivity_Paint(object sender, PaintEventArgs e)
{
    var chart = sender as Chart;
    if (chart == null || chart.ChartAreas.Count == 0) return;

    var chartArea = chart.ChartAreas[0];
    // 1. 定义你要绘制的时间范围和Y值范围
    DateTime xStartDate = new DateTime(2024, 5, 1);
    DateTime xEndDate = new DateTime(2024, 5, 5);
    double yMin = 0;
    double yMax = 100;

    // 2. 转换数据坐标到像素坐标
    double xStartVal = xStartDate.ToOADate();
    double xEndVal = xEndDate.ToOADate();
    float xStart = (float)chartArea.AxisX.ValueToPixelPosition(xStartVal);
    float xEnd = (float)chartArea.AxisX.ValueToPixelPosition(xEndVal);
    float yTop = (float)chartArea.AxisY.ValueToPixelPosition(yMax);
    float yBottom = (float)chartArea.AxisY.ValueToPixelPosition(yMin);

    // 3. 创建矩形并绘制
    var targetRect = new RectangleF(xStart, yTop, xEnd - xStart, yBottom - yTop);
    using (var greenFill = new SolidBrush(Color.Green))
    {
        e.Graphics.FillRectangle(greenFill, targetRect);
        // 绘制黑色边框（如果需要）
        e.Graphics.DrawRectangle(Pens.Black, Rectangle.Round(targetRect));
    }
}

额外注意事项 #

• 绘图顺序：如果你的矩形被图表的系列数据覆盖，尝试调整绘制时机——比如在控件完成自身绘制后再绘制你的矩形（可以通过PostPaint事件，或者在Paint事件中先调用base.OnPaint(e)再绘制）
• 控件兼容性：如果ugTopActivity是其他第三方控件，核心逻辑依然是「数据坐标转像素坐标」，只是具体的API会略有不同，你可以查控件的文档找到ValueToPixelPosition类似的方法
• 资源管理：永远不要在类级别声明SolidBrush而不释放，用using块是最安全的方式，避免GDI+资源耗尽

内容的提问来源于stack exchange，提问作者john true