C# 使用鼠标点击对Chart控件实现数据提示效果

目录
  • 前言
  • 效果展示
  • 解决方案
  • 总结

前言

上一篇文章C# Chart控件标记问题详解,我们对C#Chart控件标记问题做了一系列的处理,今天是对上一篇文章的一个扩展,使用鼠标点击事件对Chart上面的折线点进行数据展示,是另外的一种展示方式,不明白的同学可以去看看我上一篇文章,这篇文章使用的方式就是点击一下就弹出一个小的提示框,可以在提示框中写我们自己想要写的数据,创作不易,大家点赞关注评论收藏,你的点赞是我创作的动力,谢谢啦!!!

效果展示

使用tooltip的方式使用鼠标点击Chart中的折线,实现Chart的数据提示效果,需要使用鼠标的点击事件获取点击位置的x,y的坐标,并对这个坐标在Chart折线图中找到对应的点的值,找到对应点之后使用chart的point属性对这个点的值的获取,从而展示,后面有详细的操作步骤,以及代码逻辑,可以直接跳的最后面的解决方案去看。

解决方案

图一图二是对界面的一些的一些的设置

主要的代码逻辑

整个项目的界面代码,主要的这个功能主要的代码在鼠标的那个触发函数的代码,直接复制那个函数的代码,粘贴就好了,不是很难。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;

namespace TestIC00
{
    public partial class Form2 : Form
    {
        public Form2()
        {
            InitializeComponent();
        }

        private void Form2_Load(object sender, EventArgs e)
        {

        }
        public int index = 0;
        public int x = 0;
        public bool flag = false;
        private void button1_Click(object sender, EventArgs e)
        {
            timer1.Enabled = !timer1.Enabled;
        }
        private void timer1_Tick(object sender, EventArgs e)
        {
            Random random = new Random();
            this.chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 1;//网格间隔
            this.chart1.ChartAreas[0].AxisX.MinorGrid.Interval = 1;
            this.chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 1;//网格间隔
            this.chart1.ChartAreas[0].AxisY.MinorGrid.Interval = 1;
            this.chart1.ChartAreas[0].AxisX.LabelStyle.Interval = 1;//设置X轴的值的间隔大小
            this.chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.Gray;//设置X轴网格线颜色
            this.chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Gray;//设置Y轴网格线颜色
            chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = true;//启动滚动条
            this.chart1.ChartAreas[0].AxisY.LabelStyle.Enabled = false;//使Y轴的刻度隐藏
            chart1.ChartAreas[0].AxisX.ScaleView.Scroll(System.Windows.Forms.DataVisualization.Charting.ScrollType.Last);//启用视图实现数据滚动
            int value = random.Next(0, 20);//产生随机数进行赋值
            chart1.Series[0].Points.AddXY(x,value);//对折线图添加数据
            x++;
            if (flag)//判断标记,如果是true表示只标记最新,需要去掉前面的一个值
            {
                this.chart1.Series[0].Points[index].MarkerStyle = MarkerStyle.Circle;//设置标记的形状为圆形
                this.chart1.Series[0].Points[index].MarkerColor = Color.Red;//形状颜色设置
                this.chart1.Series[0].Points[index].MarkerBorderWidth = 3;//形状大小设置
                this.chart1.Series[0].Points[index].MarkerSize = 10;//设置我们展示标记的大小
                this.chart1.Series[0].Points[index].Label = "功能:" + this.chart1.Series[0].Name + "\r\n" + "值:" + value.ToString();//对标记展示的值
                this.chart1.Series[0].Points[index].IsValueShownAsLabel = true;//展示标记
                this.chart1.Series[0].Points[index - 1].MarkerBorderWidth = 0;//改前一个标记的大小
                this.chart1.Series[0].Points[index - 1].MarkerSize = 0;//形状大小
                this.chart1.Series[0].Points[index - 1].Label = "";//展示数据
                this.chart1.Series[0].Points[index - 1].IsValueShownAsLabel = false;//不展示
            }
            else//对数据一直标记
            {
                this.chart1.Series[0].Points[index].MarkerStyle = MarkerStyle.Circle;
                this.chart1.Series[0].Points[index].MarkerColor = Color.Red;
                this.chart1.Series[0].Points[index].MarkerBorderWidth = 3;
                this.chart1.Series[0].Points[index].MarkerSize = 10;
                this.chart1.Series[0].Points[index].Label = "功能:" + this.chart1.Series[0].Name + "\r\n" + "值:" + value.ToString();
                this.chart1.Series[0].Points[index].IsValueShownAsLabel = true;
            }
            //也可以加一种状态是什么也不标记,你们自己对那个状态值的处理就可以啦
            index++;
        }

        private void button2_Click(object sender, EventArgs e)
        {
            flag = !flag;
        }

        private void chart1_MouseClick(object sender, MouseEventArgs e)
        {
            HitTestResult mytestresult = new HitTestResult();//它表示命中测试的返回值
            mytestresult = chart1.HitTest(e.X, e.Y);//获取我们Chart控件的折线图在这个坐标的值
            if (e.Button == MouseButtons.Left)//判断是否是鼠标左键点击
            {
                if (mytestresult.ChartElementType == ChartElementType.DataPoint)//判断我们点击这个返回集是否是chart的数据点的类型
                {
                    toolTip1.AutoPopDelay = 5000;//表示tooltip在这个控件中保留展示的时间
                    toolTip1.InitialDelay = 1000;//表示鼠标指针必须在这里静止的时间
                    toolTip1.ReshowDelay = 500;//可以缩短或延长在显示上一个工具提示窗口后显示工具提示窗口之前等待的时间tooltip
                    toolTip1.ShowAlways = true;//获取或设置一个值,该值指示是否显示工具提示窗口,甚至是在其父控件不活动的时候。

                    try
                    {
                        toolTip1.SetToolTip(chart1, "名称:" + mytestresult.Series.Name + "\r\n" +"值:"+chart1.Series[0].Points[mytestresult.PointIndex]);//设置ToolTip展示的值的内容,mytestresult.Series.Name表示折线的名字,chart1.Series[0].Points[mytestresult.PointIndex]表示chart图表中的第0(从0开始也就是第一条)条折线的数据点的第多少个,
//也可以设置chart1.Series[0].Points[mytestresult.PointIndex].XValue;这个代表你点击这个点的x轴的值,chart1.Series[0].Points[mytestresult.PointIndex].YValues[0];这个代表你点击的点Y轴的值

                    }
                    catch (Exception)
                    {

                    }
                }
            }
        }
    }
}

总结

这篇文章是对上一篇文章的扩展,使用的是ToolTip技术和鼠标点击的事件,再加上测试返回集,虽然很简单,但是也是可以学到东西的,C#的技术就是先简单再难嘛,积少成多之后才会成长才会进步,我们要不断的学习不断的探索,才能有学习的动力,才会有学习的欲望

到此这篇关于C# 使用鼠标点击对Chart控件实现数据提示效果的文章就介绍到这了,更多相关C# Chart控件 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • C#使用DevExpress中的XtraCharts控件实现图表

    目录 一.总体概述 二.chartControl层\XYDiagram层 1.当坐标轴的数据类型是数字时 2. 当前数据类型是字符串时 3.当前数据类型是时间 三.实例 1.饼状图 1.1.添加ChartControl控件 1.2.准备数据 1.3.根据数据创建饼状图 1.4.设置饼状Series显示方式(值/百分比) 2.柱状图 2.1.添加ChartControl控件 2.2.准备数据 2.3.根据数据创建柱状图 2.4.用到的方法 四.事件 1.CustomDrawAxisLabel :

  • c# 设置TeeChart控件的提示文本

    使用第三方Steema的TeeChart控件,设置鼠标放在某一线条点上,显示某一点的数据标签问题(虚线型十字光标基准线,放在线上显示对应点的二维坐标轴数据数据),调用InitTeeChartTipTools方法即可: /// <summary> /// TeeChart线条的指示工具 /// </summary> Steema.TeeChart.Tools.CursorTool cursorTool; /// <summary> /// 鼠标指示显示的文本 /// &l

  • C# Chart控件标记问题详解

    前言 在做项目的时候,遇到一个需求,需要我对Chart图标标记数据正在运行,实现数据可视化,因为我们的表格是隐藏Y轴的刻度是看不到数据值的,于是采用数据标记的形式来动态展示值,那么我们应该怎么去处理这个问题呢,阅读这篇文章吧,我们一起学习学习一下,创作不易,大家点赞关注评论收藏,你的点赞和关注是我创作的动力,也是我持续不断学习的动力.谢谢大家啦!!! 效果展示 先来展示一下我们的效果,看看是怎么回事,在看看有没有欲望往下面看看文章,主要是对Chart图的标记问题做了处理,我们使用了Chart控件

  • C#实现chart控件动态曲线绘制

    本文实例为大家分享了C#实现chart控件动态曲线绘制的具体代码,供大家参考,具体内容如下 思想 实验室要做一个动态曲线绘制,网上方法很多,但是缺乏完整代码和效果图的整合,往往总是缺少其一,因此整理如下,方便大家编程,节约时间.思路:新建一个队列,利用timer控件,动态的往队列中加入数据,每次触发事件,就相当于将队列中的值全部重新画一遍. 我的目的是做四个点的动态监测,所以代码重复了四次,其实应该用4个线程来做,思路就显得较为清晰了,这也是可以改进的地方. public partial cla

  • 一文详解C# Chart控件

    目录 前言 1.创建窗体文件 2.设计界面 3.配置toolTip控件 4. 对需要设置提示的地方设置提示 4.1 简单效果演示 4.1.1 默认提示样式 4.1.2 使用气泡样式 4.2 对提示设置图标和标题 4.3 使用代码对图标和标题动态设置 5. 整体效果展示 总结 前言 前段时间学习Chart控件,对Chart控件的,怕以后忘记,所以总结一下自己的学习成果,怕以后忘记方便自己下次复习.这篇文章只是学习的文章,有些知识点没学到,望各位海涵,有什么错误点望大家指正,觉得这篇文章有帮助可以点

  • C# 使用鼠标点击对Chart控件实现数据提示效果

    目录 前言 效果展示 解决方案 总结 前言 上一篇文章C# Chart控件标记问题详解,我们对C#Chart控件标记问题做了一系列的处理,今天是对上一篇文章的一个扩展,使用鼠标点击事件对Chart上面的折线点进行数据展示,是另外的一种展示方式,不明白的同学可以去看看我上一篇文章,这篇文章使用的方式就是点击一下就弹出一个小的提示框,可以在提示框中写我们自己想要写的数据,创作不易,大家点赞关注评论收藏,你的点赞是我创作的动力,谢谢啦!!! 效果展示 使用tooltip的方式使用鼠标点击Chart中的

  • jQuery实现鼠标点击处心形漂浮的炫酷效果示例

    本文实例讲述了jQuery实现鼠标点击处心形漂浮的炫酷效果.分享给大家供大家参考,具体如下: 鼠标点击一下,在鼠标上方显示一个爱心❤,并有慢慢向上消失的效果,如下图: 是不是很炫酷,直接贴代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <script src="http://libs.baidu.c

  • 详解iOS开发中UItableview控件的数据刷新功能的实现

    实现UItableview控件数据刷新 一.项目文件结构和plist文件 二.实现效果 1.说明:这是一个英雄展示界面,点击选中行,可以修改改行英雄的名称(完成数据刷新的操作). 运行界面: 点击选中行: 修改数据后自动刷新: 三.代码示例 数据模型部分: YYheros.h文件 复制代码 代码如下: // //  YYheros.h //  10-英雄展示(数据刷新) // //  Created by apple on 14-5-29. //  Copyright (c) 2014年 itc

  • 在ASP.NET 2.0中操作数据之四十六:使用SqlDataSource控件检索数据

    导言 到目前为止,我们探讨的教程是由表现层,业务逻辑层和数据访问层构成的层次体系结构.数据访问层和业务逻辑层分别在教程第一和第二章提到.在Displaying Data With the ObjectDataSource 这篇教程里,我们探讨了怎样用ASP.NET 2.0的新控件--ObjectDataSource控件在表现层展示数据. 本教程到目前为止用这种层次结构来处理数据.然而绕过这种体系结构,通过直接把数据查询和业务逻辑放在Web页面上,也可以达到直接在ASP.NET页面上访问,插入,更

  • Vue商品控件与购物车联动效果的实例代码

    本篇我们将构建商品控件与购物车联动. 商品控件 商品控件的结构编写 在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写. <template> <div class="goods"> <div class="menu-wrapper" ref="menuScroll"> <ul> <!--专场--> <li class="

  • 浅析Bootstrip的select控件绑定数据的问题

    此问题让我倒弄了一下午时间,最后终于被我拿下.下面小编把我的功劳分享出来,以此来做个备份,同时也希望能帮助到大家. 具体详情如下所示: $(function(){ var stu_no = freeUrl(); var data, subname="",data2; var sbList = new Array(); $.ajax({ async: false , dataType: "json", contentType: "application/js

  • GridView控件实现数据的修改(第9节)

    上一篇是使用GridView控件实现数据的显示和删除,这一节设计页面,使用GridView控件实现数据的更新操作,当更新时新闻的内容没有输入则提示"不能为空". 学习内容: 学习任务一 使用GridView控件实现信息的更新 步骤一:数据源控件定义数据的方法,在newschuli.cs页面中编写代码如下: public static void modifynews(newsclass news1) { using (SqlConnection cn = dbconn.GetConnec

随机推荐