一、Qt Charts
Qt Charts是基於Qt Graphics View實現的一個圖表的組件，可以用來在QT GUI程序中添加現在風格的、可交互的、以數據為中心的圖表，可以用作QWidget或者 QGraphicsWidget，也可用在QML中。支持的圖標類型有：折線圖跟曲線圖、面積圖、餅圖、柱狀圖等。
QT提供的相關的class有：
算了下，一共有48個類，實現一個圖表並不需要全部用到，根據所需實現的圖表，只需用到當中的幾個就行，這些類，大致上可以分為如下幾類：
-
QChartView Class：
一個用來顯示圖表的區域，或者理解為畫布，可以在QChartView上實現所有Qt Chart支持的圖表。QChartView的派生關系如下：QChartView <-- QGraphicsView <-- QAbstractScrollArea <-- QFrame <-- QWidget -
QChart：QChart是QGraphicsWidget，可以在QGraphicsScene上顯示，用來管理圖表中的數據、圖例、坐標軸等，QChart的派生關系如下：
QChart <-- QGraphicsWidget <-- QGraphicsObject and QGraphicsLayoutItem QGraphicsObject <-- QObject and QGraphicsItem -
圖表類型
- QLineSeries
- QSplineSeries
- QAreaSeries
- QScatterSeries
- QAbstractBarSeries
* BarSeries
* StackedBarSeries
* PercentBarSeries
* HorizontalBarSeries
* HorizontalStackedBarSeries
* HorizontalPercentBarSeries - QPieSeries
- QBoxPlotSeries
- QCandlestickSeries
所有圖表類型都是從QAbstractSeries 派生出來的，QAbstractSeries 是一個抽象序列，
-
QAbstractAxis :坐標軸
-
圖例：基類為QLegendMarker,在此基礎上派生出不同的圖例，如QAreaLegendMarker, QBarLegendMarker, QBoxPlotLegendMarker等
二、實現一個最簡單的折線圖
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即可，當然不同的圖表，也許會有些不一樣
完整代碼：qchart_01