第二十四章：QT Charts：让数据“活”起来

各位同学，今天我们来聊聊QT Charts。说实话，我第一次接触这个模块是在做一个工业监控项目，当时需要实时显示传感器数据。老板扔给我一句话：“把数据变成图，要好看，要能交互。”我盯着满屏的数字，心想这玩意儿怎么搞？后来才发现，QT Charts就是为此而生的。

说白了，QT Charts就是Qt官方提供的一套数据可视化组件。它把枯燥的数字变成折线、饼图、柱状图，让你一眼就能看出数据背后的规律。我个人习惯把它叫做“数据的翻译官”——把数字语言翻译成视觉语言。

24.1 三大主力：QLineSeries、QPieSeries、QBarSeries

QT Charts里系列（Series）是核心。我把它比作“画笔”——你选什么笔，就画什么图。

24.1.1 QLineSeries：折线图

折线图是最常用的，适合展示趋势。我在项目中用它来显示CPU温度变化曲线。

// 创建折线系列
QLineSeries *series = new QLineSeries();
series->setName("CPU温度");

// 添加数据点
*series << QPointF(0, 36) << QPointF(1, 38) 
        << QPointF(2, 42) << QPointF(3, 45);

// 创建图表
QChart *chart = new QChart();
chart->addSeries(series);
chart->setTitle("CPU温度监控");
chart->createDefaultAxes();

嗯，这里要注意：createDefaultAxes()会自动根据数据范围创建坐标轴。但如果你需要自定义刻度，就得手动创建QValueAxis。

24.1.2 QPieSeries：饼图

饼图适合展示占比。我记得有一次做市场分析，需要展示各产品线的营收占比。用饼图一画，老板立刻就知道哪个产品最赚钱。

QPieSeries *series = new QPieSeries();
series->append("产品A", 35);
series->append("产品B", 25);
series->append("产品C", 20);
series->append("产品D", 20);

// 设置某个扇区突出显示
QPieSlice *slice = series->slices().at(0);
slice->setExploded(true);
slice->setLabelVisible(true);

24.1.3 QBarSeries：柱状图

柱状图适合对比。我常用它来比较不同月份的销售额。

QBarSet *set0 = new QBarSet("2023年");
QBarSet *set1 = new QBarSet("2024年");

*set0 << 120 << 150 << 180 << 200;
*set1 << 130 << 160 << 190 << 220;

QBarSeries *series = new QBarSeries();
series->append(set0);
series->append(set1);

24.2 图表交互：让用户“玩”起来

光有静态图表还不够。用户想放大看细节怎么办？想拖拽看历史数据怎么办？QT Charts提供了丰富的交互功能。

24.2.1 缩放与平移

我习惯用QChartView自带的交互功能。只需要设置一下rubber band（橡皮筋选择）就行。

QChartView *chartView = new QChartView(chart);
chartView->setRenderHint(QPainter::Antialiasing);
chartView->setRubberBand(QChartView::RectangleRubberBand);

设置之后，用户就可以按住鼠标左键拖出一个矩形区域，图表会自动放大到该区域。右键拖拽可以平移视图。说白了，这就是一个“放大镜+平移手”的组合。

24.2.2 信号与槽：点击交互

我曾经做过一个需求：点击饼图的某个扇区，显示该扇区的详细信息。这就要用到信号了。

// 连接点击信号
connect(series, &QPieSeries::clicked, 
        [](QPieSlice *slice) {
    qDebug() << "你点击了：" << slice->label() 
            << " 占比：" << slice->percentage();
});

折线图和柱状图也有类似的信号：clicked(QPointF point)、hovered(QPointF point, bool state)。hovered信号可以用来做悬停提示，用户体验很好。

24.3 动态数据更新：让图表“动”起来

这是最实用的部分。实时监控、股票行情、传感器数据……都需要动态更新。我当年做的一个项目，每100毫秒就要更新一次数据，刚开始没处理好，界面卡成PPT。

24.3.1 追加数据

对于折线图，最常用的操作是追加数据点，同时移除旧点，保持窗口大小固定。

void updateChart(QLineSeries *series, qreal newValue) {
    // 追加新数据
    series->append(series->count(), newValue);
    
    // 移除旧数据（只保留最近100个点）
    while (series->count() > 100) {
        series->remove(0);
    }
    
    // 更新坐标轴范围
    chart->axisX()->setRange(0, series->count());
}

24.3.2 定时器驱动更新

用QTimer驱动数据更新，这是标准做法。

QTimer *timer = new QTimer(this);
connect(timer, &QTimer::timeout, [&]() {
    qreal newValue = QRandomGenerator::global()->bounded(100);
    updateChart(series, newValue);
});
timer->start(100); // 每100毫秒更新一次

你想想看，如果数据更新频率很高（比如10毫秒一次），UI线程可能会被阻塞。这时候就需要把数据采集和图表更新分离到不同线程。嗯，这个有点复杂，我们后面再讲。

24.4 知识体系总览

为了让大家更直观地理解本章的知识结构，我画了一张图：

24.5 实战经验总结

最后，分享几个我在项目中踩过的坑：

• 内存泄漏：每次更新都new新的series，旧的没delete。正确做法是复用对象，或者用智能指针。
• 性能瓶颈：数据点太多（超过10万）时，图表会卡顿。解决方案是降采样——只显示关键点。
• 坐标轴混乱：动态更新时忘记更新坐标轴范围，导致数据点超出视图。记得每次更新后调用chart->axisX()->setRange()。
• 线程问题：在非GUI线程更新图表会崩溃。用QMetaObject::invokeMethod或者信号槽把更新操作切回主线程。

好了，这一章的内容就到这里。QT Charts其实还有很多高级玩法——比如自定义图表主题、使用QChart的动画效果、甚至结合OpenGL加速渲染。这些我们后面再聊。记住一句话：数据可视化不是炫技，而是让数据自己“说话”。

---