Qt实现动态曲(折)线图

功能描述:

利用QFile读取在不断刷新写入的文本文件,并用QTextBrowser组件实时显示读取到的内容,QTextQtCharts组件进行动态绘制显示数据变化趋势,且随着x取值范围的增大x轴可伸长变化。

实现:

对于qt动态曲(折)线图的绘制主要用到了定时器QTimer ,每隔x秒读取一次文件数据并在QtCharts中append一个点。Qt Charts可以绘制很多样式的图形,比如折线、饼图等,可以先浏览下Qt自带的示例中的静态图。注,用到QtCharts,还需在.pro文件中引入 “QT+=charts”。

代码示例:

dynamicchart.h

#ifndef DYNAMICCHART_H
#define DYNAMICCHART_H

#include <QObject>
#include <QWidget>
#include <QtCharts/QChartView>
#include <QtCharts/QChart>
#include <QtCharts/QLineSeries>
#include <QtCharts/QLineSeries>
#include <QtCharts/QSplineSeries>
#include <QtCharts/QValueAxis>
#include <QtCharts/QCategoryAxis>
#include <QDebug>
#include <QVBoxLayout>
#include <QTimer>


class DynamicChart : public QWidget
{
    Q_OBJECT
public:
    DynamicChart();
    QtCharts::QChart * chart;
    QtCharts::QChartView * chartView;

    QtCharts::QSplineSeries * data1Series;
    QtCharts::QSplineSeries * data2Series;

    QtCharts::QValueAxis *axisX;
    QtCharts::QCategoryAxis *axisY;

    QTimer *chartTimer;

    QVBoxLayout *v_layout;
    int timer_num=0;

public slots:
    void drawSerious();

};

#endif // DYNAMICCHART_H

dynamicchart.cpp

#include "dynamicchart.h"
#include "txtbrowser.h"

DynamicChart::DynamicChart()
{
    chart=new QtCharts::QChart();
    //曲线
    data1Series=new QtCharts::QSplineSeries();
    data2Series=new QtCharts::QSplineSeries();

    //增加图例
    data1Series->setName("data1");
    data2Series->setName("data2");

    chart->setTitle("动态曲线图");

    //自定义x轴以及相关属性
    axisX=new QtCharts::QValueAxis(chart);
    axisX->setRange(0,10);
    axisX->setTitleText("x轴标题");
    axisX->setGridLineVisible(true);//是否显示网格线
    axisX->setMinorTickCount(4);//小刻度线数目
    axisX->setTickCount(11);//大刻度线数目
    axisX->setMinorGridLineVisible(false);

    //自定义y轴以及相关属性
    axisY=new QtCharts::QCategoryAxis(chart);
    axisY->setLabelFormat("%u");
    axisY->setMin(0);
    axisY->setMax(100);
    axisY->setStartValue(0);
    axisY->setTitleText("y轴标题");

    //append要按照大小顺序依次添加
    axisY->append("0",0);
    axisY->append("10",10);
    axisY->append("20",20);
    axisY->append("30",30);
    axisY->append("40",40);
    axisY->append("50",50);
    axisY->append("60",60);
    axisY->append("70",70);
    axisY->append("80",80);
    axisY->append("90",90);
    axisY->append("100",100);

    //让刻度线和刻度的label对齐
    axisY->setLabelsPosition(QtCharts::QCategoryAxis::AxisLabelsPositionOnValue);

    //注意在使用setAxisX/Y之前,QSeries必须要加载至chart否则图上没有数据
    chart->addSeries(data1Series);
    chart->addSeries(data2Series);
    chart->setAxisX(axisX,data1Series);
    chart->setAxisX(axisX,data2Series);
    chart->setAxisY(axisY,data1Series);
    chart->setAxisY(axisY,data2Series);
    chart->setTheme(QtCharts::QChart::ChartThemeLight);//设置系统主题ChartThemeBlueCerulean、ChartThemeBlueIcy\ChartThemeBrownSand\ChartThemeQt
    chartView =new QtCharts::QChartView(chart);


    //将view加到布局显示
    v_layout=new QVBoxLayout;
    v_layout->addWidget(chartView);
    this->setLayout(v_layout);
    this->show();

    chartTimer=new QTimer;
    connect(chartTimer,SIGNAL(timeout()),this,SLOT(drawSerious()));
}

void DynamicChart::drawSerious(){
    //每间隔3000毫秒画三个点
    //timer_num是全局变量,每个定时间隔增加3
    for(int i=0;i<1&&timer_num<TxtBrowser::data0List.length();i++,timer_num++){
    qDebug()<<"timer_num="<<timer_num;
    if(timer_num>10){
        axisX->setRange(0,timer_num);
    }
    qDebug()<<"x="<<TxtBrowser::data0List[timer_num].toInt();
    qDebug()<<"y="<<TxtBrowser::data1List[timer_num].toInt();
    data1Series->append(TxtBrowser::data0List[timer_num].toInt(),TxtBrowser::data1List[timer_num].toInt());
    data2Series->append(TxtBrowser::data0List[timer_num].toInt(),TxtBrowser::data2List[timer_num].toInt());

    if(timer_num==TxtBrowser::data0List.length()){
        qDebug()<<"chart timer stop!";
        chartTimer->stop();
        break;
    }
  }
}

运行截图:

 

 

 

完整项目代码获取:

 

https://download.csdn.net/download/vvyingning/15364097

代码已更新,能直接运行,包含测试文件

 

 

 

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值