1. QChart动态折线图基础入门

第一次接触Qt Charts模块时，我被它简洁的API设计惊艳到了。记得当时我需要为一个工业监控项目快速实现数据可视化，QChart仅用不到50行代码就帮我完成了基础折线图的绘制。下面让我们从最基础的动态折线图开始。

要在项目中使用QChart模块，首先需要在.pro文件中添加charts模块依赖：

QT += charts

接下来是创建图表的核心三件套：

// 创建图表视图
QChartView *chartView = new QChartView(this);
// 创建图表对象
QChart *chart = new QChart();
// 创建折线序列
QLineSeries *series = new QLineSeries();

动态折线图的关键在于定时更新数据。我通常会使用QTimer来实现周期性数据刷新：

QTimer *timer = new QTimer(this);
connect(timer, &QTimer::timeout, this, &MainWindow::updateData);
timer->start(1000); // 每秒更新一次

在updateData函数中，我们可以模拟实时数据：

void MainWindow::updateData()
{
    static qreal x = 0;
    qreal y = qSin(x); // 模拟正弦波数据
    
    // 添加新数据点
    series->append(x, y);
    
    // 限制显示的数据点数量
    if(series->count() > 100) {
        series->remove(0); // 移除最旧的点
    }
    
    x += 0.1;
    
    // 自动调整X轴范围
    chart->axisX()->setRange(x-10, x);
}

实际项目中，数据可能来自串口、网络或传感器。我曾遇到一个温度监控项目，需要显示最近5分钟的温度变化。这时可以结合QDateTimeAxis来显示时间轴：

QDateTimeAxis *axisX = new QDateTimeAxis;
axisX->setFormat("hh:mm:ss");
chart->addAxis(axisX, Qt::AlignBottom);
series->attachAxis(axisX);

2. 实时数据流处理技巧

处理实时数据流时，我发现有几个常见陷阱需要注意。首先是数据同步问题 - 当数据更新频率很高时，直接在主线程处理可能导致界面卡顿。我的解决方案是使用生产者-消费者模式，将数据采集和界面更新分离。

数据缓冲区是个实用技巧：

// 定义数据结构
struct DataPoint {
    qreal x;
    qreal y;
    QDateTime timestamp;
};

// 线程安全的环形缓冲区
QVector<DataPoint> dataBuffer;
QMutex bufferMutex;

在数据采集线程中：

void DataThread::run()
{
    while(!isInterruptionRequested()) {
        DataPoint point = readFromSensor(); // 从传感器读取数据
        
        QMutexLocker locker(&bufferMutex);
        if(dataBuffer.size() >= MAX_BUFFER_SIZE) {
            dataBuffer.removeFirst();
        }
        dataBuffer.append(point);
    }
}

在主线程的定时器中：

void MainWindow::updateChart()
{
    QMutexLocker locker(&bufferMutex);
    if(!dataBuffer.isEmpty()) {
        series->clear();
        for(const auto &point : dataBuffer) {
            series->append(point.timestamp.toMSecsSinceEpoch(), point.y);
        }
    }
}

对于高频数据（如音频信号），直接绘制所有点会导致性能问题。我常用的优化方法是数据降采样：

void downsampleData(const QVector<DataPoint> &source, QVector<DataPoint> &target, int factor)
{
    target.clear();
    for(int i=0; i<source.size(); i+=factor) {
        target.append(source[i]);
    }
}

网络数据可视化是另一个常见场景。我曾开发过一个股票行情系统，使用WebSocket接收实时数据：

connect(webSocket, &QWebSocket::textMessageReceived, [=](const QString &message){
    QJsonDocument doc = QJsonDocument::fromJson(message.toUtf8());
    QJsonObject obj = doc.object();
    
    qreal price = obj["price"].toDouble();
    qint64 timestamp = obj["time"].toVariant().toLongLong();
    
    // 添加到图表
    series->append(timestamp, price);
    
    // 保持最近100个点
    if(series->count() > 100) {
        series->remove(0);
    }
});

3. 图表性能优化实战

当数据量增大时，图表性能可能成为瓶颈。经过多个项目的实践，我总结出几个关键优化点：

首先是启用OpenGL加速：

series->setUseOpenGL(true);
chartView->setRenderHint(QPainter::Antialiasing);

但要注意，OpenGL在某些嵌入式设备上可能不可用。我曾在一个ARM开发板上遇到这个问题，最终通过软件渲染加上以下优化解决了：

1. 减少数据点数量（前面提到的降采样）
2. 简化图表元素：

chart->setAnimationOptions(QChart::NoAnimation); // 禁用动画
chart->legend()->hide(); // 隐藏图例

3. 自定义绘制区域：

chartView->setViewportUpdateMode(QGraphicsView::MinimalViewportUpdate);

内存管理也很重要。我发现有些开发者会不断创建新的QLineSeries对象，这会导致内存泄漏。正确的做法是重用现有series：

// 错误做法（内存泄漏）：
void updateChart() {
    QLineSeries *newSeries = new QLineSeries();
    // ...添加数据...
    chart->removeAllSeries();
    chart->addSeries(newSeries);
}

// 正确做法：
void updateChart() {
    series->clear();
    // ...重用series添加新数据...
}

对于需要显示多条曲线的情况，我建议使用不同的视觉样式区分：

QPen pen;
pen.setWidth(2);
pen.setColor(Qt::blue);
series1->setPen(pen);

pen.setColor(Qt::red);
pen.setStyle(Qt::DashLine);
series2->setPen(pen);

在移动设备上，触摸交互的优化也很关键：

chartView->setRubberBand(QChartView::RectangleRubberBand); // 矩形缩放
chartView->setInteractive(true); // 启用交互

4. 高级功能与实战案例

在工业控制系统中，我们经常需要添加参考线和阈值标记。这是我常用的实现方式：

// 添加水平参考线
QLineSeries *refLine = new QLineSeries();
refLine->append(chart->axisX()->min(), 0.5);
refLine->append(chart->axisX()->max(), 0.5);
refLine->setPen(QPen(Qt::red, 1, Qt::DashLine));
chart->addSeries(refLine);
refLine->attachAxis(chart->axisX());
refLine->attachAxis(chart->axisY());

动态调整坐标轴范围可以提升用户体验：

void adjustAxisRange()
{
    qreal minY = std::numeric_limits<qreal>::max();
    qreal maxY = std::numeric_limits<qreal>::min();
    
    for(const auto &point : series->points()) {
        if(point.y() < minY) minY = point.y();
        if(point.y() > maxY) maxY = point.y();
    }
    
    // 添加10%的边距
    qreal margin = (maxY - minY) * 0.1;
    chart->axisY()->setRange(minY - margin, maxY + margin);
}

在医疗设备项目中，我实现了心电图效果的动态曲线：

// 模拟心电图数据
void generateECGData()
{
    static int phase = 0;
    qreal y = 0;
    
    // 心电图特征波形
    if(phase % 100 < 5) y = 0.5;  // P波
    else if(phase % 100 == 25) y = 2.0; // QRS波群
    else if(phase % 100 == 26) y = -1.0;
    else if(phase % 100 == 27) y = 0;
    else if(phase % 100 == 85) y = 0.3; // T波
    else y = 0;
    
    series->append(phase*0.02, y);
    phase++;
}

对于金融数据可视化，蜡烛图是常见需求。虽然QChart没有内置蜡烛图，但我们可以用QBoxPlotSeries模拟：

QBoxPlotSeries *candleSeries = new QBoxPlotSeries();
QBoxSet *box = new QBoxSet("");

// 设置开盘、收盘、最高、最低价
box->setValue(QBoxSet::LowerQuartile, openPrice);
box->setValue(QBoxSet::UpperQuartile, closePrice);
box->setValue(QBoxSet::Median, (openPrice+closePrice)/2);
box->setValue(QBoxSet::Minimum, lowPrice);
box->setValue(QBoxSet::Maximum, highPrice);

candleSeries->append(box);

最后分享一个实用的调试技巧 - 当图表表现不符合预期时，可以检查坐标轴绑定状态：

qDebug() << "X轴范围:" << chart->axisX()->min() << "-" << chart->axisX()->max();
qDebug() << "Y轴范围:" << chart->axisY()->min() << "-" << chart->axisY()->max();
qDebug() << "数据点数量:" << series->count();