记录QCharts绘制折线动态图的流程，效果如下：

QChartLine

1 UI文件建立

新建一个 UI 文件后，在界面上添加一个graphicsView控件，并右键“提升为”，将其从基类 QGraphicsView 提升到 QChartView（setChart 是 QChartView 的成员函数）。提升窗口部件

2 程序实现

首先需要添加模块charts(VS中是在扩展的 Qt Project Settings 的 Qt Modules 中添加charts)。然后添加对应的头文件:

1
2
3
4
5
6
#include <QtCharts>
QT_CHARTS_USE_NAMESPACE

#include <QChartView>
#include <QLineSeries>
using namespace QtCharts;

使用时在类中定义折线图和坐标轴等数据，然后在初始化函数中对折线图的样式进行自定义设置。

1
2
3
4
5
6
7
8
9
10
11
class QLineChart : public QWidget
{
    double maxVal;//数据中的最大值，用于确定y轴上限范围，起始点默认为0
    int dataSize;//数据的数量，用于确定x轴上限范围，起始点默认为0

    //折线图和坐标轴
    QChart* m_chart;
    QLineSeries* m_lineSeries;
    QValueAxis* m_axisX;
    QValueAxis* m_axisY;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
void QLineChart::InitLineChart()
{
    QFont font;
    font.setFamily("SimHei");
    font.setPointSize(13);//文字大小

    // 创建横纵坐标轴并设置显示范围
    m_axisX = new QValueAxis();
    m_axisY = new QValueAxis();
    m_axisX->setTitleText(QStringLiteral("时间 / 帧"));//x轴名称
    m_axisY->setTitleText(QStringLiteral("定位误差 / %R"));//y轴名称
    m_axisX->setRange(0, dataSize);
    m_axisX->setLabelFormat("%d");//设置刻度的格式
    m_axisX->setGridLineVisible(true);//网格线可见
    m_axisX->setTickCount(6);//设置多少格
    m_axisX->setMinorTickCount(1);//设置每格小刻度线的数目
    m_axisX->setLabelsFont(font);
    m_axisY->setRange(0, maxVal);
    m_axisY->setLabelFormat("%u");
    m_axisY->setGridLineVisible(true);
    m_axisY->setTickCount(6);
    m_axisY->setMinorTickCount(1);
    m_axisY->setLabelsFont(font);

    m_lineSeries = new QLineSeries();                             // 创建曲线绘制对象
    //m_lineSeries->setPointsVisible(true);                 // 设置数据点可见
    //m_lineSeries->setName(QStringLiteral("协同定位误差值"));                            // 图例名称
    QColor color = QColor(77, 161, 255);
    m_lineSeries->setPen(QPen(color, 4));

    m_chart = new QChart();                             // 创建图表对象
    m_chart->addSeries(m_lineSeries);                              // 将曲线对象添加到图表上
    m_chart->addAxis(m_axisY, Qt::AlignLeft);                      // 将X轴添加到图表上
    m_chart->addAxis(m_axisX, Qt::AlignBottom);                    // 将Y轴添加到图表上
    
    font.setPointSize(20);//文字大小
    m_chart->setTitleFont(font);    // 设置标题字体
    m_chart->setTitle(QStringLiteral("协同定位误差折线图"));
    m_chart->legend()->setVisible(false);                           //隐藏图例
    m_chart->setAnimationOptions(QChart::SeriesAnimations);        // 动画：能使曲线绘制显示的更平滑，过渡效果更好看

    m_lineSeries->attachAxis(m_axisX);                             // 曲线对象关联上X轴，此步骤必须在m_chart->addSeries之后
    m_lineSeries->attachAxis(m_axisY);                             // 曲线对象关联上Y轴，此步骤必须在m_chart->addSeries之后

    ui.graphicsView->setChart(m_chart);                           // 将图表对象设置到graphicsView上进行显示
    ui.graphicsView->setRenderHint(QPainter::Antialiasing);       // 设置渲染：抗锯齿，如果不设置那么曲线就显得不平滑
}

实现动态功能只需要在定时器中不断添加数据

1
m_lineSeries->append(m_frame, 1.0 * m_frame / 500);

3 问题记录

使用过程中出现了数据点与坐标轴刻度不一致问题，如绘制点（500，1.0）时 y 坐标对应不到1.0，原因是横轴的范围无法平均分配到刻度，即 y 轴范围是 0~5 时setTickCount()设置的值应该是6。