媒体查询做响应式网站互动营销案例分析

两个核心类时QChart和QLineSeries

下面这个示例代码中，定时器每隔一段时间将曲线图中的数据点向右移动 一个单位，同时调整横坐标轴的范围，实现了一次滚动对应移动一个数据点的效果。

QLineSeries最多容纳4096+1024个点

#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtCharts/QChartView>
#include <QtCharts/QLineSeries>
#include <QtCharts/QValueAxis>
#include <QtCore/QRandomGenerator>
#include <QtCore/QTimer>
#include <QDebug>QT_CHARTS_USE_NAMESPACEint main(int argc, char *argv[])
{QApplication a(argc, argv);QMainWindow window;QChartView *chartView = new QChartView(&window);window.setCentralWidget(chartView);QChart *chart = new QChart();chart->legend()->hide();chartView->setChart(chart);chart->createDefaultAxes();QLineSeries *series = new QLineSeries();chart->addSeries(series);chart->createDefaultAxes();QValueAxis *axisX = qobject_cast<QValueAxis *>(chart->axes(Qt::Horizontal).at(0));QValueAxis *axisY = qobject_cast<QValueAxis *>(chart->axes(Qt::Vertical).at(0));axisY->setRange(0, 120);// 初始化数据点qreal startX = 0;for (int i = 0; i < 100; ++i) {series->append(startX + i, QRandomGenerator::global()->bounded(100));}int currentIndex = 0; // 当前数据点索引QTimer timer;timer.setInterval(100);QObject::connect(&timer, &QTimer::timeout, [&](){if (series->points().size() >= 4096 + 1024){int n = series->points().size() - 4096;series->removePoints(0, n);currentIndex-= n;qDebug() << "remove " << n;}qDebug() << currentIndex;// 移动数据点//series->remove(0);series->append(series->points().last().x() + 1, QRandomGenerator::global()->bounded(100));// 计算滚动后的横坐标范围qreal minX = series->points().at(currentIndex).x();qreal maxX = series->points().last().x();qreal targetMinX = minX + 1;qreal targetMaxX = maxX + 1;axisX->setRange(targetMinX, targetMaxX);currentIndex++;});timer.start();window.resize(800, 600);window.show();return a.exec();
}

.pro文件

QT       += core gui chartsgreaterThan(QT_MAJOR_VERSION, 4): QT += widgetsCONFIG += c++11# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0SOURCES += \main.cppHEADERS +=TRANSLATIONS += \myChart_zh_CN.ts# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target