WinForms MS Chart 鼠标悬停高亮折线线段并获取相邻点索引的实现问题

核心实现思路 #

MS Chart 原生命中测试仅支持识别整个Series或单个数据点，无法直接返回线段对应的两端点索引。我们可以通过坐标转换+点到线段距离检测的方式，自定义匹配当前悬停的线段，同时关联两端点索引。

分步实现代码 #

1. 定义线段数据结构 #

用于存储每条线段对应的两端点索引和屏幕坐标：

public struct LineSegment
{
    // 线段两端点在Series.Points中的索引
    public int StartPointIndex;
    public int EndPointIndex;
    // 两端点转换后的屏幕坐标
    public PointF StartScreenPoint;
    public PointF EndScreenPoint;
}

2. 生成当前折线的所有线段列表 #

将数据点的数值坐标转换为屏幕坐标，批量生成线段集合：

private List<LineSegment> GetSeriesSegments(Series series, ChartArea chartArea)
{
    List<LineSegment> segments = new List<LineSegment>();
    if (series.Points.Count < 2) return segments;

    for (int i = 0; i < series.Points.Count - 1; i++)
    {
        DataPoint startP = series.Points[i];
        DataPoint endP = series.Points[i + 1];
        // 数值坐标转屏幕坐标
        PointF startScreen = new PointF(
            (float)chartArea.AxisX.ValueToPixelPosition(startP.XValue),
            (float)chartArea.AxisY.ValueToPixelPosition(startP.YValues[0])
        );
        PointF endScreen = new PointF(
            (float)chartArea.AxisX.ValueToPixelPosition(endP.XValue),
            (float)chartArea.AxisY.ValueToPixelPosition(endP.YValues[0])
        );
        segments.Add(new LineSegment
        {
            StartPointIndex = i,
            EndPointIndex = i + 1,
            StartScreenPoint = startScreen,
            EndScreenPoint = endScreen
        });
    }
    return segments;
}

3. 检测鼠标悬停的线段 #

通过点到线段的最短距离判断悬停命中，排除线段延长线的误判：

// 全局变量：当前悬停的线段，为空则无命中
private LineSegment? _currentHoverSeg = null;
// 悬停容差：可根据实际需求调整，单位像素
private const int HoverTolerance = 5;

// 计算点到线段的最短距离
private double CalcPointToLineDistance(PointF mousePoint, PointF lineStart, PointF lineEnd)
{
    float dx = lineEnd.X - lineStart.X;
    float dy = lineEnd.Y - lineStart.Y;
    // 线段两端点重合的特殊情况处理
    if (dx == 0 && dy == 0)
        return Math.Sqrt(Math.Pow(mousePoint.X - lineStart.X, 2) + Math.Pow(mousePoint.Y - lineStart.Y, 2));
    
    // 向量投影限制在线段范围内，排除延长线误判
    float t = ((mousePoint.X - lineStart.X) * dx + (mousePoint.Y - lineStart.Y) * dy) / (dx * dx + dy * dy);
    t = Math.Max(0, Math.Min(1, t));
    
    float nearestX = lineStart.X + t * dx;
    float nearestY = lineStart.Y + t * dy;
    return Math.Sqrt(Math.Pow(mousePoint.X - nearestX, 2) + Math.Pow(mousePoint.Y - nearestY, 2));
}

// 绑定到Chart的MouseMove事件
private void chart1_MouseMove(object sender, MouseEventArgs e)
{
    // 替换为你自己操作的Series和ChartArea
    Series targetSeries = chart1.Series[0];
    ChartArea targetArea = chart1.ChartAreas[0];
    List<LineSegment> allSegs = GetSeriesSegments(targetSeries, targetArea);

    LineSegment? hitSeg = null;
    foreach (var seg in allSegs)
    {
        double distance = CalcPointToLineDistance(e.Location, seg.StartScreenPoint, seg.EndScreenPoint);
        if (distance <= HoverTolerance)
        {
            hitSeg = seg;
            break;
        }
    }

    if (hitSeg != _currentHoverSeg)
    {
        _currentHoverSeg = hitSeg;
        chart1.Invalidate(); // 触发重绘更新高亮
        // 需获取两端索引直接取：_currentHoverSeg?.StartPointIndex、_currentHoverSeg?.EndPointIndex
    }
}

4. 实现单线段高亮 #

通过Chart的PostPaint事件自定义绘制悬停线段的高亮效果：

// 绑定到Chart的PostPaint事件
private void chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
    if (_currentHoverSeg == null) return;
    var seg = _currentHoverSeg.Value;
    // 自定义高亮样式：颜色、线宽可按需调整
    using (Pen highlightPen = new Pen(Color.Red, 3))
    {
        e.ChartGraphics.Graphics.DrawLine(highlightPen, seg.StartScreenPoint, seg.EndScreenPoint);
    }
}

配套说明 #

• 缩放、平移轴视图后逻辑依然有效，ValueToPixelPosition会自动适配当前轴的视图范围
• 多Series场景下遍历所有目标Series生成线段列表即可
• 后续拖拽线段逻辑可以直接修改Series.Points[StartPointIndex]和Series.Points[EndPointIndex]的XValue、YValues属性，修改后调用Invalidate()即可刷新视图

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