一、Qt Charts

Qt Charts是基于Qt Graphics View实现的一个图表的组件，可以用来在QT GUI程序中添加现在风格的、可交互的、以数据为中心的图表，可以用作QWidget或者 QGraphicsWidget，也可用在QML中。支持的图标类型有：折线图跟曲线图、面积图、饼图、柱状图等。

QT提供的相关的class有：

算了下，一共有48个类，实现一个图表并不需要全部用到，根据所需实现的图表，只需用到当中的几个就行，这些类，大致上可以分为如下几类：

  • QChartView Class： 一个用来显示图表的区域，或者理解为画布，可以在QChartView上实现所有Qt Chart支持的图表。

    QChartView <-- QGraphicsView <-- QAbstractScrollArea <-- QFrame <-- QWidget

  • QChart：QChart是QGraphicsWidget，可以在QGraphicsScene上显示，用来管理图表中的数据、图例、坐标轴等，

QChart <-- QGraphicsWidget <-- QGraphicsObject and QGraphicsLayoutItem QGraphicsObject <-- QObject and QGraphicsItem

二、实现一个最简单的折线图

1、创建一个Qt Widgets Application工程，如下图：

给工程命名为qchart,

做一个比较简单的，选择基类为QDialog:

建成后的项目如下：

2、编辑UI文件

打开dialog.ui,添加Vertical Layout,然后选择水平布局，如下图：

3、添加chart库

  • 编辑pro文件：在pro文件中添加：QT += charts，如下：

  • 在 .h声明命名空间(这里在dialog.h中添加)
using namespace QtCharts;

或者

QT_CHARTS_USE_NAMESPACE

编译运行，如果没有错误，运行结果如下：

4、添加QChartView

由于Qt Charts是基于Qt Graphics View实现的，要在UI应用中添加图表功能，首先需要个QGraphicsView，Qt Charts提供了QChartView，首先我们再这里添加QChartView: * 在头文件diloag.h中包含如下头文件

#include <QChartView>
  • 然后再类定义中添加变量：
class Dialog : public QDialog
{
    Q_OBJECT

public:
    explicit Dialog(QWidget *parent = nullptr);
    ~Dialog();

private:
    Ui::Dialog *ui;

    QChartView *ChartView;
};

其中

    QChartView *ChartView;

是新添加的，

  • 在Dialog构造函数中添加代码：
Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);


    ChartView = new QChartView(this);
    ui->verticalLayout->addWidget(ChartView);
}

运行结果如下：

上图中，与之前的执行结果相比，多了个白色区域，说明QChartView添加成功，因为我们还没有添加任何图标所以是空白的，

5、实现图表

QChartView成功添加了后，还要添加管理图表中的序列、坐标轴、图例的QChart，首先添加相关头文件：

 #include <QChart>

然后在类定义中添加一个QChart，

QChart *chart;

最后，实例化 QChart,并添加到QChartView，代码如下：

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);

    chart = new QChart();
    ChartView = new QChartView(this);
    ChartView->setChart(chart);
    ui->verticalLayout->addWidget(ChartView);
}

编译运行后如下：

结果跟上一个步骤一样，因为还没有添加任何图表类型，所以还是空白的，

6、添加折线图序列

添加了QChart后，就可以创建一些图标序列，添加到QChart，由于我们要实现的是折线图，这里使用QLineSeries，首先添加相关头文件：

#include "QLineSeries"

声明并实例化QLineSeries：

 QLineSeries* series = new QLineSeries();

然后给series添加几个点，并把series添加到chart中：

Dialog::Dialog(QWidget *parent) :
    QDialog(parent),
    ui(new Ui::Dialog)
{
    ui->setupUi(this);

    ui->setupUi(this);

    chart = new QChart();

    QLineSeries* series = new QLineSeries();
    series->append(0, 6);
    series->append(2, 4);
    series->append(4,8);
    series->append(8,10);
    series->append(10,12);

    chart->addSeries(series);
    chart->createDefaultAxes();

    ChartView = new QChartView(this);
    ChartView->setChart(chart);
    ui->verticalLayout->addWidget(ChartView);
}

运行结果如下：

到这里就实现了一个最简单的折线图了， 如果要实现其他的图表，如曲线图，只需要把第6部分的QLineSeries替换成QSplineSeries即可，当然不懂的图表，也许会有些不一样

参考：
Qt Charts Overview