QT: QChart柱状图和曲线图实现

##使用chart配置
1、pro 加入 QT += charts

2、添加头文件：using namespace QtCharts;

3、 在程序的开头加上一句 using namespace Qtcharts或者一个宏QT_CHARTS_USE_NAMESPACE
##实例涉及的内容

本实例主要讲解通过QtCharts绘制面积图表，涉及的QtCharts的主要类有如下内容：QBarSet、QBarSeries、QBarCategoryAxis、QValueAxis、QChart、QChartView；

   QBarSet：表示一组条形图。一组条形图包含每个类别的一个数据值。假设set的第一个值属于第一类，第二类属于第二类，以此类推。如果set的值少于类别的值，则假定缺少的值在set的末尾。对于集合中间的缺失值，使用数值0；

   QBarSeries：表示以条形显示的一系列数据。该类的目的是将条形图作为组来绘制，其中同一类别中的条形图是挨个分组的。QBarSeries将数据从集合分组到类别，这些类别由QStringList定义；

   QBarCategoryAxis类用于操作图表的轴，可以设置为显示带有勾号、网格线和阴影的轴线，在刻度之间画出类别；

   QValueAxis类用于操作图表轴，可以设置为显示带有勾号、网格线和阴影的轴线，轴的值绘制到刻度的位置；

   QChart是一个可以在QGraphicscene中显示的控件；

   QChartView是一个可以显示图表的独立控件；
1
2
3
4
5
6
7
8
9
10
11

###代码实现：

#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 

QT_CHARTS_USE_NAMESPACE

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    void curveRandDraw();

    void histgramDraw();

private:
    Ui::MainWindow *ui;
    void recervedData(int);
    int maxSize;
    int maxX;
    int maxY;
    QValueAxis *axisY;
    QValueAxis *axisX;
    QList<int> m_data;
    QSplineSeries* splineSeries;
    QChart* chart;
    QChartView* chartView;
    QTimer* timer;
private slots:
    void timerTimeOut();
};
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

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->setGeometry(0, 0, 800, 480);
    curveRandDraw();
    //histgramDraw();
}

MainWindow::~MainWindow()
{
    delete ui;
}
//绘制曲线图
void MainWindow::curveRandDraw()
{
    /* 最大储存 maxSize - 1 个数据 */
    maxSize = 51;
    /* x 轴上的最大值 */
    maxX = 5000;
    /* y 轴最大值 */

    maxY = 40;
    /* splineSeries 曲线实例化（折线用 QLineSeries） */
    splineSeries = new QSplineSeries();
    /* 图表实例化 */
    chart = new QChart();
    /* 图表视图实例化 */
    chartView = new QChartView(this);
    /* 坐标轴 */
    axisY = new QValueAxis();
    axisX = new QValueAxis();
    /* 定时器 */
    timer = new QTimer(this);
    /* legend 译图例类型，以绘图的颜色区分，本例设置为隐藏 */
    chart->legend()->hide();
    /* chart 设置标题 */
    chart->setTitle(QString::fromLocal8Bit("实时动态曲线示例"));
    /* 添加一条曲线 splineSeries */
    chart->addSeries(splineSeries);
    /* 设置显示格式 */
    axisY->setLabelFormat("%i");
    /* y 轴标题 */
    axisY->setTitleText(QString::fromLocal8Bit("温度/℃"));
    /* y 轴标题位置（设置坐标轴的方向） */
    chart->addAxis(axisY, Qt::AlignLeft);
    /* 设置 y 轴范围 */
    axisY->setRange(0, maxY);
    /* 将 splineSeries 附加于 y 轴上 */
    splineSeries->attachAxis(axisY);
    /* 设置显示格式 */
    axisX->setLabelFormat("%i");
    /* x 轴标题 */
    axisX->setTitleText(QString::fromLocal8Bit("时间/ms"));
    /* x 轴标题位置（设置坐标轴的方向） */
    chart->addAxis(axisX, Qt::AlignBottom);
    /* 设置 x 轴范围 */
    axisX->setRange(0, maxX);
    /* 将 splineSeries 附加于 x 轴上 */
    splineSeries->attachAxis(axisX);
    /* 将图表的内容设置在图表视图上 */
    chartView->setChart(chart);
    /* 设置抗锯齿 */
    chartView->setRenderHint(QPainter::Antialiasing);
    /* 设置为图表视图为中心部件 */
    setCentralWidget(chartView);
    /* 定时 200ms */
    timer->start(200);
    /* 信号槽连接 */
    connect(timer, &QTimer::timeout, this, &MainWindow::timerTimeOut);
    qsrand(time(nullptr));
}
//绘制柱状图
void MainWindow::histgramDraw()
{
    QBarSet* set0 = new QBarSet(QString::fromLocal8Bit("简"));
    QBarSet* set1 = new QBarSet(QString::fromLocal8Bit("约翰"));
    QBarSet* set2 = new QBarSet(QString::fromLocal8Bit("艾克斯"));
    QBarSet* set3 = new QBarSet(QString::fromLocal8Bit("玛丽"));
    QBarSet* set4 = new QBarSet(QString::fromLocal8Bit("萨曼萨"));
    *set0 << 1 <<2 << 3 << 4 << 5 << 6;
    *set1 << 5 << 0<<0<<4<<0<<7;
    *set2 << 3 << 5<<8<<13<<8<<5;
    *set3 << 5<<6<<7<<3<<4<<5;
    *set4 <<9<<7<<5<<3<<1<<2;
    QBarSeries *series = new QBarSeries();
    series->append(set0);
    series->append(set1);
    series->append(set2);
    series->append(set3);
    series->append(set4);

    QChart* chart = new QChart();
    chart->addSeries(series);
    chart->setTitle(QString::fromLocal8Bit("柱状图绘制实例"));
    chart->setAnimationOptions(QChart::SeriesAnimations);

    QStringList categories;
    categories << QString::fromLocal8Bit("1月")<<QString::fromLocal8Bit("2月")<<QString::fromLocal8Bit("3月")<<QString::fromLocal8Bit("4月")<<QString::fromLocal8Bit("5月")<<QString::fromLocal8Bit("6月");
    QBarCategoryAxis* axisX = new QBarCategoryAxis();
    axisX->append(categories);
    chart->addAxis(axisX, Qt::AlignBottom);
    series->attachAxis(axisX);

    QValueAxis *axisY = new QValueAxis();
    axisY->setRange(0, 15);
    chart->addAxis(axisY, Qt::AlignLeft);
    series->attachAxis(axisY);
    chart->legend()->setVisible(true);
    chart->legend()->setAlignment(Qt::AlignBottom);

    QChartView* chartView = new QChartView(chart, this);
    chartView->setRenderHint(QPainter::Antialiasing);
    setCentralWidget(chartView);

}

void MainWindow::recervedData(int value)
{
    /* 将数据添加到 data 中 */
    m_data.append(value);
    /* 当储存数据的个数大于最大值时，把第一个数据删除 */
    while(m_data.size() > maxSize)
    {
        /* 移除 data 中第一个数据 */
        m_data.removeFirst();
    }
    /* 先清空 */
    splineSeries->clear();
    /* 计算 x 轴上的点与点之间显示的间距 */
    int xSpace = maxX / (maxSize - 1);
    for(int i = 0; i < m_data.size(); ++i)
    {
        /* 添加点，xSpace * i 表示第 i 个点的 x 轴的位置 */
        splineSeries->append(xSpace * i, m_data.at(i));
    }
}

void MainWindow::timerTimeOut()
{
    recervedData(qrand() % maxY);
}

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147