Qt图形图像开发之Qt曲线图美化QChart QScatterSeries 空心点阵图,鼠

2020-03-12 20:01:09于丽

  series1->setBorderColor(QColor(21, 100, 255)); //离散点边框颜色
  series1->setBrush(QBrush(QColor(21, 100, 255)));//离散点背景色
  series1->setMarkerSize(12); //离散点大小

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

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

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

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

  //散点图(用于边框)
  QScatterSeries *series1 = new QScatterSeries();
  series1->setMarkerShape(QScatterSeries::MarkerShapeCircle);//圆形的点
  series1->setBorderColor(QColor(21, 100, 255)); //边框颜色
  series1->setBrush(QBrush(QColor(21, 100, 255)));//背景颜色
  series1->setMarkerSize(12);           //点大小
 
  //散点图(用于中心)
  QScatterSeries *series2 = new QScatterSeries();
  series2->setMarkerShape(QScatterSeries::MarkerShapeCircle);//圆形的点
  series2->setBorderColor(Qt::white);//边框颜色
  series2->setBrush(QBrush(Qt::white));//背景颜色
  series2->setMarkerSize(6);//点大小
 
  chart->addSeries(series1);
  chart->addSeries(series2);
  QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at(0);
  QScatterSeries *series1 = (QScatterSeries *)ui->chartView->chart()->series().at(1);
  QScatterSeries *series2 = (QScatterSeries *)ui->chartView->chart()->series().at(2);
 
  series0->clear();
  series1->clear();
  series2->clear();
 
  qsrand(QTime::currentTime().second());
 
  qreal t=0, y1, intv=1;
  qreal rd;
  int cnt=16;
  for (int i=0; i<cnt; i++)
  {
    rd = (qrand() % 100);
    y1=rd;
    series0->append(t, y1);
    series1->append(t, y1);
    series2->append(t, y1);
 
    t+=intv;
  }

效果如下:

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

他的意思就是,这是一个信号,当鼠标移动到上面,或者从上面移开就会发射这个信号,其中point是移动到哪个点上,当移动到上面,state=true;否则state就为false。