当前位置：首页 > news >正文

别再只会画折线图了！用Qt Charts搞定柱状图、饼图、散点图（附完整C++源码）

news 2026/5/2 8:16:50

Qt Charts全栈实战：5种数据可视化图表从原理到封装

在数据驱动的时代，如何将枯燥的数字转化为直观的视觉呈现，是每个开发者都需要掌握的技能。Qt Charts作为Qt官方提供的图表模块，凭借其跨平台特性和丰富的API，成为C++开发者实现数据可视化的首选方案。但很多开发者往往止步于简单的折线图应用，未能充分发挥其潜力。

1. 数据可视化基础架构设计

1.1 统一数据模型构建

高效的数据可视化始于合理的数据结构设计。我们推荐使用QStandardItemModel作为基础数据容器，它比TreeWidget更具灵活性：

QStandardItemModel *model = new QStandardItemModel(this); model->setColumnCount(5); model->setHeaderData(0, Qt::Horizontal, "ID"); model->setHeaderData(1, Qt::Horizontal, "数学"); model->setHeaderData(2, Qt::Horizontal, "语文"); model->setHeaderData(3, Qt::Horizontal, "英语"); model->setHeaderData(4, Qt::Horizontal, "平均分"); // 示例数据填充 for(int i=0; i<10; ++i) { model->setItem(i, 0, new QStandardItem(QString::number(1000+i))); model->setItem(i, 1, new QStandardItem(QString::number(70+qrand()%30))); model->setItem(i, 2, new QStandardItem(QString::number(60+qrand()%35))); model->setItem(i, 3, new QStandardItem(QString::number(65+qrand()%30))); model->setItem(i, 4, new QStandardItem( QString::number((model->item(i,1)->text().toInt() + model->item(i,2)->text().toInt() + model->item(i,3)->text().toInt())/3.0, 'f', 1))); }

1.2 图表视图封装策略

创建可复用的ChartView组件，避免重复初始化代码：

class ChartView : public QChartView { public: explicit ChartView(QWidget *parent = nullptr) : QChartView(new QChart(), parent) { chart()->setAnimationOptions(QChart::SeriesAnimations); setRenderHint(QPainter::Antialiasing); } void addSeries(QAbstractSeries *series) { chart()->addSeries(series); chart()->createDefaultAxes(); } void clear() { chart()->removeAllSeries(); auto axes = chart()->axes(); for(auto axis : axes) { chart()->removeAxis(axis); delete axis; } } };

2. 对比分析：柱状图深度应用

2.1 基础柱状图实现

柱状图最适合展示离散数据的对比关系。Qt Charts通过QBarSeries、QBarSet和QBarCategoryAxis三个核心类实现：

void createBarChart(QAbstractItemModel *model, ChartView *view) { view->clear(); QBarSeries *series = new QBarSeries(); QStringList categories; // 创建数据集 QBarSet *mathSet = new QBarSet(model->headerData(1, Qt::Horizontal).toString()); QBarSet *chineseSet = new QBarSet(model->headerData(2, Qt::Horizontal).toString()); QBarSet *englishSet = new QBarSet(model->headerData(3, Qt::Horizontal).toString()); // 填充数据 for(int row=0; row<model->rowCount(); ++row) { mathSet->append(model->index(row, 1).data().toInt()); chineseSet->append(model->index(row, 2).data().toInt()); englishSet->append(model->index(row, 3).data().toInt()); categories << model->index(row, 0).data().toString(); } series->append(mathSet); series->append(chineseSet); series->append(englishSet); view->addSeries(series); // 自定义X轴 QBarCategoryAxis *axisX = new QBarCategoryAxis(); axisX->append(categories); view->chart()->setAxisX(axisX, series); // 自定义Y轴 QValueAxis *axisY = qobject_cast<QValueAxis*>(view->chart()->axisY()); axisY->setTitleText("分数"); axisY->setRange(0, 100); }

2.2 高级柱状图变体

堆叠柱状图展示部分与整体的关系，只需将QBarSeries替换为QStackedBarSeries：

QStackedBarSeries *stackedSeries = new QStackedBarSeries(); stackedSeries->append(mathSet); stackedSeries->append(chineseSet); stackedSeries->append(englishSet); stackedSeries->setLabelsVisible(true); stackedSeries->setLabelsFormat("@value分");

百分比柱状图则使用QPercentBarSeries，自动将数值转换为百分比：

QPercentBarSeries *percentSeries = new QPercentBarSeries(); percentSeries->append(mathSet); percentSeries->append(chineseSet); percentSeries->append(englishSet); percentSeries->setLabelsVisible(true); percentSeries->setLabelsFormat("@value%");

3. 比例呈现：饼图的艺术

3.1 基础饼图实现

饼图通过QPieSeries和QPieSlice展示各部分占比：

void createPieChart(QAbstractItemModel *model, ChartView *view, int row) { view->clear(); QPieSeries *series = new QPieSeries(); series->setHoleSize(0.35); // 创建环形图效果 // 添加学科数据 for(int col=1; col<=3; ++col) { QString label = model->headerData(col, Qt::Horizontal).toString(); qreal value = model->index(row, col).data().toDouble(); QPieSlice *slice = series->append(label, value); // 动态设置颜色 static QList<QColor> colors = {Qt::blue, Qt::green, Qt::red}; slice->setBrush(colors.at(col-1)); slice->setLabelVisible(true); } view->addSeries(series); // 突出显示最大部分 QPieSlice *maxSlice = series->slices().at(0); for(QPieSlice *slice : series->slices()) { if(slice->value() > maxSlice->value()) maxSlice = slice; } maxSlice->setExploded(true); }

3.2 交互增强技巧

通过信号槽实现鼠标悬停高亮效果：

// 在创建series后添加 for(QPieSlice *slice : series->slices()) { connect(slice, &QPieSlice::hovered, [=](bool state){ slice->setExploded(state); slice->setLabelVisible(state); }); }

4. 分布观察：散点图实战

4.1 基础散点图

QScatterSeries展示二维数据分布：

void createScatterChart(QAbstractItemModel *model, ChartView *view) { view->clear(); QScatterSeries *series = new QScatterSeries(); series->setName("成绩分布"); series->setMarkerShape(QScatterSeries::MarkerShapeCircle); series->setMarkerSize(15.0); // 数学vs英语成绩散点 for(int row=0; row<model->rowCount(); ++row) { qreal math = model->index(row, 1).data().toDouble(); qreal english = model->index(row, 3).data().toDouble(); series->append(math, english); } view->addSeries(series); view->chart()->setTitle("数学与英语成绩相关性分析"); // 坐标轴设置 QValueAxis *axisX = qobject_cast<QValueAxis*>(view->chart()->axisX()); axisX->setTitleText("数学成绩"); axisX->setRange(50, 100); QValueAxis *axisY = qobject_cast<QValueAxis*>(view->chart()->axisY()); axisY->setTitleText("英语成绩"); axisY->setRange(50, 100); }

4.2 趋势线叠加

结合QSplineSeries展示数据趋势：

// 在散点图代码后添加 QSplineSeries *trendLine = new QSplineSeries(); trendLine->setName("趋势线"); QPen pen(Qt::red); pen.setWidth(2); trendLine->setPen(pen); // 简单线性回归计算(示例) qreal sumX=0, sumY=0, sumXY=0, sumX2=0; int n = model->rowCount(); for(int row=0; row<n; ++row) { qreal x = model->index(row, 1).data().toDouble(); qreal y = model->index(row, 3).data().toDouble(); sumX += x; sumY += y; sumXY += x*y; sumX2 += x*x; } qreal slope = (n*sumXY - sumX*sumY)/(n*sumX2 - sumX*sumX); qreal intercept = (sumY - slope*sumX)/n; // 添加趋势线点 trendLine->append(50, slope*50 + intercept); trendLine->append(100, slope*100 + intercept); view->chart()->addSeries(trendLine); trendLine->attachAxis(axisX); trendLine->attachAxis(axisY);

5. 高级技巧与性能优化

5.1 动态数据更新

实现实时数据可视化：

// 定时更新示例 QTimer *timer = new QTimer(this); connect(timer, &QTimer::timeout, [=](){ static int row = 0; if(++row >= model->rowCount()) row = 0; // 随机更新数据 for(int col=1; col<=3; ++col) { qreal newValue = 50 + qrand() % 50; model->setData(model->index(row, col), newValue); // 更新平均分 qreal avg = (model->index(row,1).data().toDouble() + model->index(row,2).data().toDouble() + model->index(row,3).data().toDouble()) / 3; model->setData(model->index(row,4), QString::number(avg, 'f', 1)); } // 重绘图表 updateCharts(); }); timer->start(1000);

5.2 大数据量优化

当数据点超过1000时，启用OpenGL加速：

// 在创建series后设置 if(model->rowCount() > 1000) { series->setUseOpenGL(true); qDebug() << "启用OpenGL加速"; }

5.3 主题与样式定制

统一应用专业配色方案：

void applyProfessionalTheme(QChart *chart) { // 内置主题选择 chart->setTheme(QChart::ChartThemeBlueIcy); // 或完全自定义 chart->setBackgroundBrush(QBrush(QColor("#f5f5f5"))); chart->setTitleBrush(QBrush(Qt::darkBlue)); QFont font; font.setPixelSize(12); chart->setFont(font); // 坐标轴样式 for(auto axis : chart->axes()) { axis->setGridLineColor(QColor("#e0e0e0")); axis->setLabelsFont(font); } }

查看全文

http://www.jsqmd.com/news/736865/