C# chart，有關如何在鼠標移動到Series上時顯示節點及數據 （有待繼續更新）

 

1、效果與思路

效果：

解決方案1

用chart的mousemove時間，實時跟蹤鼠標最近的X軸的位置，而後把cursorX設置到那個位置上，讓用戶知道我是選的那一個X的值，同時用tooltip顯示該X軸上全部的Y值，結貼了謝謝你們。

至於如何顯示鼠標移動到的那個series上的數據節點，能夠在Mousmove時，用一個擊中測試，判斷。

參考代碼，擊中測試得到點數據點的索引：

if (e.HitTestResult.ChartElementType == ChartElementType.DataPoint)
{
    int i = e.HitTestResult.PointIndex;
    DataPoint dp = e.HitTestResult.Series.Points[i];
    e.Text = string.Format("{1:F3}", dp.XValue, dp.YValues[0]);
}

 

解決方案2

用的是vs的chart控件。我在頁面上的chart中寫的是這種方式顯示tooltip的（chart1是個人chart的名字）
chart1.GetToolTipText += new EventHandler<ToolTipEventArgs>(chart_GetToolTipText);
void chart_GetToolTipText(object sender, ToolTipEventArgs e)
        {
            if (e.HitTestResult.ChartElementType == ChartElementType.DataPoint)
            {
                int i = e.HitTestResult.PointIndex;
                DataPoint dp = e.HitTestResult.Series.Points[i];
                e.Text = string.Format("{1:F3}", dp.XValue, dp.YValues[0]);
            }
        }
可是這個鼠標懸停的判斷範圍也好窄好窄好窄好窄，選一個點要選半天，鼠標晃來晃去都不能出現tooltip，這個根本沒辦法用。請問高手有沒有好的方式可讓圖形能夠容忍必定的偏斜，就是說即便沒有選到這個點，到這個點附近多少範圍之類也能夠出現tooltip
思路：
一、記得之前有一個軟件，當你的鼠標移動到你須要指點的附近時，它就會「磁吸」到點那裏去，你也能夠這樣，挑最近的吸過去。
二、若是你開發的是分析軟件，並且精度要求很高的話，建議採用加粗放大方式，點擊後「標點」再縮小回去。

參考

#VALX         //x軸數據
#VALY         //y軸數據
#PERCENT      //百分比
#AVG          //平均值
#INDEX        //索引值
#MAX          //最大值
#MIN          //最小值
#TOTAL        //合計
#LEGENDTEXT   //顯示Legend的text
#SER          //顯示Series名稱

 

2、參考示例

ChartControl.RuntimeHitTesting屬性必定要設爲True。

Line Series markers的Visible必定要弄成True。CalcHitInfo的SeriesPoint一直爲null，最後跑到devexpress support center上問的。個人dev版本是13.1.5，設置屬性的方法是Series->View->MarkerVisibility。有的 版本多是Series -> LineMarkerOptions -> Visible。

個人是以曲線圖Spline爲例，下面就是代碼。

1.鼠標點擊點彈出Messagebox

 

    private void chartControl4_MouseClick(object sender, MouseEventArgs e)  
    {  
        ChartHitInfo hitInfo = chartControl4.CalcHitInfo(e.Location);  
        if (hitInfo.SeriesPoint != null)  
        {  
            MessageBox.Show(hitInfo.SeriesPoint.Values[0].ToString());  
        }  
    }  

 

 

 

2.鼠標移動用ToolTipController顯示值

外面定義

ToolTipController toolTipController = new ToolTipController();  

下面是dev的源碼：

    private void chartControl4_MouseMove(object sender, MouseEventArgs e)  
    {  
        ChartHitInfo hitInfo = chartControl4.CalcHitInfo(e.Location);  
        StringBuilder builder = new StringBuilder();  
        if (hitInfo.InDiagram)  
            builder.AppendLine("In diagram");  
        if (hitInfo.InNonDefaultPane)  
            builder.AppendLine("In non-default pane: " + hitInfo.NonDefaultPane.Name);  
        if (hitInfo.InAxis)  
        {  
            builder.AppendLine("In axis: " + hitInfo.Axis.Name);  
            if (hitInfo.AxisLabelItem != null)  
                builder.AppendLine("  Label item: " + hitInfo.AxisLabelItem.Text);  
            if (hitInfo.AxisTitle != null)  
                builder.AppendLine("  Axis title: " + hitInfo.AxisTitle.Text);  
        }  
        if (hitInfo.InChartTitle)  
            builder.AppendLine("In chart title: " + hitInfo.ChartTitle.Text);  
        if (hitInfo.InLegend)  
            builder.AppendLine("In legend");  
        if (hitInfo.InSeries)  
            builder.AppendLine("In series: " + ((Series)hitInfo.Series).Name);  
        if (hitInfo.InSeriesLabel)  
        {  
            builder.AppendLine("In series label");  
            builder.AppendLine("  Series: " + ((Series)hitInfo.Series).Name);  
        }  
        if (hitInfo.SeriesPoint != null)  
        {  
            builder.AppendLine("  Argument: " + hitInfo.SeriesPoint.Argument);  
            if (!hitInfo.SeriesPoint.IsEmpty)  
                builder.AppendLine("  Value: " + hitInfo.SeriesPoint.Values[0]);  
        }  
        if (builder.Length > 0)  
            toolTipController.ShowHint("Hit-testing results:\n" + builder.ToString(), chartControl4.PointToScreen(e.Location));  
        else  
            toolTipController.HideHint();  
    }  

View Code

MouseLeave事件代碼

    private void chartControl4_MouseLeave(object sender, EventArgs e)  
    {  
        toolTipController.HideHint();  
    }  

 

3.另外一種鼠標移動顯示信息的方法，用CustomDrawCrosshair事件，從別人那裏學習的。這種還能夠顯示圖片。

    private void chartControl4_CustomDrawCrosshair(object sender, CustomDrawCrosshairEventArgs e)  
    {  
      
        foreach (CrosshairElement element in e.CrosshairElements)  
        {  
            SeriesPoint point = element.SeriesPoint;  
            element.LabelElement.MarkerImage = Image.FromFile(@"F:\Resources\Add.png");// 設置圖片路徑  
            element.LabelElement.MarkerImageSizeMode = ChartImageSizeMode.Stretch;  
            element.LabelElement.MarkerSize = new Size(100, 100); // 大小  
            element.LabelElement.Text = point.Values[0].ToString();//顯示要顯示的文字  
        }  
    }  

 

這裏有devexpress用CustomDrawCrosshair事件顯示點信息的DemoHow to: Show a Tooltip with a Series Point's Data

 

 

 

 

 

 

 

 

參考

1.hustaiyaya， winform chart控件鼠標懸停顯示Y值。

2.黃大仙兒，c#—devexpress chartcontrol 鼠標點擊chart上的點事件，鼠標移動顯示值，2014-3。

3. c# chart 鼠標放在數據點上出現的小提示。