C# Chart折线图使用鼠标滚轮放大、缩小和平移曲线方式

目录
  • Chart折线图使用鼠标滚轮放大、缩小和平移曲线
    • 添加鼠标滚轮事件
    • 初始化有关参数
    • 添加鼠标按下、弹起和移动事件
  • 如何使用Chart图表
    • 效果图
    • 数据
    • 图表
    • 外观

Chart折线图使用鼠标滚轮放大、缩小和平移曲线

使用鼠标滚轮滚动放大和缩小X轴的宽度,鼠标左键按住拖动实现曲线的左右平移,不再使用滚动条。

添加鼠标滚轮事件

在chart控件自带的鼠标事件中并没有鼠标的滚轮事件,因此需要手动添加一下,在窗体的Designer.cs文件下的InitializeComponent()函数中添加如下代码

this.chart1.MouseWheel += new System.Windows.Forms.MouseEventHandler(this.chart1_MouseWheel);

实现鼠标滚轮事件

private void chart1_MouseWheel(object sender, MouseEventArgs e)
{
	// 实验发现鼠标滚轮滚动一圈时e.Delta = 120,正反转对应正负120
	if (chart1.ChartAreas[0].AxisX.ScaleView.Size > 0) // 防止越过左边界
	{
		chart1.ChartAreas[0].AxisX.ScaleView.Size += (e.Delta / 120); // 每次缩放1
	}
	else if(e.Delta > 0)
	{
		chart1.ChartAreas[0].AxisX.ScaleView.Size += (e.Delta / 120); // 每次缩放1
	}
}     

上述方法即可实现鼠标滚轮滚动完成曲线的缩放功能,下面实现鼠标按键按住左右拖动实现曲线的左右平移。

初始化有关参数

// 定义两个全局变量
public bool isMouseDown = false;
public int lastMove = 0; // 用于记录鼠标上次移动的点,用于判断是左移还是右移
// 初始化ScaleView,可根据首次出现在chart中的数据点数修改合适的值
chart1.ChartAreas[0].AxisX.ScaleView.Size = 5;
// 设置不显示chart自带的滚动条
chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = false;
chart1.ChartAreas[0].AxisY.ScrollBar.Enabled = false;
// 注意不要开启X轴游标,默认不开启,如下设置false或者不设置下列参数
chart1.ChartAreas[0].CursorX.IsUserEnabled = false;
chart1.ChartAreas[0].CursorX.AutoScroll = false;
chart1.ChartAreas[0].CursorX.IsUserSelectionEnabled = false;

添加鼠标按下、弹起和移动事件

上述事件在chart控件中均自带,直接添加即可,事件代码如下:

// 鼠标按下事件
private void chart1_MouseDown(object sender, MouseEventArgs e)
{
	lastMove  = 0;
    isMouseDown = true;
}
// 鼠标弹起事件
private void chart1_MouseUp(object sender, MouseEventArgs e)
{
    isMouseDown = false;
}
// 鼠标移动事件
private void chart1_MouseMove(object sender, MouseEventArgs e)
{
    if (isMouseDown)
    {
    	// 可更改(交换)如下加减1或if条件来设置鼠标移动时曲线移动方向
        if(lastMove != 0 && e.X - lastMove > 0)
            chart1.ChartAreas[0].AxisX.ScaleView.Position += 1;  // 每次移动1
        else if(lastMove != 0 && e.X - lastMove < 0)
            chart1.ChartAreas[0].AxisX.ScaleView.Position -= 1; // 每次移动1
        lastMove = e.X;
    }
}

最终效果如下,图片前面黑呼呼的为控制台输出,似乎有点看不清(可忽略),可观察到鼠标滚轮的变化。

如何使用Chart图表

Chart控件可以用来绘制波形图、柱状图、饼图、折线图等,用来进行数据表现是很不错的,现在简单说一下这个控件的使用方法

效果图

我们首先要加载Chart控件

然后打开控件的属性窗口

在这个窗口里面我们可以修改曲线的名称,名称在【数据》Name】里面修改

讲一下属性窗口里面我们用到的几个选项的作用吧

数据

XValueType是X轴的数据类型,Y同理,这里我们选Time,可以随时间改变

图表

ChartType是图表的类型,我们可以选出我们想要用的类型,这里选曲线

外观

Color可以选择曲线的颜色,这里我选了红色

左边的成员 框,是我们要显示的曲线,可以添加多个

其他属性如果有需要自行修改,修改好之后确定,回到窗口设计界面

在工具箱添加Timer

在Timer的事件窗口双击时钟事件

代码如下,请自行对照填到对应的事件里面去

public partial class Form1 : Form
    {
        int cnt = 0;
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            timer1.Enabled = true;
        }

        private void timer1_Tick(object sender, EventArgs e)
        {
            chart1.Series[0].Points.AddY(cnt*cnt);
            label1.Text = cnt.ToString();
            cnt++;
        }

        private void chart1_Click(object sender, EventArgs e)
        {

        }
    }

cnt是个自变量,曲线显示的是cnt为底的2次指数曲线

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • C# 绘制实时折线图,波形图

    此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图.本文仅供学习分享使用,如有不足之处,还请指正. 涉及知识点: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. Chart控件的相关概念: ChartArea,表示图表区域,一个Chart可以绘制多个ChartArea,重叠在一起. Series ,表示数据序列,每个ChartArea可以有多个数据线.即,Series属于ChartArea. AxisX,AxisY,

  • C#使用Chart绘制曲线

    本文实例为大家分享了C#使用Chart绘制曲线的具体代码,供大家参考,具体内容如下 新建一个控制台应用程序,程序名:WindowsFormsApp2,将下面的代码拷贝进去即可 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using

  • C#实现鼠标移动到曲线图上显示值的方法

    本文实例讲述了C#实现鼠标移动到曲线图上显示值的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 完成折线图报表后,产品经理要求把折线上的数值去掉,鼠标经过折线点时显示数值. 二.实现方法: 该方法针对dotnetcharting 下的charting折线图报表使用. 实现思路为,在该窗体上添加一个lable标签,当鼠标经过折线点时获取该点的x轴,y轴值和鼠标坐标值.然后将lable的坐标标记为鼠标所在坐标,并且给lable赋值,并且将lable显示出来.   具体实现代码如下: 复制

  • C# Chart折线图使用鼠标滚轮放大、缩小和平移曲线方式

    目录 Chart折线图使用鼠标滚轮放大.缩小和平移曲线 添加鼠标滚轮事件 初始化有关参数 添加鼠标按下.弹起和移动事件 如何使用Chart图表 效果图 数据 图表 外观 Chart折线图使用鼠标滚轮放大.缩小和平移曲线 使用鼠标滚轮滚动放大和缩小X轴的宽度,鼠标左键按住拖动实现曲线的左右平移,不再使用滚动条. 添加鼠标滚轮事件 在chart控件自带的鼠标事件中并没有鼠标的滚轮事件,因此需要手动添加一下,在窗体的Designer.cs文件下的InitializeComponent()函数中添加如下

  • Python matplotlib绘图时使用鼠标滚轮放大/缩小图像

    目录 思路: 示例: 输出效果: 总结 思路: 使用fig.canvas.mpl_connect()函数来绑定相关fig的滚轮事件 利用事件event的inaxes属性获取当前鼠标所在坐标系ax 使用get_xlim()函数获取坐标系ax的x/y轴坐标刻度范围 使用set()函数对坐标系ax进行放大/缩小 示例: import matplotlib.pyplot as plt import numpy as np fig = plt.figure() def call_back(event):

  • Vue实现div滚轮放大缩小

    Vue项目中实现div滚轮放大缩小,拖拽效果,类似画布效果 1.引入插件vue-draggable-resizable,点我进入GitHub地址. 1).npm install --save vue-draggable-resizable 2).main.js文件中 import VueDraggableResizable from 'vue-draggable-resizable' import 'vue-draggable-resizable/dist/VueDraggableResizab

  • idea鼠标控制放大缩小的操作

    如下所示: File -> Setting -> Editor -> General 补充:idea编辑器窗口调整技巧 如下所示: 将图左变成图右的方法 window--->Active ToolWindow-->jump to last Tool window window--->Active ToolWindow-->Floating mode 以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们.如有错误或未考虑完全的地方,望不吝赐教. 更多精彩内容

  • Python openpyxl 插入折线图实例

    我就废话不多说了,还是直接看代码吧! import os import openpyxl from datetime import date from openpyxl import Workbook from openpyxl.chart import ( Series, LineChart, Reference, ) def add_line_chart(title, wss, min_col, min_row, max_col, max_row): c1 = LineChart() c1.

  • 基于jquery的滚动鼠标放大缩小图片效果

    今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项: 复制代码 代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e|

  • JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴

    这是我自己做的一个轮播图,大家可以看看 ,我还没进行优化.有改进的地方可以私聊 布局什么的你们自己搞定吧 <div class="slider" id="circle"> <a href=""><img src="img/6p.jpg" alt="" /></a> ` <ul class="circle" > <li on

  • extjs4图表绘制之折线图实现方法分析

    本文实例讲述了extjs4图表绘制之折线图实现方法.分享给大家供大家参考,具体如下: 本篇文章将介绍extjs中自带的图表 在本次案例中,提供一下功能: 1.从后端请求数据并运用到图表中,形成动态数据. 2.查询出每年各个月中人数. 请看下面代码: Ext.define('ChartLineTest', { extend: 'Ext.panel.Panel', autoScroll : true, selectYear:null,//定义年份 initComponent: function ()

  • Qt图形图像开发之Qt曲线图美化QChart QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失效果实例

    最近接到一个Qt QChart曲线图美化的需求,画一个折线图,关键点使用空心的圆点标识出来,鼠标移动到关键点上,显示出当前数值:鼠标移走数值消失. 效果图如下: 我们遇到这个需求的时候,第一时间就会想到使用 QLineSeries 画折线图. 首先初始化 QChart *chart = new QChart(); chart->legend()->setVisible(false); ui->chartView->setChart(chart); ui->chartView-

随机推荐