QT绘制一个图表Qchart,实现数据波浪滚动效果

注意：QLineSeries绘制的是折线，QSplineSeries才是曲线，需要添加头文件。（2）定时器触发槽函数：】示例：绘制4条曲线——

Link-key

1015人浏览 · 2024-04-28 10:19:44

Link-key · 2024-04-28 10:19:44 发布

一、基本配置

1、在QT工程的.pro里面要添加charts:

QT    += charts

2、在.ui中将相应的Qwidget提升为QChartView:

二、代码段配置：

1、.h：

2、.cpp内：

（1）构造函数：

    //new一条曲线对象
    seriesTrendHR = new QLineSeries();

    //创建定时器
    QTimer *t_time = new QTimer(this);
    //定时器信号与槽函数，信号为超时触发信号，槽函数为自己编写的时间到了后要执行去做的事情。
    connect(t_time, SIGNAL(timeout()), this, SLOT(TimeOutTrendDataAdd()));
    t_time->start(1000);//设置时间间隔为1s

    //设置图表属性
     chart = new QChart();
     chartView = new QChartView(chart);  //新建用于显示chart的控件
     chartView->setContentsMargins(0, 0, 0, 0); //内边界无margin
     axisX = new QValueAxis;             //新建X轴
     axisY = new QValueAxis;             //新建Y轴

    //设置x轴
    axisX->setRange(0,3600);  //0~3600的x轴(先设为60分钟)
    axisX->setVisible(false);
    axisX->setGridLineVisible(false);   //隐藏背景网格X轴框线
    axisX->setLabelsColor(QColor(177,177,177));  //设置x轴的标签颜色，就是显示的文字颜色

    //设置y轴
    axisY->setRange(0,200);//0~100的y轴
    axisY->setTickCount(11);//设置Y轴的分隔个数
    axisY->setVisible(true);//可视化
    axisY->setGridLineVisible(false);   //隐藏背景网格Y轴框线
    axisY->setLabelsColor(QColor(177,177,177));  //设置x轴的标签颜色，就是显示的文字颜色

    chart->addAxis(axisX,Qt::AlignBottom);           //添加xy轴到图表
    chart->addAxis(axisY,Qt::AlignLeft);
    chart->setTheme(QChart::ChartThemeLight);        //图表为明亮主题
    chart->legend()->setVisible(false);              //图例不可见
    chart->setMargins(QMargins(0, 0, 0, 0));         //设置图表内边界无margin
    chart->setBackgroundRoundness(0);                //设置图表背景区域无圆角
    chart->layout()->setContentsMargins(0, 0, 0, 0); //设置图表外边界无margin
    chart->setBackgroundVisible(false);
    setAttribute(Qt::WA_TranslucentBackground);
    chartView->setStyleSheet("background: transparent");

     ui->widget->setChart(chart);   //绑定ui上的widget

    //设置曲线的属性
    seriesTrendHR->setColor(QColor(255, 255, 255));      //设置线型颜色为白色
    seriesTrendHR->setVisible(true);        //曲线可见
    chart->addSeries(seriesTrendHR);        //把曲线添加到图表上
    //将曲线绑定坐标轴
    seriesTrendHR->attachAxis(axisX);
    seriesTrendHR->attachAxis(axisY);

（2）定时器触发槽函数：】

void SepsisIndexTrend::TimeOutTrendDataAdd()
{
    //这里从DB数据库获取HR值
    xdata = xdata+1;//每秒移动一个点
    ydata = SGW_SYSTEMDEMO_DATA->getCmsSepsisDB().m_SepsisIi;
    //把这个点的数据添加到曲线上1
    seriesTrendHR->append(QPointF(xdata,ydata));
}

（3）实现效果：

注意：QLineSeries绘制的是折线，QSplineSeries才是曲线，需要添加头文件

#include <QSplineSeries>

示例：绘制4条曲线——

.h头文件类内定义：

private:
    Ui::SepsisIndexTrend *ui;

    QSplineSeries *seriesTrendHR;//一条HR趋势曲线
    QSplineSeries *seriesTrendSepsis;//一条Sepsis趋势曲线
    QSplineSeries *seriesTrendStress;//一条Stress趋势曲线
    QSplineSeries *seriesTrendLba;//一条Lba趋势曲线
    QChart *chart;
    QChartView *chartView;
    QValueAxis *axisX;//x轴
    QValueAxis *axisY;//y轴
    double xdata=0;
    double ydataHR=0;
    double ydataSepsis=0;
    double ydataStress=0;
    double ydataLba=0;

.cpp构造函数：

    ui->setupUi(this);

    qsrand(QTime(0, 0, 0).secsTo(QTime::currentTime()));//初始化随机数种子

    //new四条曲线对象
    seriesTrendHR = new QSplineSeries();
    seriesTrendSepsis = new QSplineSeries();
    seriesTrendStress = new QSplineSeries();
    seriesTrendLba = new QSplineSeries();

    //创建定时器
    QTimer *t_time = new QTimer(this);
    //定时器信号与槽函数，信号为超时触发信号，槽函数为自己编写的时间到了后要执行去做的事情。
    connect(t_time, SIGNAL(timeout()), this, SLOT(TimeOutTrendDataAdd()));
    t_time->start(1000);//设置时间间隔为1s

    //设置图表属性
     chart = new QChart();
     chartView = new QChartView(chart);  //新建用于显示chart的控件
     chartView->setContentsMargins(0, 0, 0, 0); //内边界无margin
     axisX = new QValueAxis;             //新建X轴
     axisY = new QValueAxis;             //新建Y轴

    //设置x轴
    axisX->setRange(0,3600);  //0~3600的x轴(先设为60分钟)
    axisX->setVisible(false);
    axisX->setGridLineVisible(false);   //隐藏背景网格X轴框线
    axisX->setLabelsColor(QColor(177,177,177));  //设置x轴的标签颜色，就是显示的文字颜色

    //设置y轴
    axisY->setRange(0,200);//0~200的y轴
    axisY->setTickCount(11);//设置Y轴的分隔个数
    axisY->setVisible(true);//可视化
    axisY->setGridLineVisible(false);   //隐藏背景网格Y轴框线
    axisY->setLabelsColor(QColor(177,177,177));  //设置x轴的标签颜色，就是显示的文字颜色

    chart->addAxis(axisX,Qt::AlignBottom);           //添加xy轴到图表
    chart->addAxis(axisY,Qt::AlignLeft);
    chart->setTheme(QChart::ChartThemeLight);        //图表为明亮主题
    chart->legend()->setVisible(false);              //图例不可见
    chart->setMargins(QMargins(0, 0, 0, 0));         //设置图表内边界无margin
    chart->setBackgroundRoundness(0);                //设置图表背景区域无圆角
    chart->layout()->setContentsMargins(0, 0, 0, 0); //设置图表外边界无margin
    chart->setBackgroundVisible(false);
    setAttribute(Qt::WA_TranslucentBackground);
    chartView->setStyleSheet("background: transparent");

     ui->widget->setChart(chart);   //绑定ui上的widget

    //设置曲线HR的属性
    seriesTrendHR->setColor(QColor(98, 222, 113));      //设置线型颜色为HR参数对应颜色
    seriesTrendHR->setVisible(true);        //曲线可见
    seriesTrendHR->setUseOpenGL(true);      //openGl 加速
    chart->addSeries(seriesTrendHR);        //把曲线添加到图表上
    //将曲线绑定坐标轴
    seriesTrendHR->attachAxis(axisX);
    seriesTrendHR->attachAxis(axisY);

    //设置曲线Sepsis的属性
    seriesTrendSepsis->setColor(QColor(233, 78, 112));      //设置线型颜色为Sepsis参数对应颜色
    seriesTrendSepsis->setVisible(true);        //曲线可见
    seriesTrendSepsis->setUseOpenGL(true);      //openGl 加速
    chart->addSeries(seriesTrendSepsis);        //把曲线添加到图表上
    //将曲线绑定坐标轴
    seriesTrendSepsis->attachAxis(axisX);
    seriesTrendSepsis->attachAxis(axisY);

    //设置曲线Stress的属性
    seriesTrendStress->setColor(QColor(65, 140, 248));      //设置线型颜色为Stress参数对应颜色
    seriesTrendStress->setVisible(true);        //曲线可见
    seriesTrendStress->setUseOpenGL(true);      //openGl 加速
    chart->addSeries(seriesTrendStress);        //把曲线添加到图表上
    //将曲线绑定坐标轴
    seriesTrendStress->attachAxis(axisX);
    seriesTrendStress->attachAxis(axisY);

    //设置曲线Lba的属性
    seriesTrendLba->setColor(QColor(162, 107, 234));      //设置线型颜色为Lba参数对应颜色
    seriesTrendLba->setVisible(true);        //曲线可见
    seriesTrendLba->setUseOpenGL(true);      //openGl 加速
    chart->addSeries(seriesTrendLba);        //把曲线添加到图表上
    //将曲线绑定坐标轴
    seriesTrendLba->attachAxis(axisX);
    seriesTrendLba->attachAxis(axisY);

定时器槽函数：

void SepsisIndexTrend::TimeOutTrendDataAdd()
{

    if(SGW_SYSTEMMODE == 1)  //demo模式
    {
        int j=0;
        int i=1;
        QVector<QPointF> ListHr;
        QVector<QPointF> ListSepsis;
        QVector<QPointF> ListStress;
        QVector<QPointF> ListLba;

        QVector<QPointF> newlistHr;
        QVector<QPointF> newlistSepsis;
        QVector<QPointF> newlistStress;
        QVector<QPointF> newlistLba;

        ListHr = seriesTrendHR->pointsVector();//获取现在图中列表
        ListSepsis = seriesTrendSepsis->pointsVector();//获取现在图中列表
        ListStress = seriesTrendStress->pointsVector();//获取现在图中列表
        ListLba = seriesTrendLba->pointsVector();//获取现在图中列表

        /*HR*/
        ydataHR =qrand()%190;//hr的范围拉满
        ydataSepsis=qrand()%100;
        ydataStress =qrand()%15;
        ydataLba =qrand()%10;
        //3600/50等于72
        if (ListHr.size() < 72)
        {
            //保持原来
            newlistHr = ListHr;
            newlistSepsis = ListSepsis;
            newlistStress = ListStress;
            newlistLba = ListLba;
            xdata = xdata+50;//每秒移动一个点

        }
        else
        {
            //错位移动
            j=0;
            for(i =1 ; i< ListHr.size();i++)
            {
                newlistHr.append(QPointF(j,ListHr.at(i).y()));
                newlistSepsis.append(QPointF(j,ListSepsis.at(i).y()));
                newlistStress.append(QPointF(j,ListStress.at(i).y()));
                newlistLba.append(QPointF(j,ListLba.at(i).y()));
                j=j+50;//50个间隔为1个点
            }
        }
        newlistHr.append(QPointF(xdata,ydataHR));   //补上新的数据
        newlistSepsis.append(QPointF(xdata,ydataSepsis));   //补上新的数据
        newlistStress.append(QPointF(xdata,ydataStress));   //补上新的数据
        newlistLba.append(QPointF(xdata,ydataLba));   //补上新的数据

        seriesTrendHR->replace(newlistHr);        //替换更新
        seriesTrendSepsis->replace(newlistSepsis);        //替换更新
        seriesTrendStress->replace(newlistStress);        //替换更新
        seriesTrendLba->replace(newlistLba);        //替换更新


//        //这里从DB数据库获取HR值
//        xdata = xdata+50;//每秒移动一个点

//        ydata =qrand()%200;
//        //ydata = SGW_SYSTEMDEMO_DATA->getCmsSepsisDB().m_SepsisHr;
//        seriesTrendHR->append(QPointF(xdata,ydata));//把这个点的数据添加到曲线HR上

//        ydata =qrand()%100;
//        //ydata = SGW_SYSTEMDEMO_DATA->getCmsSepsisDB().m_SepsisSepsis;
//        seriesTrendSepsis->append(QPointF(xdata,ydata));//把这个点的数据添加到曲线Sepsis上

//        ydata =qrand()%15;
//        //ydata = SGW_SYSTEMDEMO_DATA->getCmsSepsisDB().m_SepsisStress;
//        seriesTrendStress->append(QPointF(xdata,ydata));//把这个点的数据添加到曲线Stress上

//        ydata =qrand()%10;
//        //ydata = SGW_SYSTEMDEMO_DATA->getCmsSepsisDB().m_SepsisLba;
//        seriesTrendLba->append(QPointF(xdata,ydata));//把这个点的数据添加到曲线Lba上
    }


}

效果：