QChart的簡單使用

這篇部落格的目的是記錄一下今天學習QChart的内容以及使用初期踩到的幾個坑。

使用QChart的前期準備

1. Qt5.9及以上版本；

2. .pro檔案中添加QT += charts

3. 在使用QChart的各個控件之前，必須先聲明一個命名空間。方法不限，可以使用 QT_CHARTS_USE_NAMESPACE 宏值，也可以手動使用 using namespace QT_CHARTS_NAMESPACE;

了解QChart和QChartView的關系

QChart和QChartView的關系類似于QGraphicsScene和QGraphicsView的關系，QChart本身是用來存放需要展示的控件的類，而QChartView則是用于人眼識别觀察的入口。

所有的更改都是在QChart上發生的，不過更改的結果是通過QChartView來進行展示的，是以一般情況下，對于QChartView而言，在設定其關聯的QChart之後，就不需要進行其他的更改了。

一般情況下我們所做的各種更改，都是對于QChart而言的，而且一般情況下，QChart本身的功能還是不一定能夠滿足我們的使用需求，是以正常的使用過程中，我們都是自己寫一個繼承自QChart的類，然後對這個類進行更改。

不過呢，現在隻是初學，用QChart就足夠了。

結果展示

使用QChart繪制折線圖

目的：繪制一個折線圖，裡面包含兩根折線，以下是示例代碼，因為我想多使用幾個函數，是以下面的代碼由于各種注釋掉的函數可能看起來可能會亂一些：

#include <QChart>
#include <QLineSeries>
#include <QChartView>
#include <QAreaSeries>
#include <QDateTimeAxis>
#include <QValueAxis>
#include <QDateTime>

#include "mainwindow.h"
#include "ui_mainwindow.h"


//此句必備
QT_CHARTS_USE_NAMESPACE

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

	//建立藍色線
    QLineSeries *pLineSeries = new QLineSeries();
    pLineSeries->setPen(QPen(Qt::blue, 1, Qt::SolidLine));
    pLineSeries->append(1, 5);
    pLineSeries->append(3, 4);
    QList<QPointF> list;
    list << QPointF(4, 8) << QPointF(6,10) << QPointF(7, 3) << QPointF(10, 6);
    pLineSeries->append(list);
    pLineSeries->setName(QStringLiteral("藍色線"));

	//建立紅色線
    QLineSeries *pLineSeries2 = new QLineSeries();
    pLineSeries2->setPen(QPen(Qt::red, 1, Qt::SolidLine));
    pLineSeries2->append(1, 2);
    pLineSeries2->append(3, 4);
    QList<QPointF> list2;
    list2 << QPointF(4, 1) << QPointF(5,10) << QPointF(9, 6) << QPointF(10, 20);
    pLineSeries2->append(list2);
    pLineSeries2->setName(QStringLiteral("紅色線"));
    pLineSeries2->setColor(Qt::red);

    pLineSeries->setPointLabelsVisible(false);
    pLineSeries->setPointLabelsColor(Qt::green);
    pLineSeries->setPointsVisible(true);

	//建立QChart
    QChart *pChart = new QChart();
    pChart->addSeries(pLineSeries);
    pChart->addSeries(pLineSeries2);
    pChart->setTitle(QStringLiteral("測試QChart運作"));
    pChart->createDefaultAxes();
//    pChart->axisX()->setRange(0, 15);
//    pChart->axisY()->setRange(-10, 30);

    pChart->setTheme(QChart::ChartThemeDark);    pLineSeries2->setColor(Qt::red);
    pLineSeries->setColor(Qt::blue);

    //QDateTimeAxis *x = new QDateTimeAxis();
//    QValueAxis *x = new QValueAxis();
//    QValueAxis *y = new QValueAxis();
//    x->setRange(0, 30);
//    y->setRange(-10, 40);
//    pChart->setAxisX(x);
//    pChart->setAxisY(y);

//    QDateTimeAxis *x = new QDateTimeAxis();
//    QDateTime min = QDateTime(QDate(2020, 1, 1), QTime(0, 0, 0));
//    QDateTime max = QDateTime(QDate(2020, 2, 2), QTime(23, 59, 59));
//    x->setRange(min, max);
//    pChart->setAxisX(x);
//    pChart->setAxisY(y);

	//建立QChartView
    QChartView *pView = new QChartView();
    pView->setChart(pChart);
    pView->setRenderHint(QPainter::Antialiasing);

    this->setCentralWidget(pView);
}
           

使用過程中踩到的幾個坑

1. 命名空間

第一個坑就是命名空間，最開始的時候，我沒有使用 QT_CHARTS_USE_NAMESPACE ，這就導緻我在聲明一些諸如坐标軸、折線等控件的時候，一直報錯，就如下圖所示，一直報找不到這玩意的錯誤，最開始真的把我整懵了，後來才在示例代碼中發現了他使用了這個宏，我就抱着嘗試的态度添加上了，最終才解決掉。

2. 折線的顔色未按照預期進行顯示

這個問題出在我加了這行代碼之後：

這個時候，顯示的界面如下：

發現，我原先設定的折線的顔色為紅色和藍色，但是這裡面顯示的已經不是這個顔色了。一度令我十分苦惱，後來孫工的一句話提醒了我， 他說：“是不是樣式權重的問題。”，這句話提醒了我，是不是樣式設定順序的問題，導緻我在設定QChart的樣式的時候，将原先設定的折線的樣式給覆寫掉了，因為在Qt中，所有的樣式設定優先級都是一樣的，優先級一樣造成後面的樣式會覆寫掉原先的樣式，這就是最開始的時候折線不是我設定的紅色藍色的原因，最終發現确實是這樣，是以我就在下面又添了幾行代碼（測試用，是以沒有考慮備援的問題）：

pChart->setTheme(QChart::ChartThemeDark);
    pLineSeries2->setColor(Qt::red);
    pLineSeries->setColor(Qt::blue);
           

這樣改了之後，最終的顯示結果就是按照設定的來的了。

最後，着重要提醒的是，在使用QChart的時候要加上命名空間！！！

參考連結

折線圖參考連結

添加參考連結