1 概述
QSplineSeries類是Qt圖表模塊中的一個曲線系列類，用于繪制平滑的二次和三次曲線。這個系列通過在給定的數(shù)據(jù)點之間插值來繪制曲線，從而使得曲線更加平滑。
使用QSplineSeries時，需要將數(shù)據(jù)點作為QPointF類型的列表傳遞給數(shù)據(jù)集。然后將數(shù)據(jù)集添加到QChart中。可以使用QSplineSeries的其他方法來設(shè)置線條顏色、寬度、拐點形狀等。
2 主要功能
- 動態(tài)繪制曲線圖
- 放大、縮小以及還原圖表視圖
- 實時獲取圖表坐標值
3 功能步驟
3.1 動態(tài)曲線圖
- 在
.pro文件加入模塊，charts。
QT += core gui charts
- 在設(shè)計師界面拖拽一個
QGraphicsView控件，提升為自己重寫的MyChartView類。
- 在
MyChartView類以及MainWindow類頭文件里加入圖表命名空間，以及對應頭文件。
#include <QChartView>
QT_CHARTS_USE_NAMESPACE
// 或者 using namespace QtCharts;
- 主要代碼
// 頭文件相關(guān)聲明
const int AXIS_MIN_X = 0;
const int AXIS_MAX_X = 50;
const int AXIS_MIN_Y = -50;
const int AXIS_MAX_Y = 50;
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
MainWindow(QWidget *parent = nullptr);
~MainWindow();
private Q_SLOTS:
void onTimeOut();
private:
void createChart(); // 創(chuàng)建圖表
private:
Ui::MainWindow *ui;
QChart *chart;
QSplineSeries *series;
QValueAxis *axisX;
QTimer *timer;
QRandomGenerator *randGenerator;
int m_lastY; // 記錄series上一次y軸值
bool m_pause; // 記錄是否暫停繪圖
bool m_start; // 記錄是否啟動繪圖
QLabel *m_labXYValue;
};
// 構(gòu)造函數(shù)
MainWindow::MainWindow(QWidget *parent)
: QMainWindow(parent)
, ui(new Ui::MainWindow)
, m_lastY(0)
, m_pause(false)
, m_start(false)
{
ui->setupUi(this);
timer = new QTimer(this);
randGenerator = QRandomGenerator::global();
m_labXYValue = new QLabel("X = , Y = ", this);
ui->statusbar->addWidget(m_labXYValue);
createChart(); // 創(chuàng)建圖表
connect(timer, &QTimer::timeout, this, &MainWindow::onTimeOut);
}
// 創(chuàng)建圖表
void MainWindow::createChart()
{
chart = new QChart;
ui->chartView->setChart(chart);
ui->chartView->setRenderHint(QPainter::Antialiasing);
series = new QSplineSeries;
series->setName("隨機數(shù)動態(tài)曲線");
QPen pen;
pen.setStyle(Qt::SolidLine);
pen.setWidth(2);
pen.setColor(QColor(30, 144, 255));
series->setPen(pen);
chart->addSeries(series);
axisX = new QValueAxis;
axisX->setRange(AXIS_MIN_X, AXIS_MAX_X); // 設(shè)置坐標軸范圍
axisX->setLabelFormat("%.1f"); // 標簽格式
axisX->setTickCount(6); // 坐標軸刻度的數(shù)量
// axisX->setMinorTickCount(2); // 坐標軸小刻度的數(shù)量
axisX->setMinorGridLineVisible(true);
axisX->setTitleText("X軸"); //標題
QValueAxis *axisY = new QValueAxis;
axisY->setRange(AXIS_MIN_Y, AXIS_MAX_Y);
axisY->setLabelFormat("%.1f");
axisY->setTickCount(11);
// axisY->setMinorTickCount(2);
axisY->setMinorGridLineVisible(true);
axisY->setTitleText("Y軸");
chart->addAxis(axisX, Qt::AlignBottom);
chart->addAxis(axisY, Qt::AlignLeft);
series->attachAxis(axisX); // 需在chart->addSeries(series)后
series->attachAxis(axisY);
//-----------
series->append(QPointF(0.0, 0.0));
}
主要的思路就是通過使用定時器并設(shè)置一定的間隔，不斷往序列添加QPointF。繪制到圖表并顯示到圖表視圖上。這里的QPointF是通過Qt的隨機數(shù)生成器類QRandomGenerator來生成曲線序列y軸值，具體的序列點也可以通過實際采集的數(shù)據(jù)來進行顯示。
// count: 全局靜態(tài)統(tǒng)計x軸值的變量
void MainWindow::onTimeOut()
{
timer->stop();
if(count > AXIS_MAX_X) {
series->remove(0);
chart->axes(Qt::Horizontal, series).at(0)->setMin(count - AXIS_MAX_X);
chart->axes(Qt::Horizontal, series).at(0)->setMax(count);
}
int y = randGenerator->bounded(m_lastY - 15, m_lastY + 16);
if (y < AXIS_MIN_Y) { // 生成的y軸值小于y軸最小值
y += 15;
} else if (y > AXIS_MAX_Y) { // 生成的y軸值大于y軸最大值
y -= 15;
}
series->append(QPointF(count, y));
m_lastY = y; // 記錄series上一次y軸值
count += 2;
timer->start(300);
}
3.2 放大、縮小以及還原
通過QChart類提供的函數(shù)實現(xiàn)
void MainWindow::on_actZoomIn_triggered()
{
chart->zoom(1.2);
}
void MainWindow::on_actZoomOut_triggered()
{
chart->zoom(0.8);
}
void MainWindow::on_actZoomReset_triggered()
{
chart->zoomReset();
}
3.3 實時獲取圖表坐標值
- 在自己的圖表視圖類里添加自定義鼠標移動信號，以及重寫父類鼠標移動事件。
class MyChartView : public QChartView
{
Q_OBJECT
public:
explicit MyChartView(QWidget *parent = nullptr);
protected:
void mouseMoveEvent(QMouseEvent *event) override;
void wheelEvent(QWheelEvent *event) override;
signals:
void mouseMovePoint(QPoint point);
};
- 源文件定義
setMouseTracking(true) 將鼠標跟蹤設(shè)置為true（缺省為false)。如果不設(shè)置為true，窗口組件只在某個鼠標按鍵按下時才接收鼠標移動事件，設(shè)置為true 之后，只要鼠標移動就會發(fā)射mouseMoveEvent()事件。文章來源：http://www.zghlxwxcb.cn/news/detail-759597.html
MyChartView::MyChartView(QWidget *parent) : QChartView(parent)
{
setMouseTracking(true);
}
void MyChartView::mouseMoveEvent(QMouseEvent *event)
{
QPoint point = event->pos();
emit mouseMovePoint(point);
QChartView::mouseMoveEvent(event);
}
void MyChartView::wheelEvent(QWheelEvent *event)
{
// 垂直滾動
if (event->angleDelta().y() > 0) {
chart()->zoom(1.2);
} else {
chart()->zoom(0.8);
}
QChartView::wheelEvent(event);
}
- 在窗口類（MainWindow）里連接與
MyChartView類的信號槽。
connect(ui->chartView, &MyChartView::mouseMovePoint, this, &MainWindow::onMouseMovePoint);
void MainWindow::onMouseMovePoint(QPoint point)
{
QPointF pos = ui->chartView->chart()->mapToValue(point);
m_labXYValue->setText(QString("X = %1, Y = %2")
.arg(QString::number(pos.x(), 'f', 2))
.arg(QString::number(pos.y(), 'f', 2)));
}
4 具體效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-759597.html
到了這里，關(guān)于Qt Charts - 繪制簡單曲線圖（1）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
