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

Stella981
• 阅读 514

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

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
1年前
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
Jacquelyn38 Jacquelyn38
1年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
刚刚好 刚刚好
5个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
晴空闲云 晴空闲云
5个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
5个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Wesley13 Wesley13
1年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Wesley13 Wesley13
1年前
PHP中的NOW()函数
是否有一个PHP函数以与MySQL函数NOW()相同的格式返回日期和时间?我知道如何使用date()做到这一点,但是我问是否有一个仅用于此的函数。例如,返回:2009120100:00:001楼使用此功能:functiongetDatetimeNow(){
Wesley13 Wesley13
1年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
helloworld_28799839 helloworld_28799839
5个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
helloworld_34035044 helloworld_34035044
8个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为