19、QChartView繪圖

1、需要在工程文件.pro文件中添加，QT += charts

2、在ui界面放置一個widget控件，並將其提升為QChartView，繼承於QWidget

　如果將一個widget提升了QChartView后報錯，在ui_mainwindow.h中加入

QT_CHARTS_USE_NAMESPACE

3、構造一個QChart對象；

QChart* mychart; // 構建圖表類
QLineSeries *line; // 構建一個折線系列

mychart = new QChart;
    line = new QLineSeries(this); // 構建折線對象
    // 在折線上添加數據
    for(size_t i=0;i<100;i++)
    {
        line->append(i,4*sin(0.6f*i));  // 在折線上添加點
    }
    // 將折線添加到圖標上
    mychart->addSeries(line);
    mychart->createDefaultAxes();  // 創建默認的坐標軸
    mychart->setTheme(QChart::ChartThemeBlueCerulean);  // 設置背景為綠色
    mychart->legend()->hide(); // 隱藏圖例

    ui->widget->setChart(mychart); // 圖表綁定在視圖上

4、圖表添加修飾

 // 將折線添加到圖標上
    mychart->addSeries(line);
    mychart->createDefaultAxes();  // 創建默認的坐標軸
    mychart->setTheme(QChart::ChartThemeBlueCerulean);  // 設置背景為綠色
    mychart->legend()->hide(); // 隱藏圖例
    // 還是出現中文亂碼？
    mychart->setTitle(QString::fromLocal8Bit("圖表標題")); // 設置圖表標題

    ui->widget->setChart(mychart); // 圖表綁定在視圖上
    // 設置反走樣 折線平滑處理
    ui->widget->setRenderHint(QPainter::Antialiasing,true);

// 注意在析構的時候，釋放曲線
 mychart->removeAllSeries();  // 自帶的析構函數沒有釋放這塊，自己做析構

5、使用QGraphicView繪制圖表

 QGraphicsScene* Space;  // 構建一個場景

在上面的基礎上進行修改

mychart = new QChart;
    line = new QLineSeries(this); // 構建折線對象
    // 在折線上添加數據
    for(size_t i=0;i<100;i++)
    {
        line->append(i,4*sin(0.6f*i));  // 在折線上添加點
    }
    // 將折線添加到圖標上
    mychart->addSeries(line);
    mychart->createDefaultAxes();  // 創建默認的坐標軸
    mychart->setTheme(QChart::ChartThemeBlueCerulean);  // 設置背景為綠色
    mychart->legend()->hide(); // 隱藏圖例
    // 還是出現中文亂碼？
    mychart->setTitle(QString::fromLocal8Bit("圖表標題")); // 設置圖表標題
    mychart->setGeometry(0, 0, 300, 200); // 設置圖表尺寸
    //QGraphicsItem--->mychart
    Space = new QGraphicsScene(this);  // 構建場景
    Space->addItem(mychart);      // 圖表添加到視圖上
    ui->graphicsView->setScene(Space);   // 給場景設置視圖
    //ui->widget->setChart(mychart); // 圖表綁定在視圖上
    // 設置反走樣 折線平滑處理
    //ui->widget->setRenderHint(QPainter::Antialiasing,true);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing,true);

6、繪制動態折線圖

// 構建一個定時器，移動曲線，更新曲線，定時器超時槽函數

    QChart* mychart; // 構建圖表類
    //QLineSeries *line; // 構建一個折線系列
    QSplineSeries *line;  // 構建一個曲線系列
    QGraphicsScene* Space;  // 構建一個場景
    QTimer *timer; // 創建一定定時器
    QValueAxis* AxisX;  // 圖表X坐標軸
    QValueAxis* AxisY;  // 圖表Y坐標軸
    qint64 tmLast; // 上次進入定時器的時間
private:
    Ui::Widget *ui;
private slots:
    void Slot_Timeout();   // 定時器超時函數

在前面的基礎上修改代碼，構造函數

const quint32 Max_Axis = 300; // 定義X軸坐標范圍

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget), tmLast(0) // 構造函數中變量初始化
{
    ui->setupUi(this);

    mychart = new QChart;
    //line = new QLineSeries(this); // 構建折線對象
    line = new QSplineSeries(this);
    // 在折線上添加數據
    for(size_t i=0;i<Max_Axis;i++)
    {
        line->append(i,4*sin(0.6f*i));  // 在折線上添加點
    }
    // 將折線添加到圖標上
    mychart->addSeries(line);
    //mychart->createDefaultAxes();  // 創建默認的坐標軸

    // 構建自己的坐標軸
    AxisX = new QValueAxis(this);
    AxisX->setRange(0, Max_Axis);
    AxisX->setTitleText(QString::fromLocal8Bit("X"));

    AxisY = new QValueAxis(this);
    AxisY->setRange(-4, 4); // 設置坐標軸范圍
    AxisY->setTitleText(QString::fromLocal8Bit("Y")); // 設置Y軸坐標
    // 圖表添加坐標軸
    mychart->setAxisX(AxisX, line);
    mychart->setAxisY(AxisY, line);

    mychart->setTheme(QChart::ChartThemeBlueCerulean);  // 設置背景為綠色
    mychart->legend()->hide(); // 隱藏圖例
    // 還是出現中文亂碼？
    mychart->setTitle(QString::fromLocal8Bit("圖表標題")); // 設置圖表標題
    mychart->setGeometry(0, 0, 1000, 800); // 設置圖表尺寸

    //QGraphicsItem--->mychart
    Space = new QGraphicsScene(this);  // 構建場景
    Space->addItem(mychart);      // 圖表添加到視圖上
    ui->graphicsView->setScene(Space);   // 給場景設置視圖
    //ui->widget->setChart(mychart); // 圖表綁定在視圖上
    // 設置反走樣 折線平滑處理
    //ui->widget->setRenderHint(QPainter::Antialiasing,true);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing,true);

    // QTimer
    timer = new QTimer(this);
    timer->setInterval(100);  // 設置定時器間隔
    timer->start();           //啟動定時器
    // 定時器與槽函數關聯
    connect(timer,&QTimer::timeout,this,&Widget::Slot_Timeout);

實現曲線，動態顯示，定時器超時函數

    // 靜態數據存儲第一次進入定時器的時間
    static QTime tmBegin = QTime::currentTime();  // 當前時間 17:33:12.34
    //qDebug() << "tmBegin:"<<tmBegin;  //
    // tmEllaspsed: tmBegin從第一次定義到現在的時間 超時時間的n倍
    qint64 tmEllaspsed = tmBegin.elapsed();
    // qDebug() << "tmEllaspsed:"<<tmEllaspsed;
    // 計算兩次進入定時器經歷的時間差
    // 這樣獲取時間更精確
    qint64 nSkip = tmEllaspsed - tmLast;  // 約等於定時器超時時間
    //qDebug() << "nSkip:"<< nSkip;
    // 獲取曲線上的點
    QVector<QPointF> ptsOld = line->pointsVector();
    QVector<QPointF> ptsNew;    // 新數據
    // 曲線上后面的數據向前移動
    qint64 i=0;
    for(i=0;i< ptsOld.count() - nSkip;i++)
    {
        ptsNew.append(QPointF(i, ptsOld[i+ nSkip].y()));
    }
    // 補充新數據
    for(i = ptsOld.count() - nSkip;i < ptsOld.count();i++)
    {
        ptsNew.append(QPointF(i,4*sin(0.6f*i)));
    }
    // 更新數據
    line->replace(ptsNew);
    // 更新上次進入定時器的時間
    tmLast = tmEllaspsed;   //取現在的時間

 7、設置坐標軸的分辨率

AxisX->setTickCount(5); // 橫坐標被5等分刻度顯示

8、上面刷新的曲線，但是坐標軸不動；類似心電圖的曲線動，坐標軸也在刷新

ui->setupUi(this);

    mychart = new QChart;
    //line = new QLineSeries(this); // 構建折線對象
    line = new QSplineSeries(this);
    // 在折線上添加初始化數據，第一個點
    m_x = 0.f;   // 表示第一個點的橫坐標
    m_x= 300;  // 第一個點的初始化橫坐標在8的位置上
    // 曲線上添加第一個點，第一個點的位置決定曲線終點的位置
    line->append(m_x, 1);


    // 將折線添加到圖標上
    mychart->addSeries(line);
    //mychart->createDefaultAxes();  // 創建默認的坐標軸

    // 構建自己的坐標軸
    AxisX = new QValueAxis(this);
    AxisX->setRange(0, Max_Axis);
    AxisX->setTitleText(QString::fromLocal8Bit("X"));
    AxisX->setLabelFormat("%g");    // 去掉多余的0
    AxisX->setTickCount(5); // 橫坐標被分割5份 顯示

    AxisY = new QValueAxis(this);
    AxisY->setRange(-4, 4); // 設置坐標軸范圍
    AxisY->setTitleText(QString::fromLocal8Bit("Y")); // 設置Y軸坐標
    // 圖表添加坐標軸
    mychart->setAxisX(AxisX, line);
    mychart->setAxisY(AxisY, line);

    mychart->setTheme(QChart::ChartThemeBlueCerulean);  // 設置背景為綠色
    mychart->legend()->hide(); // 隱藏圖例
    // 還是出現中文亂碼？
    mychart->setTitle(QString::fromLocal8Bit("圖表標題")); // 設置圖表標題
    mychart->setGeometry(0, 0, 800,   600); // 設置圖表尺寸

    //QGraphicsItem--->mychart
    Space = new QGraphicsScene(this);  // 構建場景
    Space->addItem(mychart);      // 圖表添加到視圖上
    ui->graphicsView->setScene(Space);   // 給場景設置視圖
    //ui->widget->setChart(mychart); // 圖表綁定在視圖上
    // 設置反走樣 折線平滑處理
    //ui->widget->setRenderHint(QPainter::Antialiasing,true);
    ui->graphicsView->setRenderHint(QPainter::Antialiasing,true);

    // QTimer
    timer = new QTimer(this);
    timer->setInterval(200);  // 設置定時器間隔
    timer->start();           //啟動定時器
    // 定時器與槽函數關聯
    connect(timer,&QTimer::timeout,this,&Widget::Slot_Timeout);

qreal xOffset = 0.f;  // 定義一個數據偏移量
    qreal dIncrease = 0.5;  // 每個數據的x軸增加1
    for(int i=0;i<10;i++)
    {
        m_x += dIncrease;
        xOffset += dIncrease;
        line->append(m_x, qrand()%4);
    }
    if(line->count()*dIncrease > 500)
    {
        line->removePoints(0,line->count() - 500);
    }
    // 單位x軸上長度
    qreal xUnit = mychart->plotArea().width()/(AxisX->max()-AxisX->min());
    qreal xScrell = xUnit * xOffset; // 需要滾動的值
    mychart->scroll(xScrell, 0); // 取得是變化量