往窗口添加一个Graphics View，然后提升为QChartView，
QtCharts绘制四条动态折线图 - 图1

dx1000_charts.h

  1. #ifndef DX1000_CHARTS_H
  2. #define DX1000_CHARTS_H
  4. #include <QWidget>
  6. #include <QWidget>
  7. #include <QtCharts>
  9. #include <QtCharts/QSplineSeries>
  10. #include <QDateTime>
  12. QT_CHARTS_USE_NAMESPACE   //使用qtchart需要加入这条语句
  14. namespace Ui {
  15. class DX1000_Charts;
  16. }
  18. class DX1000_Charts : public QWidget
  19. {
  20.     Q_OBJECT
  22. public:
  23.     // explicit DX1000_Charts(QWidget *parent = 0);
  24.     DX1000_Charts(QString name, int min, int max);
  25.     ~DX1000_Charts();
  27.     /*menbers**************************************************************************************/
  29.     //声明QChart的实例，QSplineSeries的实例
  31.     QChart *chart;
  33.     // 4条折线
  34.     QSplineSeries *series1;
  35.     QSplineSeries *series2;
  36.     QSplineSeries *series3;
  37.     QSplineSeries *series4;
  39.     /*funcions **************************************************************************************/
  41.     //声明划线的函数和初始化QChart的函数
  42.     void drawLine(float Y1 = 0, float Y2 = 0, float Y3 = 0, float Y4 = 0);
  44.     void initChart(QString name, int min, int max);
  46. public slots:
  48.     /*slot function**********************************************************************************/
  50.     //声明timer的槽函数
  51.     void timerDeal(float Y1 = 0, float Y2 = 0, float Y3 = 0, float Y4 = 0);
  53. private:
  54.     Ui::DX1000_Charts *ui;
  55. };
  57. #endif // DX1000_CHARTS_H

dx1000_charts.cpp

  1. #include "dx1000_charts.h"
  2. #include "ui_dx1000_charts.h"
  4. #include <QtCharts/QAbstractAxis>
  5. #include <QtCharts/QSplineSeries>
  6. #include <QtCharts/QValueAxis>
  7. #include <QtCore/QTime>
  8. #include <QtCore/QDebug>
  9. #include <QPen>
  10. #include <QPainter>
  11. #include <QtCharts\QLegendMarker>
  13. //DX1000_Charts::DX1000_Charts(QWidget *parent) :
  14. //    QWidget(parent),
  15. DX1000_Charts::DX1000_Charts(QString name, int min, int max) :
  17.     ui(new Ui::DX1000_Charts)
  18. {
  19.     ui->setupUi(this);
  21.     //初始化QChart
  22.     initChart(name, min, max);
  23. }
  25. DX1000_Charts::~DX1000_Charts()
  26. {
  27.     delete ui;
  28. }
  31. //实现QChart的初始化函数
  32. void DX1000_Charts::initChart(QString name, int min, int max)
  34. {
  35.     //初始化QChart的实例
  36.     chart=new QChart();
  37.     chart->setTitle(name);
  39.     //初始化两个QSplineSeries的实例
  40.     series1=new QSplineSeries();
  41.     series2=new QSplineSeries();
  42.     series3=new QSplineSeries();
  43.     series4=new QSplineSeries();
  45.     //设置两条曲线的名称
  46.     series1->setName("1号气");
  47.     series2->setName("1号油");
  48.     series3->setName("2号气");
  49.     series4->setName("2号油");
  51.     //把曲线添加到QChart的实例chart中
  52.     chart->addSeries(series1);
  53.     chart->addSeries(series2);
  54.     chart->addSeries(series3);
  55.     chart->addSeries(series4);
  57.     //声明并初始化X轴、两个Y轴
  58.     QDateTimeAxis * axisX=new QDateTimeAxis();
  59.     axisX->setTickCount(2);
  60.     axisX->setFormat("MM-dd hh:mm:ss");
  62.     //    QValueAxis *axisX = new QValueAxis();
  64.     QValueAxis *axisY_1=new QValueAxis();
  65.     QValueAxis *axisY_2=new QValueAxis();
  67.     //设置坐标轴显示的范围
  68.     axisX->setMin(QDateTime::currentDateTime().addSecs(-60*1));
  69.     axisX->setMax(QDateTime::currentDateTime().addSecs(0));
  71.     axisY_1->setMin(min);
  72.     axisY_1->setMax(max);
  73.     axisY_2->setMin(min);
  74.     axisY_2->setMax(max);
  77.     //设置坐标轴上的格点
  78.     axisY_1->setTickCount(11);
  79.     axisY_2->setTickCount(11);
  81.     //设置坐标轴显示的名称
  82. //    axisX->setTitleText("时间");
  83. //    axisY_1->setTitleText("axisY_1-series1");
  84.     axisY_2->setTitleText("(L)");
  86.     //设置坐标轴的颜色，粗细，设置网格不显示
  87.     axisY_1->setLinePenColor(QColor(Qt::darkBlue));
  88.     axisY_1->setGridLineColor(QColor(Qt::darkBlue));
  89.     axisY_2->setLinePenColor(QColor(Qt::darkGreen));
  90.     axisY_2->setGridLineColor(QColor(Qt::darkGreen));
  91.     axisY_1->setGridLineVisible(false);
  92.     axisY_2->setGridLineVisible(false);
  94.     QPen penY1(Qt::darkBlue,3,Qt::SolidLine,Qt::RoundCap,Qt::RoundJoin);
  95.     QPen penY2(Qt::darkGreen,3,Qt::SolidLine,Qt::RoundCap,Qt::RoundJoin);
  97.     axisY_1->setLinePen(penY1);
  98.     axisY_2->setLinePen(penY2);
  101.     //把坐标轴添加到chart中，
  103.     //addAxis函数的第二个参数是设置坐标轴的位置，
  105.     //只有四个选项，下方：Qt::AlignBottom，左边：Qt::AlignLeft，右边：Qt::AlignRight，上方：Qt::AlignTop
  106.     chart->addAxis(axisX,Qt::AlignBottom);
  107.     chart->addAxis(axisY_1,Qt::AlignLeft);
  108.     chart->addAxis(axisY_2,Qt::AlignRight);
  111.     //把曲线关联到坐标轴
  112.     series1->attachAxis(axisX);
  113.     series1->attachAxis(axisY_1);
  115.     series2->attachAxis(axisX);
  116.     series2->attachAxis(axisY_2);
  118.     series3->attachAxis(axisX);
  119.     series3->attachAxis(axisY_2);
  121.     series4->attachAxis(axisX);
  122.     series4->attachAxis(axisY_2);
  125.     //把chart显示到窗口上
  126.      ui->graphicsView->setChart(chart);
  128. }
  131. //实现画线函数，动态更新
  132. void DX1000_Charts::drawLine(float Y1, float Y2, float Y3, float Y4)
  133. {
  135.     //每增加一个点改变X轴的范围，实现曲线的动态更新效果
  137.     QDateTime bjtime=QDateTime::currentDateTime();
  139.     qsrand(QTime(0,0,0).secsTo(QTime::currentTime()));
  141.     chart->axisX()->setMin(QDateTime::currentDateTime().addSecs(-60*1));
  143.     chart->axisX()->setMax(QDateTime::currentDateTime().addSecs(0));
  146.     //当曲线上最早的点超出X轴的范围时，剔除最早的点，
  147.     if(series1->count()>135)
  148.     {
  149.         series1->removePoints(0,series1->count()-135);
  150.     }
  152.     if(series2->count()>119)
  154.     {
  155.         series2->removePoints(0,series2->count()-119);
  156.     }
  158.     if(series3->count()>119)
  160.     {
  161.         series3->removePoints(0,series3->count()-119);
  162.     }
  164.     if(series4->count()>119)
  166.     {
  167.         series4->removePoints(0,series4->count()-119);
  168.     }
  171.     // int Y1=qrand()%9;//随机生成0到9的随机数
  173.     // int Y2=9+qrand()%9;//随机生成9到18的随机数
  175.     //增加新的点到曲线末端
  176.     series1->append(bjtime.toMSecsSinceEpoch(),Y1);
  177.     series2->append(bjtime.toMSecsSinceEpoch(),Y2);
  178.     series3->append(bjtime.toMSecsSinceEpoch(),Y3);
  179.     series4->append(bjtime.toMSecsSinceEpoch(),Y4);
  181. }
  183. //实现timer的槽函数
  185. void DX1000_Charts::timerDeal(float Y1, float Y2, float Y3, float Y4)
  187. {
  188.     //定时画曲线
  189.     drawLine(Y1, Y2, Y3, Y4);
  191. }

dx1000_dialogsp.h

  1. #ifndef DX1000_DIALOGSP_H
  2. #define DX1000_DIALOGSP_H
  4. #include <QWidget>
  5. #include <QSerialPort>
  6. #include "dx1000_dialogspselect.h"
  7. #include <QTimer>
  9. #include "dx1000_charts.h"
  12. namespace Ui {
  13. class Dx1000_dialogSP;
  14. }
  16. class Dx1000_dialogSP : public QWidget
  17. {
  18.     Q_OBJECT
  20. public:
  21.     explicit Dx1000_dialogSP(QWidget *parent = 0);
  22.     ~Dx1000_dialogSP();
  24.     // DX1000_Charts *chart;
  25.     DX1000_Charts *chart = new DX1000_Charts("实时量", 0, 100);
  26.     DX1000_Charts *chart2 = new DX1000_Charts("累计量", 0, 1000);
  28.     bool mIsOpen = false;
  29.     bool getSerialPortConfig(QString name, QString rate , QString parity, QString dataBits, QString stopBits);
  31.     QString ascTohex(QByteArray array);
  33.     QTimer *timer; // 定时器
  35.     // 接收串口设置的参数
  36.     QString m_name = NULL;
  37.     QString m_rate = NULL;
  38.     QString m_parity = NULL;
  39.     QString m_dataBits = NULL;
  40.     QString m_stopBits = NULL;
  42.     // 图片
  43.     QPixmap pix_red; // 红色灯
  44.     QPixmap pix_green; // 绿色灯
  45.     QPixmap pix_gray; // 灰色灯
  46.     QPixmap pix_open; // 打开图片
  47.     QPixmap pix_close; // 关闭图片
  50.     QByteArray recvDataAll; // 存储数据 A数据
  52.     int lan = 0; // 串口接收的数据长度 A数据
  54.     uint dataLang; // 接收的数据位
  55.     bool isOnc = true;
  57.     QString isSendData = NULL; // 数据存储 校验
  58.     bool isAllA = true; // 判断A数据是否接收完成
  59.     bool isAllB = true; // 判断B数据是否接收完成
  61.     bool isOpen = false; // 压力按钮是否点击了
  63.     QString TAG = NULL; // 标记
  65.     // 指令合并方法 参数1：数据，
  66.     QString merge(QString argeMes );
  68.     bool isClick = false;
  70. private:
  71.     Ui::Dx1000_dialogSP *ui;
  73.     QSerialPort mSerialPort;
  75.     // dx1000_dialogspselect弹框
  76.     DX1000_DialogSPSelect * dx1000_dialogspselect = NULL;
  78. signals:
  79.     void isLink(bool isLinks);
  81.     // 信号
  82.     void dataD(float a, float b, float c, float d);
  83.     void dataD2(float a, float b, float c, float d);
  85. private slots:
  86.     void on_buttonOpenClear_clicked();
  88.     void on_buttonSend_clicked();
  90.     // 读取文件槽函数
  91.     void on_SerialPort_readyRead();
  93.     // 获取信息
  94.     void test(QString name, QString rate , QString parity, QString dataBits, QString stopBits);
  96.     void on_status_clicked();
  97.     void on_sendClick_clicked();
  98.     void on_stressStatus_clicked();
  99. };
  101. #endif // DX1000_DIALOGSP_H

dx1000_dialogsp.cpp

  1. #include "dx1000_dialogsp.h"
  2. #include "ui_dx1000_dialogsp.h"
  4. #include <QDebug>
  5. #include <QSerialPortInfo>
  6. #include <QSerialPort>
  7. #include "JQChecksum.h"
  8. #include "dx_1000_macrodef.h"
  11. Dx1000_dialogSP::Dx1000_dialogSP(QWidget *parent) :
  12.     QWidget(parent),
  13.     ui(new Ui::Dx1000_dialogSP)
  14. {
  15.     ui->setupUi(this);
  16.     this->setWindowTitle("串口调试");
  17.     this->resize(850, 600);
  19.     // 在界面显示
  20.     chart->setParent(ui->graphicsView);
  21.     chart2->setParent(ui->graphicsView_2);
  23.     // 连接
  24.     connect(this, &Dx1000_dialogSP::dataD, chart, &DX1000_Charts::timerDeal);
  25.     connect(this, &Dx1000_dialogSP::dataD2, chart2, &DX1000_Charts::timerDeal);
  27.     // 设置定时器
  28.     QTimer *tim = new QTimer;
  29.     connect(tim, &QTimer::timeout, [=](){
  30.         emit this->dataD2(50.0, 80.5, 55, 65);
  31.         emit this->dataD(10.0, 20.5, 66, 70);
  32.     });
  33.     tim->start(500);
  34. }