zoukankan      html  css  js  c++  java
  • 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:
    " + 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:ResourcesAdd.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 鼠标放在数据点上出现的小提示。

     

  • 相关阅读:
    node连接数据库(express+mysql)
    Apache与Tomcat有什么关系和区别
    tomcat部署简单的html静态网页
    Vue项目webpack打包部署到服务器
    windows下vue+webpack前端开发环境搭建及nginx部署
    DIV 边框重叠 像素变粗 解决办法
    基于iscroll实现下拉和上拉刷新
    css图片居中(水平居中和垂直居中)
    nodejs分页类
    事件--键盘事件
  • 原文地址:https://www.cnblogs.com/arxive/p/5862471.html
Copyright © 2011-2022 走看看