最近接到一個Qt QChart曲線圖美化的需求,畫一個折線圖，關鍵點使用空心的圓點標識出來，滑鼠移動到關鍵點上，顯示出當前數值；滑鼠移走數值消失。

效果圖如下：

我們遇到這個需求的時候，第一時間就會想到使用 QLineSeries 畫折線圖。

首先初始化

  QChart *chart = new QChart();
  chart->legend()->setVisible(false);
  ui->chartView->setChart(chart);
  ui->chartView->setRenderHint(QPainter::Antialiasing);
 
  chart->setBackgroundBrush(QBrush(QColor(248,251,255)));

將每個點新增到QLineSeries序列中。然後就會形成折線圖。如下：

  QChart *chart = ui->chartView->chart();
  chart->removeAllSeries();
  chart->removeAxis(chart->axisX());
  chart->removeAxis(chart->axisY());
 
  //折線圖
  QLineSeries *series0 = new QLineSeries();
 
  QPen pen;
  pen.setStyle(Qt::SolidLine);
  pen.setWidth(4);
  pen.setColor(QColor(21,100,255));
  series0->setPen(pen);//折現序列的線條設定
  QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at(0);
 
  series0->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);
    t+=intv;
  }

這是完成了第一步，畫出來了折線圖。但是對於那些圓點要顯示出來的話我們可以考慮使用QScatterSeries來畫一些離散的點。

  QScatterSeries *series1 = new QScatterSeries();
  series1->setMarkerShape(QScatterSeries::MarkerShapeCircle);//圓形的點
  series1->setBorderColor(QColor(21,255)); //離散點邊框顏色
  series1->setBrush(QBrush(QColor(21,255)));//離散點背景色
  series1->setMarkerSize(12); //離散點大小
  QLineSeries *series0 = (QLineSeries *)ui->chartView->chart()->series().at(0);
  QScatterSeries *series1 = (QScatterSeries *)ui->chartView->chart()->series().at(1);
 
  series0->clear();
  series1->clear();
 
  qsrand(QTime::currentTime().second());
 
  qreal t=0,y1);
    series1->append(t,y1);
 
    t+=intv;
  }

然後我們添加了一些離散的點，效果如下圖：

很顯然，雖然添加了離散的圓形的點，但是並沒有滿足我們的需求，因為需求是空心的圓點。而且控制元件也沒提供相關函式可以設定成空心。但是這裡面有3個函式值得注意

  series1->setBorderColor(QColor(21,255)));//離散點背景色
  series1->setMarkerSize(12); //離散點大小

因為可以設定一個點的大小，邊框和顏色。那我們如果想實現一個空心的離散點就可以這樣做：

以同一個位置為圓心，畫兩個半徑不同的實心圓。下面的圓半徑大，顏色就是邊框的顏色藍色；上面的圓形半徑小，顏色設定為白色。這樣兩個圓形疊加起來的效果，視覺上就是一個空心的圓形。按照這個思路，我們需要使用2個QScatterSeries序列

series0 : 半徑較大，背景為藍色，充當邊框。

series1：半徑較小，北京為白色，充電圓心。

  //散點圖(用於邊框)
  QScatterSeries *series1 = new QScatterSeries();
  series1->setMarkerShape(QScatterSeries::MarkerShapeCircle);//圓形的點
  series1->setBorderColor(QColor(21,255)); //邊框顏色
  series1->setBrush(QBrush(QColor(21,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);
    series2->append(t,y1);
 
    t+=intv;
  }

效果如下：

做完這些，我們還有最後一個需求就是滑鼠移動到這些離散的點上，要顯示出當前點的數值。由於框架並沒有提供相關的api，所以我們要自己完成這項工作。我們可以想象，顯示的數值需要使用QLabel承載，當滑鼠移動到這些點上，QLabel就show，移開就hide。那麼怎麼確定滑鼠是否移動到這些離散點上呢？查閱文件，我們發現QCatterSeries有這樣一個訊號

他的意思就是，這是一個訊號，當滑鼠移動到上面，或者從上面移開就會發射這個訊號，其中point是移動到哪個點上，當移動到上面，state=true;否則state就為false。

我們可以連線這個訊號到我們自己的槽函式

connect(series2,&QScatterSeries::hovered,this,&TDMTrendChartForm::slotPointHoverd);//用於滑鼠移動到點上顯示數值

void TDMTrendChartForm::slotPointHoverd(const QPointF &point,bool state)
{
  if (state) {
    m_valueLabel->setText(QString::asprintf("%1.0f%",point.y()));
 
    QPoint curPos = mapFromGlobal(QCursor::pos());
    m_valueLabel->move(curPos.x() - m_valueLabel->width() / 2,curPos.y() - m_valueLabel->height() * 1.5);//移動數值
 
    m_valueLabel->show();//顯示出來
  }
  else
    m_valueLabel->hide();//進行隱藏
 
}

例項原始碼中完善些程式碼，增加滑鼠懸浮在離散點上，應該顯示漸變的邊框。

這樣我們就完成了相關功能。完整程式碼可以在這裡下載

本文主要講解了Qt曲線圖美化QCharts QScatterSeries 空心點陣圖，滑鼠移動到上面顯示數值，滑鼠移開數值消失效果例項，更多關於Qt曲線圖QCharts模組的知識請檢視下面的相關連結