当鼠标悬停在图表点上时查看点的值

Question

我有一个图表，希望用户在指针悬停在点上时能看到该点的值。 通过使用digEmAll在页面找到图表中点的值的帮助，我编写了以下代码：

Point? prevPosition = null; 
ToolTip tooltip = new ToolTip();  

void chart1_MouseMove(object sender, MouseEventArgs e) 
{     
    var pos = e.Location;     
    if (prevPosition.HasValue && pos == prevPosition.Value)         
        return;     
    tooltip.RemoveAll();     
    prevPosition = pos;     
    var results = chart1.HitTest(pos.X, pos.Y, false, ChartElementType.PlottingArea);     
    foreach (var result in results)     
    {         
        if (result.ChartElementType == ChartElementType.PlottingArea)         
        {            
            chart1.Series[0].ToolTip = "X=#VALX, Y=#VALY";          
        }    
    } 
} 

with a period at the end for proper formatting.

通过上面的代码，用户可以在指针接近一系列值时看到这些值。但现在，我该如何让用户只有在指针落在这些点上时才能看到这些值呢？

int k = result.PointIndex;
if (k >= 0)
{
    chart1.Series[0].Points[k].ToolTip = "X=#VALX, Y=#VALY";
}

代替，而不是。

chart1.Series[0].ToolTip = "X=#VALX, Y=#VALY";

为了解决我的问题，但它没有用。

- Asma Good

Answer 1

你应该按照以下方式修改代码：

Point? prevPosition = null;
ToolTip tooltip = new ToolTip();

void chart1_MouseMove(object sender, MouseEventArgs e)
{
    var pos = e.Location;
    if (prevPosition.HasValue && pos == prevPosition.Value)
        return;
    tooltip.RemoveAll();
    prevPosition = pos;
    var results = chart1.HitTest(pos.X, pos.Y, false,
                                    ChartElementType.DataPoint);
    foreach (var result in results)
    {
        if (result.ChartElementType == ChartElementType.DataPoint)
        {
            var prop = result.Object as DataPoint;
            if (prop != null)
            {
                var pointXPixel = result.ChartArea.AxisX.ValueToPixelPosition(prop.XValue);
                var pointYPixel = result.ChartArea.AxisY.ValueToPixelPosition(prop.YValues[0]);

                // check if the cursor is really close to the point (2 pixels around the point)
                if (Math.Abs(pos.X - pointXPixel) < 2 &&
                    Math.Abs(pos.Y - pointYPixel) < 2)
                {
                    tooltip.Show("X=" + prop.XValue + ", Y=" + prop.YValues[0], this.chart1,
                                    pos.X, pos.Y - 15);
                }
            }
        }
    }
}

这个想法是检查鼠标是否非常接近该点，例如在它周围 2 像素范围内（因为几乎不可能 恰好 在点上），如果是，则显示工具提示。

这里是一个完整的工作示例。

- digEmAll

---

主轴工作完美无缺。但是对于次要轴系列，条件(Math.Abs(pos.X - pointXPixel) < 2 && Math.Abs(pos.Y - pointYPixel) < 2)失败了。 - Ramesh Durai

@RameshDurai：是的，正确的，这段代码只考虑了主轴。 - digEmAll

这段代码对我很有效！但是，我想知道如何访问鼠标移开数据点的事件（即我可以将数据点颜色从COLOR_HOVERED更改为COLOR_NORMAL）... - Shane Sepac

@Shn_Android_Dev：为什么不在if语句中设置悬停颜色，在if语句的“else”部分（即光标在点外面）将其重置为正常？ - digEmAll

Answer 2

我会采用以下解决方案：

添加自定义工具提示事件处理程序：

 this.chart1.GetToolTipText += this.chart1_GetToolTipText;

实现事件处理程序：

  private void chart1_GetToolTipText(object sender, ToolTipEventArgs e)
  {
     // Check selected chart element and set tooltip text for it
     switch (e.HitTestResult.ChartElementType)
     {
        case ChartElementType.DataPoint:
           var dataPoint = e.HitTestResult.Series.Points[e.HitTestResult.PointIndex];
           e.Text = string.Format("X:\t{0}\nY:\t{1}", dataPoint.XValue, dataPoint.YValues[0]);
           break;
     }
  }

- jreichert

---

我已经尝试了你的代码。当我的鼠标悬停在图表上时，它会触发，但没有显示任何工具提示。 - M_Mogharrabi

我暂时无法测试，但根据我的记忆：

• 您必须显示“数据点标记”
• 不要设置数据点的ToolTip属性，请参阅https://stackoverflow.com/questions/14256283/show-tooltip-only-on-the-datapoint-for-line-graph-in-mschart

- jreichert

Answer 3

考虑使用图表控件的标签功能作为工具提示的更好选择。

DataPoint _prevPoint;
void chart1_MouseMove(object sender, MouseEventArgs e)
{
    // this if statement clears the values from the previously activated point.
    if (_prevPoint) {
        _prevPoint.MarkerStyle = MarkerStyle.None;
        _prevPoint.IsValueShownAsLabel = false;
    }

    var result = chart1.HitTest(e.X, e.Y, ChartElementType.DataPoint);
    if (result.ChartElementType == ChartElementType.DataPoint)
    {
        var prop = result.Object as DataPoint;
        if (prop != null)
        {
            prop.IsValueShownAsLabel = true;
            prop.MarkerStyle = MarkerStyle.Star4;
        }
    }
}

我已经测试过并正在使用它。对于有许多数据点的图表非常好用，因为它还会在图表上显示标记。

- iQueue

---

谢谢，这个可行。但是我认为在创建标记“_prevPoint = prop”后，还缺少一行来存储先前标记的引用。你的代码中有一些拼写错误，我会修复它们。 - AWolf

它可以运行，当我将鼠标悬停在数据点上时，prop！= null会触发，但是我没有看到标记。那是应该弹出的东西吗？ - Doug Null