本文将演示如何用Qt Charts快速实现一个最简单的折线图显示。

如果您想直接运行体验效果，可以直接点击这里下载源码编译：

0x00 最终效果

​ 本文最后将会实现如下效果：

0x01 添加charts模块

​ Qt Charts作为一个独立的模块，在使用前需要在项目的pro文件中添加：

• QtExample.pro：

1# 添加Qt charts模块
2QT    += charts

0x02 包含charts头文件并引用QT charts命名空间

• main.cpp:

1// 包含line chart需要的头文件
2#include <QChartView>
3#include <QLineSeries>
4// 引用命名空间
5QT_CHARTS_USE_NAMESPACE
6
7int main(){
8    ...
9}

0x03 创建QLineSeries并添加数据

​ 折线图的实现需要创建一个QLineSeries对象用于保存和绘制折线数据：

• main.cpp:

 1// new 一个 QLineSeries实例
 2QLineSeries *series = new QLineSeries();
 3// 添加实验数据,可以用 append 方法或者 >> 操作符
 4series->append(0,2);
 5series->append(QPointF(2,6));
 6series->append(3,8);
 7series->append(7,9);
 8series->append(11,3);
 9
10*series << QPointF(11,2) << QPointF(15,5) << QPointF(18,4) << QPointF(19,2);

0x04 创建QChart用于显示数据

​ 创建好series后，需要创建一个QChart实例并关联series，创建坐标才能将数据显示出来：

• main.cpp:

 1QChart *chart = new QChart();
 2// 将图例隐藏
 3chart->legend()->hide();
 4// 关联series，这一步很重要，必须要将series关联到QChart才能将数据渲染出来：
 5chart->addSeries(series);
 6// 开启OpenGL，QLineSeries支持GPU绘制，Qt其他有的图表类型是不支持的。
 7series->setUseOpenGL(true);
 8// 创建默认的坐标系（笛卡尔坐标）
 9chart->createDefaultAxes();
10// 设置图表标题
11chart->setTitle(QStringLiteral("Qt line chart example"));

0x05 创建QChartView对象并显示图表

​ 这里创建QChartView对象是为了将最终结果显示到界面，如果不想用QChartView，也可以选择QGraphicsView scene来显示。

• main.cpp:

1QChartView *view = new QChartView(chart);
2// 开启抗锯齿，让显示效果更好
3view->setRenderHint(QPainter::Antialiasing);
4view->resize(400,300);
5// 显示图表
6view->show();

0x06 完整源码

• QtExamples.cpp:

1QT  += charts
2SOURCES += \
3        main.cpp

• main.cpp:

 1// 包含头文件
 2#include <QApplication>
 3#include <QChartView>
 4#include <QLineSeries>
 5// 引用命名空间
 6QT_CHARTS_USE_NAMESPACE
 7
 8int main(int argc, char *argv[])
 9{
10    QApplication a(argc, argv);
11
12
13    QLineSeries *series = new QLineSeries();
14
15    series->append(0,2);
16    series->append(QPointF(2,6));
17    series->append(3,8);
18    series->append(7,9);
19    series->append(11,3);
20
21    *series << QPointF(11,2) << QPointF(15,5) << QPointF(18,4) << QPointF(19,2);
22
23    QChart *chart = new QChart();
24    // 将图例隐藏
25    chart->legend()->hide();
26    // 关联series，这一步很重要，必须要将series关联到QChart才能将数据渲染出来：
27    chart->addSeries(series);
28    // 开启OpenGL，QLineSeries支持GPU绘制，Qt其他有的图表类型是不支持的。
29    series->setUseOpenGL(true);
30    // 创建默认的坐标系（笛卡尔坐标）
31    chart->createDefaultAxes();
32    // 设置图表标题
33    chart->setTitle(QStringLiteral("Qt line chart example"));
34
35    QChartView *view = new QChartView(chart);
36    // 开启抗锯齿，让显示效果更好
37    view->setRenderHint(QPainter::Antialiasing);
38    view->resize(400,300);
39    // 显示图表
40    view->show();
41
42    return a.exec();
43}

0x07 参考

• Qt LineChart Example，或者直接在Qt Creator搜索linechart：

  

​

0x08 The end :)