C# chart,有关如何在鼠标移动到Series上时显示节点及数据 (有待继续更新)

一、效果与思路

效果:

解决方案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
思路:
1、记得以前有一个软件,当你的鼠标移动到你需要指点的附近时,它就会“磁吸”到点那里去,你也可以这样,挑最近的吸过去。
2、如果你开发的是分析软件,而且精度要求很高的话,建议采用加粗放大方式,点击后“标点”再缩小回去。

参考

#VALX         //x轴数据
#VALY         //y轴数据
#PERCENT      //百分比
#AVG          //平均值
#INDEX        //索引值
#MAX          //最大值
#MIN          //最小值
#TOTAL        //合计
#LEGENDTEXT   //显示Legend的text
#SER          //显示Series名称

二、参考示例

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();
    }  

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.hustaiyayawinform chart控件鼠标悬停显示Y值

2.黄大仙儿c#—devexpress chartcontrol 鼠标点击chart上的点事件,鼠标移动显示值,2014-3。

3. c# chart 鼠标放在数据点上出现的小提示。

时间: 2024-10-12 23:39:35

C# chart,有关如何在鼠标移动到Series上时显示节点及数据 (有待继续更新)的相关文章

实现当鼠标移到表格上时显示这一格的全部内容

想实现这样一个功能,就是在一个表格中,由于很多字过多,所以用文字溢出的方法处理了,但是这样就无法看到表格中具体的内容呢.想实现当鼠标移上去的时候可以显示这一行被隐藏的内容.当然这个网上有很多插件,但是我没有用,还是自己写了一个. css部分 <style> #showbox { width: 150px; min-height: 50px; font: 100 14px/1 "微软雅黑"; border: 1px solid #3c8dbc; display: none;

鼠标移动到图片上时,显示大图片

HTML标签中的一部分,仅供参考 <tr> <td><input type="checkbox" class="checkbox1"/></td> <td>1002</td> <td>小猫咪</td> <td><img src="img/02.jpg" height="100" width="100&qu

WPF | 修改鼠标停留在Button上时的Style

这里用到属性触发器,当Button的IsMouseOver属性值为True时,我们对其样式进行修改,这里以修改Button背景色为例. 首先是启动后未触发时的效果图: 我一开始想到的就是直接修改其Background属性,代码如下: <Button Height="30" Width="150" BorderBrush="{x:Null}" BorderThickness="0"> <Button.Style

VC/MFC 当鼠标移到控件上时显示提示信息

VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法. 一般用法步骤:  添加CToolTipCtrl成员变量 m_tt.  在父窗口中调用EnableToolTips(TRUE);  在窗口的OnCreate(或者其他适当的位置)中向ToolTip中添加需要显示Tip的子窗口,并同时指定相应的显示字串CToolTipCtrl::AddTool(pW

鼠标移动到图片上,显示相关信息

在网页上总是看到这样的效果:将鼠标放到一个小格子里,小格子变暗,同时显示出来一些文字.一直比较好奇,今天我也简单的实现了一下,如果有不对或者更好的方法,请指教. 总体思路是,构建一个新的div,用来覆盖图片并显示字,鼠标移动到img上时即可显示div,移出img时div会消失. 1.构建基本页面: <div id="ten_model"> <ul id="little_imgs"> <li id="li1">&

纵向文字滚动代码,带上下图片控制的。鼠标放到上下图片上时滚动

<style type="text/css"> #swsh .swsh_body{height:352px;overflow:hidden;}</style></p> <div id="swsh"> <script language="javascript"> var UDMoveflag=true function scrollStart(object,offset){ object.

WPF中当鼠标移到按钮上时,按钮的背景图片消失的问题

如果给按钮设置了背景图片,当鼠标移到按钮上的时候,按钮就好变成一个浅蓝色的按钮,背景图片就消失了,对于这个问题有很多解决方法,我只分享一下我的解决方法. 我第一次用的方式是在按钮中添加一个图片,不用背景来设置. <Button HorizontalAlignment="Left" Margin="179,56.506,0,0" Click="Button_Click" VerticalAlignment="Top" Wi

jquery鼠标滑过展示图片时显示详情

jquery: 1 <script src="js/jquery.js" type="text/javascript"></script> 2 <script type="text/javascript"> 3 $(document).ready(function(){ //页面边加载边执行 4 $('.box').hover( 5 function(){ 6 $(this).find('img').anima

鼠标移到图片上时,图片“友好”的渐进效果

.box img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -webkit-transition: all 0.6s linear; -moz-transition: all 0.6s linear; }