基于Qt的 QChartView
和定时器来动态绘制折线图。它通过动画的方式逐步将数据点添加到图表上,并动态更新坐标轴的范围,提供了一个可以实时更新数据的折线图应用。以下是对代码的详细介绍及其功能解析:
代码概述
该程序使用Qt的 QChartView
作为图表绘制的基础,结合 QLineSeries
或 QSplineSeries
来绘制折线或样条曲线。程序通过定时器 (QTimer
) 控制数据点的动态绘制,并在绘图过程中实时更新坐标轴的显示范围。
主要功能
- 动态创建系列 :可以动态创建多个曲线系列(
QLineSeries
或QSplineSeries
),每个系列对应一条折线或样条曲线。 - 动态添加数据点 :通过
addPointAnimated()
函数,可以为每个系列动态添加数据点,并通过动画效果逐步连接新数据点。 - 定时更新 :使用
QTimer
每隔一段时间调用animateDrawing()
函数,逐步将新点连接到已有的曲线上。 - 自动调整坐标轴范围:在绘制过程中,如果新点超出了当前坐标轴范围,坐标轴会自动调整以适应新的数据点。
代码结构
1. DynamicChart
类构造函数
cpp
DynamicChart::DynamicChart(QWidget *parent)
: QChartView(new QChart(), parent), m_chart(this->chart())
{
m_chart->setTitle("Dynamic Data Plot");
m_chart->legend()->hide();
setRenderHint(QPainter::Antialiasing);
// 设置图表主题和隐藏图例
m_chart->setTheme(QChart::ChartTheme::ChartThemeDark);
// 创建共用的坐标轴
axisX = new QValueAxis();
axisX->setRange(0, 100);
m_chart->addAxis(axisX, Qt::AlignBottom);
axisY = new QValueAxis();
axisY->setRange(0, 100);
m_chart->addAxis(axisY, Qt::AlignLeft);
// 设置定时器
connect(&timer, &QTimer::timeout, this, &DynamicChart::animateDrawing);
timer.setInterval(30); // 动画更新间隔为30毫秒
resize(500,500);
}
该构造函数中设置了图表的主题、坐标轴、以及定时器,定时器的作用是每隔30毫秒触发 animateDrawing()
函数,用于动态绘制数据。
2. createSeries()
函数
cpp
void DynamicChart::createSeries(int seriesId, const QString &name)
{
#ifdef LINE
QLineSeries *series = new QLineSeries();
#else
QSplineSeries *series = new QSplineSeries();
#endif
series->setName(name);
m_chart->addSeries(series);
// 使用共用的坐标轴
series->attachAxis(axisX);
series->attachAxis(axisY);
seriesMap.insert(seriesId, series);
}
该函数负责创建新的系列(折线或样条曲线),并将其添加到图表中。 seriesId
用于标识不同的曲线,name
则用于显示系列的名称。系列将共享同一套坐标轴。
3. addPointAnimated()
函数
cpp
void DynamicChart::addPointAnimated(int seriesId, const QPointF &point)
{
if (!seriesMap.contains(seriesId)) return;
#ifdef LINE
QLineSeries *series = seriesMap[seriesId];
#else
QSplineSeries *series =seriesMap[seriesId];
#endif
if (!series->points().isEmpty()) {
lastPoint = series->points().last();
} else {
lastPoint = point; // 第一个点直接添加
series->append(point);
}
newPoint = point;
currentSeriesId = seriesId;
currentStep = 0;
stepsCount = 10; // 分10步完成连线
timer.start();
}
该函数用于为指定的系列添加新点,并通过动画效果使新点逐步出现在图表上。它会计算新点与最后一个点之间的插值,并逐步绘制曲线。
4. animateDrawing()
函数
cpp
void DynamicChart::animateDrawing()
{
#ifdef LINE
QLineSeries *series = seriesMap[currentSeriesId];
#else
QSplineSeries *series =seriesMap[currentSeriesId];
#endif
if (currentStep >= stepsCount) {
timer.stop();
series->append(newPoint);
return;
}
qreal x = lastPoint.x() + (newPoint.x() - lastPoint.x()) * currentStep / stepsCount;
qreal y = lastPoint.y() + (newPoint.y() - lastPoint.y()) * currentStep / stepsCount;
series->append(x, y);
// 动态更新坐标轴
if (x > axisX->max()) {
axisX->setMax(x + 10);
}
if (y > axisY->max() || y < axisY->min()) {
axisY->setMax(qMax(y + 10, axisY->max()));
axisY->setMin(qMin(y - 10, axisY->min()));
}
currentStep++;
}
该函数实现了通过定时器触发的动态绘制。它逐步将新点与前一个点连接,并动态调整坐标轴的范围以适应新增数据。
主窗口逻辑
最后的代码片段展示了如何使用 DynamicChart
类创建一个包含多个曲线的图表,并通过按钮控制定时器的启动与停止:
cpp
setMinimumSize(QSize(800,500));
chartView = new DynamicChart(this);
chartView->createSeries(1, "Test Series 1");
chartView->createSeries(2, "Test Series 2");
chartView->createSeries(3, "Test Series 3");
chartView->createSeries(4, "Test Series 4");
QTimer *timer = new QTimer;
connect(timer, &QTimer::timeout, this, [=]()
{
int m_id = QRandomGenerator::global()->bounded(1, 5);
chartView->addPointAnimated(m_id, QPointF(m_index++, QRandomGenerator::global()->bounded(100)));
});
startButton = new QRadioButton("StartDrawing", this);
connect(startButton, &QRadioButton::clicked, [=](bool arg)
{
if (arg)
timer->start(100);
else
timer->stop();
});
通过 QRadioButton
控制定时器的启停,点击按钮后,程序将开始在图表上随机添加点,并动态绘制折线或样条曲线。
结论
此程序通过Qt的 QChartView
和定时器,实现了一个能够动态绘制多条曲线的折线图表。通过定时器控制数据点的逐步绘制,并结合坐标轴的动态更新,使得该图表在绘图过程中能够自动适应数据的变化。这种方式适用于需要实时显示数据变化的场景,如传感器数据的实时监控或动态性能分析等。