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.  
    
6.  
   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.  
   //折线图
7.  
   QLineSeries *series0 = new QLineSeries();
8.  
    
9.  
   QPen pen;
10.  
    pen.setStyle(Qt::SolidLine);
11.  
    pen.setWidth( 4);
12.  
    pen.setColor(QColor( 21, 100, 255));
13.  
    series0->setPen(pen); //折现序列的线条设置

1.  
   QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at( 0);
2.  
    
3.  
   series0->clear();
4.  
    
5.  
   qsrand(QTime::currentTime().second());
6.  
    
7.  
   qreal t= 0, y1, intv=1;
8.  
   qreal rd;
9.  
   int cnt=16;
10.  
    for (int i=0; i<cnt; i++)
11.  
    {
12.  
    rd = (qrand() % 100);
13.  
    y1=rd;
14.  
    series0->append(t, y1);
15.  
    t+=intv;
16.  
    }

这是完成了第一步，画出来了折线图。可是对于那些圆点要显示出来的话咱们能够考虑使用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); //离散点大小

1.  
   QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at( 0);
2.  
   QScatterSeries *series1 = (QScatterSeries *)ui->chartView->chart()->series().at( 1);
3.  
    
4.  
   series0->clear();
5.  
   series1->clear();
6.  
    
7.  
   qsrand(QTime::currentTime().second());
8.  
    
9.  
   qreal t= 0, y1, intv=1;
10.  
    qreal rd;
11.  
    int cnt=16;
12.  
    for (int i=0; i<cnt; i++)
13.  
    {
14.  
    rd = (qrand() % 100);
15.  
    y1=rd;
16.  
    series0->append(t, y1);
17.  
    series1->append(t, y1);
18.  
     
19.  
    t+=intv;
20.  
    }

而后咱们添加了一些离散的点，效果以下图：

很显然，虽然添加了离散的圆形的点，可是并无知足咱们的需求，由于需求是空心的圆点。并且控件也没提供相关函数能够设置成空心。可是这里面有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.  
   //散点图(用于中心)
9.  
   QScatterSeries *series2 = new QScatterSeries();
10.  
    series2->setMarkerShape(QScatterSeries::MarkerShapeCircle); //圆形的点
11.  
    series2->setBorderColor(Qt::white); //边框颜色
12.  
    series2->setBrush(QBrush(Qt::white)); //背景颜色
13.  
    series2->setMarkerSize( 6);//点大小
14.  
     
15.  
    chart->addSeries(series1);
16.  
    chart->addSeries(series2);

1.  
   QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at( 0);
2.  
   QScatterSeries *series1 = (QScatterSeries *)ui->chartView->chart()->series().at( 1);
3.  
   QScatterSeries *series2 = (QScatterSeries *)ui->chartView->chart()->series().at( 2);
4.  
    
5.  
   series0->clear();
6.  
   series1->clear();
7.  
   series2->clear();
8.  
    
9.  
   qsrand(QTime::currentTime().second());
10.  
     
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.  
    series2->append(t, y1);
21.  
     
22.  
    t+=intv;
23.  
    }

效果以下：

作完这些，咱们还有最后一个需求就是鼠标移动到这些离散的点上，要显示出当前点的数值。因为框架并无提供相关的api，因此咱们要本身完成这项工做。咱们能够想象，显示的数值须要使用QLabel承载，当鼠标移动到这些点上，QLabel就show，移开就hide。那么怎么肯定鼠标是否移动到这些离散点上呢？查阅文档，咱们发现QCatterSeries有这样一个信号

他的意思就是，这是一个信号，当鼠标移动到上面，或者从上面移开就会发射这个信号，其中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.  
    
6.  
   QPoint curPos = mapFromGlobal(QCursor::pos());
7.  
   m_valueLabel->move(curPos.x() - m_valueLabel->width() / 2, curPos.y() - m_valueLabel->height() * 1.5);//移动数值
8.  
    
9.  
   m_valueLabel->show(); //显示出来
10.  
    }
11.  
    else
12.  
    m_valueLabel->hide(); //进行隐藏
13.  
     
14.  
    }

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

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

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

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

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