QT -- QChart画折线图

First：最终效果

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

1 、添加charts模块

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

• QtExample.pro：

# 添加Qt charts模块
QT    += charts

2  、包含charts头文件并引用QT charts命名空间

• main.cpp:

// 包含line chart需要的头文件
#include <QChartView>
#include <QLineSeries>

// 引用命名空间
QT_CHARTS_USE_NAMESPACE

int main()
{
    ...
}

3  、创建QLineSeries并添加数据

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

4  、创建QChart用于显示数据

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

• main.cpp:

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

5  、创建QChartView对象并显示图表

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

• main.cpp:

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

6  、完整源码

• QtExamples.cpp:

QT  += charts
SOURCES += 
        main.cpp

• main.cpp:

// 包含头文件
#include <QApplication>
#include <QChartView>
#include <QLineSeries>
// 引用命名空间
QT_CHARTS_USE_NAMESPACE

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);


    QLineSeries *series = new QLineSeries();

    series->append(0,2);
    series->append(QPointF(2,6));
    series->append(3,8);
    series->append(7,9);
    series->append(11,3);

    *series << QPointF(11,2) << QPointF(15,5) << QPointF(18,4) << QPointF(19,2);

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

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

    return a.exec();
}

7  、 参考

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