Qt —— QChart以时间为x轴绘制曲线（附代码）

效果

绘制两条曲线，加入对应的图例。

x轴为当前时间加了10秒（显示为分钟:秒），y轴显示角度信息。

曲线显示加入了动画效果（一行代码）。后期需要动态更新曲线则使用曲线对象append曲线数据后调用QChartView::repaint即可。

代码

#include <QWidget>
#include <QDateTime>
#include <QChartView>
#include <QtCharts/QChartView>
#include <QValueAxis>
#include <QDateTimeAxis>
#include <QSplineSeries>
#include <QDateTimeAxis>


// .h
class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget *ui;

    QSplineSeries *mSeries = new QSplineSeries();
    QSplineSeries *mSeries2 = new QSplineSeries();
    QDateTime curDateTIme = QDateTime::currentDateTime();

    QChartView *chartView;
};


.cpp
Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    qsrand(QTime(0, 0, 0).secsTo(QTime::currentTime()));

    // x轴(时间轴方式)
    QDateTimeAxis * AxisX = new QDateTimeAxis();
    AxisX->setTitleText("时间(分:秒)");                                  // x轴显示标题
    AxisX->setGridLineVisible(false);                                   // 隐藏背景网格X轴框线
    AxisX->setFormat("mm:ss");                                          // x轴格式
    AxisX->setLabelsAngle(0);                                           // x轴显示的文字倾斜角度
    AxisX->setTickCount(10);                                            // 轴上点的个数
    AxisX->setRange(curDateTIme, curDateTIme.addSecs(10));              // 范围

    // y轴
    QValueAxis *AxisY = new QValueAxis();
    AxisY->setTitleText("角度");                                         // y轴显示标题
    AxisY->setRange(0, 20);                                             // 范围
    AxisY->setTickCount(11);                                            // 轴上点的个数
    AxisY->setGridLineVisible(false);                                   // 隐藏背景网格Y轴框线

    // 图表
    QChart *chart = new QChart();
    chart->setAnimationOptions(QChart::SeriesAnimations);               // 动画方式

    // 图表视图
    chartView = new QChartView(chart);
    chartView->setRenderHint(QPainter::Antialiasing);                   // 反锯齿绘制
    chartView->chart()->addSeries(mSeries);                             // 添加线段
    chartView->chart()->addSeries(mSeries2);                            // 添加线段
    chartView->chart()->setTheme(QtCharts::QChart::ChartThemeBlueNcs);  // 设置主题
    chartView->chart()->setTitle("方位角数据");                           // 设置标题
    chartView->chart()->addAxis(AxisX, Qt::AlignBottom);                // 设置x轴位置
    chartView->chart()->addAxis(AxisY, Qt::AlignLeft);                  // 设置y轴位置

    // 线段1
    mSeries->setPen(QPen(Qt::red, 0.6, Qt::SolidLine));                 // 设置线段pen
    mSeries->attachAxis(AxisX);                                         // 线段依附的x轴
    mSeries->attachAxis(AxisY);                                         // 线段依附的y轴
    mSeries->setName("算法");                                            // 线段名称，在图例会显示
    for(unsigned short index=0;index<=10;++index)
    {
        QDateTime temp_AddTimePos = curDateTIme.addSecs(index);
        if(temp_AddTimePos >= curDateTIme.addSecs(11)){return;}
        mSeries->append(temp_AddTimePos.toMSecsSinceEpoch(), qrand()%18+2);
    }

    // 线段2
    mSeries2->setPen(QPen(Qt::blue, 0.6, Qt::SolidLine));
    mSeries2->attachAxis(AxisY);
    mSeries2->attachAxis(AxisX);
    mSeries2->setName("测量");
    for(unsigned short index=0;index<=10;++index)
    {
        QDateTime temp_AddTimePos = curDateTIme.addSecs(index);
        if(temp_AddTimePos >= curDateTIme.addSecs(11)){return;}
        mSeries2->append(temp_AddTimePos.toMSecsSinceEpoch(), qrand()%18);
    }

    // 图例
    chart->legend()->setVisible(true);                                  // 图例显示
    chart->legend()->setAlignment(Qt::AlignTrailing);                   // 图例向下居中

    // 将图表扔进QWidget
    ui->gridLayout->addWidget(chartView);
}

Widget::~Widget()
{
    delete ui;
}

源码

获取方式一：CSDN积分下载

获取方式二：扫描下方微信公众号，回复 “51973712” ，立即获取源码链接。

关注

笔者 - jxd

微信公众号搜索 “码农总动员” 或 微信扫描下方二维码，了解更多你不知道的XX，O(∩_∩)O