QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失

Stella981
• 阅读 920

在最近接到的需求是这样的,画一个折线图,关键点使用空心的圆点标识出来,鼠标移动到关键点上,显示出当前数值;鼠标移走数值消失。

QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失

我们遇到这个需求的时候,第一时间就会想到使用 QLineSeries 画折线图。首先初始化

  1. QChart *chart = new QChart();

  2. chart->legend()->setVisible( false);

  3. ui->chartView->setChart(chart);

  4. ui->chartView->setRenderHint(QPainter::Antialiasing);

  5. chart->setBackgroundBrush(QBrush(QColor( 248, 251, 255)));

将每个点添加到QLineSeries序列中。然后就会形成折线图。如下:

  1. QChart *chart = ui->chartView->chart();

  2. chart->removeAllSeries();

  3. chart->removeAxis(chart->axisX());

  4. chart->removeAxis(chart->axisY());

  5. //折线图

  6. QLineSeries *series0 = new QLineSeries();

  7. QPen pen;

  8. pen.setStyle(Qt::SolidLine);

  9. pen.setWidth( 4);

  10. pen.setColor(QColor( 21, 100, 255));

  11. series0->setPen(pen); //折现序列的线条设置

  12. QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at( 0);

  13. series0->clear();

  14. qsrand(QTime::currentTime().second());

  15. qreal t= 0, y1, intv=1;

  16. qreal rd;

  17. int cnt=16;

  18. for (int i=0; i<cnt; i++)

  19. {

  20. rd = (qrand() % 100);

  21. y1=rd;

  22. series0->append(t, y1);

  23. t+=intv;

  24. }

QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失

这是完成了第一步,画出来了折线图。但是对于那些圆点要显示出来的话我们可以考虑使用QScatterSeries来画一些离散的点。

  1. QScatterSeries *series1 = new QScatterSeries();

  2. series1->setMarkerShape(QScatterSeries::MarkerShapeCircle); //圆形的点

  3. series1->setBorderColor(QColor( 21, 100, 255)); //离散点边框颜色

  4. series1->setBrush(QBrush(QColor( 21, 100, 255)));//离散点背景色

  5. series1->setMarkerSize( 12); //离散点大小

  6. QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at( 0);

  7. QScatterSeries *series1 = (QScatterSeries *)ui->chartView->chart()->series().at( 1);

  8. series0->clear();

  9. series1->clear();

  10. qsrand(QTime::currentTime().second());

  11. qreal t= 0, y1, intv=1;

  12. qreal rd;

  13. int cnt=16;

  14. for (int i=0; i<cnt; i++)

  15. {

  16. rd = (qrand() % 100);

  17. y1=rd;

  18. series0->append(t, y1);

  19. series1->append(t, y1);

  20. t+=intv;

  21. }

然后我们添加了一些离散的点,效果如下图:

QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失

很显然,虽然添加了离散的圆形的点,但是并没有满足我们的需求,因为需求是空心的圆点。而且控件也没提供相关函数可以设置成空心。但是这里面有3个函数值得注意

  1. series1->setBorderColor(QColor( 21, 100, 255)); //离散点边框颜色

  2. series1->setBrush(QBrush(QColor( 21, 100, 255)));//离散点背景色

  3. series1->setMarkerSize( 12); //离散点大小

因为可以设置一个点的大小,边框和颜色。那我们如果想实现一个空心的离散点就可以这样做:

以同一个位置为圆心,画两个半径不同的实心圆。下面的圆半径大,颜色就是边框的颜色蓝色;上面的圆形半径小,颜色设置为白色。这样两个圆形叠加起来的效果,视觉上就是一个空心的圆形。按照这个思路,我们需要使用2个QScatterSeries序列

series0 : 半径较大,背景为蓝色,充当边框。

series1:半径较小,北京为白色,充电圆心。

  1. //散点图(用于边框)

  2. QScatterSeries *series1 = new QScatterSeries();

  3. series1->setMarkerShape(QScatterSeries::MarkerShapeCircle); //圆形的点

  4. series1->setBorderColor(QColor( 21, 100, 255)); //边框颜色

  5. series1->setBrush(QBrush(QColor( 21, 100, 255)));//背景颜色

  6. series1->setMarkerSize( 12); //点大小

  7. //散点图(用于中心)

  8. QScatterSeries *series2 = new QScatterSeries();

  9. series2->setMarkerShape(QScatterSeries::MarkerShapeCircle); //圆形的点

  10. series2->setBorderColor(Qt::white); //边框颜色

  11. series2->setBrush(QBrush(Qt::white)); //背景颜色

  12. series2->setMarkerSize( 6);//点大小

  13. chart->addSeries(series1);

  14. chart->addSeries(series2);

  15. QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at( 0);

  16. QScatterSeries *series1 = (QScatterSeries *)ui->chartView->chart()->series().at( 1);

  17. QScatterSeries *series2 = (QScatterSeries *)ui->chartView->chart()->series().at( 2);

  18. series0->clear();

  19. series1->clear();

  20. series2->clear();

  21. qsrand(QTime::currentTime().second());

  22. qreal t= 0, y1, intv=1;

  23. qreal rd;

  24. int cnt=16;

  25. for (int i=0; i<cnt; i++)

  26. {

  27. rd = (qrand() % 100);

  28. y1=rd;

  29. series0->append(t, y1);

  30. series1->append(t, y1);

  31. series2->append(t, y1);

  32. t+=intv;

  33. }

效果如下:

QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失

做完这些,我们还有最后一个需求就是鼠标移动到这些离散的点上,要显示出当前点的数值。由于框架并没有提供相关的api,所以我们要自己完成这项工作。我们可以想象,显示的数值需要使用QLabel承载,当鼠标移动到这些点上,QLabel就show,移开就hide。那么怎么确定鼠标是否移动到这些离散点上呢?查阅文档,我们发现QCatterSeries有这样一个信号

QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失 他的意思就是,这是一个信号,当鼠标移动到上面,或者从上面移开就会发射这个信号,其中point是移动到哪个点上,当移动到上面,state=true;否则state就为false。

我们可以连接这个信号到我们自己的槽函数

connect(series2, &QScatterSeries::hovered, this, &TDMTrendChartForm::slotPointHoverd);//用于鼠标移动到点上显示数值
  1. void TDMTrendChartForm::slotPointHoverd(const QPointF &point, bool state)

  2. {

  3. if (state) {

  4. m_valueLabel->setText(QString::asprintf( "%1.0f%", point.y()));

  5. QPoint curPos = mapFromGlobal(QCursor::pos());

  6. m_valueLabel->move(curPos.x() - m_valueLabel->width() / 2, curPos.y() - m_valueLabel->height() * 1.5);//移动数值

  7. m_valueLabel->show(); //显示出来

  8. }

  9. else

  10. m_valueLabel->hide(); //进行隐藏

  11. }

QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失

======================================================================================

补充:完善了代码。增加鼠标悬浮在离散点上,应该显示渐变的边框。

QT QCharts QScatterSeries 空心点阵图,鼠标移动到上面显示数值,鼠标移开数值消失

这样我们就完成了相关功能。完整代码可以在这里下载:https://download.csdn.net/download/xiezhongyuan07/10675931

======================================================================================

--------------------- 本文来自 漫步繁华街 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/xiezhongyuan07/article/details/82760103?utm\_source=copy

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这