Qt圖形圖像開發(fā)之Qt曲線圖美化QChart QScatterSeries 空心點(diǎn)陣圖，鼠標(biāo)移動到上面顯示數(shù)值，鼠標(biāo)移開數(shù)值消失效果實(shí)例
最近接到一個Qt QChart曲線圖美化的需求,畫一個折線圖，關(guān)鍵點(diǎn)使用空心的圓點(diǎn)標(biāo)識出來，鼠標(biāo)移動到關(guān)鍵點(diǎn)上，顯示出當(dāng)前數(shù)值；鼠標(biāo)移走數(shù)值消失。
效果圖如下：
我們遇到這個需求的時候，第一時間就會想到使用 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)));
將每個點(diǎn)添加到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);//折現(xiàn)序列的線條設(shè)置
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;
}
這是完成了第一步，畫出來了折線圖。但是對于那些圓點(diǎn)要顯示出來的話我們可以考慮使用QScatterSeries來畫一些離散的點(diǎn)。
QScatterSeries *series1 = new QScatterSeries();
series1->setMarkerShape(QScatterSeries::MarkerShapeCircle);//圓形的點(diǎn)
series1->setBorderColor(QColor(21, 100, 255)); //離散點(diǎn)邊框顏色
series1->setBrush(QBrush(QColor(21, 100, 255)));//離散點(diǎn)背景色
series1->setMarkerSize(12); //離散點(diǎn)大小
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, 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);
t+=intv;
}
然后我們添加了一些離散的點(diǎn)，效果如下圖：
很顯然，雖然添加了離散的圓形的點(diǎn)，但是并沒有滿足我們的需求，因?yàn)樾枨笫强招牡膱A點(diǎn)。而且控件也沒提供相關(guān)函數(shù)可以設(shè)置成空心。但是這里面有3個函數(shù)值得注意
series1->setBorderColor(QColor(21, 100, 255)); //離散點(diǎn)邊框顏色 series1->setBrush(QBrush(QColor(21, 100, 255)));//離散點(diǎn)背景色 series1->setMarkerSize(12); //離散點(diǎn)大小
因?yàn)榭梢栽O(shè)置一個點(diǎn)的大小，邊框和顏色。那我們?nèi)绻雽?shí)現(xiàn)一個空心的離散點(diǎn)就可以這樣做：
以同一個位置為圓心，畫兩個半徑不同的實(shí)心圓。下面的圓半徑大，顏色就是邊框的顏色藍(lán)色；上面的圓形半徑小，顏色設(shè)置為白色。這樣兩個圓形疊加起來的效果，視覺上就是一個空心的圓形。按照這個思路，我們需要使用2個QScatterSeries序列
series0 : 半徑較大，背景為藍(lán)色，充當(dāng)邊框。
series1：半徑較小，北京為白色，充電圓心。
//散點(diǎn)圖(用于邊框)
QScatterSeries *series1 = new QScatterSeries();
series1->setMarkerShape(QScatterSeries::MarkerShapeCircle);//圓形的點(diǎn)
series1->setBorderColor(QColor(21, 100, 255)); //邊框顏色
series1->setBrush(QBrush(QColor(21, 100, 255)));//背景顏色
series1->setMarkerSize(12); //點(diǎn)大小
//散點(diǎn)圖(用于中心)
QScatterSeries *series2 = new QScatterSeries();
series2->setMarkerShape(QScatterSeries::MarkerShapeCircle);//圓形的點(diǎn)
series2->setBorderColor(Qt::white);//邊框顏色
series2->setBrush(QBrush(Qt::white));//背景顏色
series2->setMarkerSize(6);//點(diǎn)大小
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;
}
效果如下：
做完這些，我們還有最后一個需求就是鼠標(biāo)移動到這些離散的點(diǎn)上，要顯示出當(dāng)前點(diǎn)的數(shù)值。由于框架并沒有提供相關(guān)的api，所以我們要自己完成這項(xiàng)工作。我們可以想象，顯示的數(shù)值需要使用QLabel承載，當(dāng)鼠標(biāo)移動到這些點(diǎn)上，QLabel就show，移開就hide。那么怎么確定鼠標(biāo)是否移動到這些離散點(diǎn)上呢？查閱文檔，我們發(fā)現(xiàn)QCatterSeries有這樣一個信號
他的意思就是，這是一個信號，當(dāng)鼠標(biāo)移動到上面，或者從上面移開就會發(fā)射這個信號，其中point是移動到哪個點(diǎn)上，當(dāng)移動到上面，state=true;否則state就為false。
我們可以連接這個信號到我們自己的槽函數(shù)
connect(series2, &QScatterSeries::hovered, this, &TDMTrendChartForm::slotPointHoverd);//用于鼠標(biāo)移動到點(diǎn)上顯示數(shù)值
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);//移動數(shù)值
m_valueLabel->show();//顯示出來
}
else
m_valueLabel->hide();//進(jìn)行隱藏
}
實(shí)例源碼中完善些代碼，增加鼠標(biāo)懸浮在離散點(diǎn)上，應(yīng)該顯示漸變的邊框。
這樣我們就完成了相關(guān)功能。完整代碼可以在這里下載
本文主要講解了Qt曲線圖美化QCharts QScatterSeries 空心點(diǎn)陣圖，鼠標(biāo)移動到上面顯示數(shù)值，鼠標(biāo)移開數(shù)值消失效果實(shí)例，更多關(guān)于Qt曲線圖QCharts模塊的知識請查看下面的相關(guān)鏈接
相關(guān)文章
C++編程中使用設(shè)計模式中的policy策略模式的實(shí)例講解
這篇文章主要介紹了C++編程中使用設(shè)計模式中的policy策略模式的實(shí)例講解,文章最后對策略模式的優(yōu)缺點(diǎn)有一個簡單的總結(jié),需要的朋友可以參考下2016-03-03
C語言數(shù)組實(shí)現(xiàn)三子棋應(yīng)用實(shí)例
這篇文章主要為大家詳細(xì)介紹了C語言數(shù)組實(shí)現(xiàn)三子棋應(yīng)用實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了C++中的函數(shù)重載用法,包括重載時參數(shù)類型的差異以及匹配和轉(zhuǎn)換等方面問題的講解,需要的朋友可以參考下2016-01-01
C++基于Boost.Asio實(shí)現(xiàn)端口映射器的過程詳解
Boost.Asio 是一個功能強(qiáng)大的 C++ 庫,用于異步編程和網(wǎng)絡(luò)編程,它提供了跨平臺的異步 I/O 操作,在這篇文章中,我們將深入分析一個使用 Boost.Asio 實(shí)現(xiàn)的簡單端口映射服務(wù)器,文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了C++如何利用宏實(shí)現(xiàn)類成員反射,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,有興趣的小伙伴可以了解一下2024-01-01
這篇文章主要為大家詳細(xì)介紹了C++實(shí)現(xiàn)圖形界面雙人五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
學(xué)習(xí)智能指針有很多好處，可以幫我們C++程序員管理動態(tài)分配的內(nèi)存的，它會幫助我們自動釋放new出來的內(nèi)存，從而避免內(nèi)存泄漏，感興趣的朋友跟隨小編一起看看吧2021-08-08
C++實(shí)現(xiàn)LeetCode(42.收集雨水)
這篇文章主要介紹了C++實(shí)現(xiàn)LeetCode(42.收集雨水),本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
C語言結(jié)構(gòu)體版學(xué)生成績管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了C語言結(jié)構(gòu)體版的學(xué)生成績管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了C語言 聯(lián)合(union)用法案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08