Qt中的QChart + QChartView + QLineSeries(折线图) + QBarSeries(柱形图)

追烽少年x

已于 2024-08-31 23:28:37 修改

阅读量317

点赞数 1

文章标签： qt

于 2024-08-29 23:46:54 首次发布

原文链接：https://mp.weixin.qq.com/s/YfHyrG1QJqW3USYck_kVtg?poc_token=HLyX0GajRsisuWOy9Ui9s-xnBoJt46Tz3p3YKAZD

版权

Qt中的QChart + QChartView + QLineSeries(折线图) + QBarSeries(柱形图)

本示例需要使用的类：

1.QChart：

QChart 类管理图表数据序列、图例和坐标轴的图形表示，这使得开发者可以通过 QChart 来创建和展示各种类型的图表。QChart 是一个继承自 QGraphicsWidget 的类，可以在 QGraphicsScene 中展示。QChartView类用于在布局中显示图表，它提供了更简单的接口来将图表集成到用户界面中。QPolarChart 是一个特殊的图表类，用于以极坐标图的形式展示数据。它允许将线形、样条、区域和散点序列转换为极坐标图，提供了一种不同的数据可视化方式。

一个 QChart 一般包括序列、坐标轴、图例、图表标题等部分。
在Qt中要使用图标模块必须在.pro文件中添加：

QT += charts

下面我们添加一个例子来使用Qt中的图表模块。

新建一个工程，添加QTabWidget控件，然后在控件中分别以属性页的形式分别显示：折线图、柱形图。

一、显示折线图：

折线图是由QLineSeries表示的。QLineSeries 是 Qt 中的一个类，用于在图表中表示一系列的数据点。它继承自 QAbstractSeries 类，提供了绘制折线图所需的基本功能。首先添加一个窗口QLineSeriesWidget类，该窗口继承自QMainWindow。该类重载了绘制函数paintEvent，在其实现中绘制折线图。

qlineserieswidget.h如下：

#ifndef QLINESERIESWIDGET_H
#define QLINESERIESWIDGET_H

#include <QMainWindow>
#include <QWidget>

class QLineSeriesWidget : public QMainWindow
{
    Q_OBJECT
public:
    explicit QLineSeriesWidget(QWidget *parent = nullptr);

protected:
    virtual void paintEvent(QPaintEvent *event);

signals:
};

#endif // QLINESERIESWIDGET_H

qlineserieswidget.cpp如下：

#include "qlineserieswidget.h"
#include<QtCharts/QChartView>
#include<QtCharts/QLineSeries>
#include<QDebug>

QLineSeriesWidget::QLineSeriesWidget(QWidget *parent)
    : QMainWindow{parent}
{

}

void QLineSeriesWidget::paintEvent(QPaintEvent *event)
{
    // 折线图的形式显示数据
    QLineSeries* pSeries = new QLineSeries();
    // 显示点
    pSeries->setPointsVisible(true);
    // 是否显示点坐标
    pSeries->setPointLabelsVisible(true);

    pSeries->append(0,6);
    pSeries->append(2,4);
    pSeries->append(3,8);
    pSeries->append(7,4);
    pSeries->append(10,5);

    *pSeries << QPointF(11,1)<<QPointF(13,3)<<QPointF(17, 6) << QPointF(18, 3) <<             QPointF(20, 2);

    qDebug() << pSeries->type();
    QChart* pChart = new QChart();
    // 返回图表中图例对象
    pChart->legend()->hide();

    pChart->addSeries(pSeries);
    // 创建图表轴
    pChart->createDefaultAxes();
    pChart->setTitle("简单折线图示例");

    QChartView* pChartView = new QChartView(pChart);
    pChartView->setRenderHints(QPainter::Antialiasing);
    setCentralWidget(pChartView);

}

折线图显示效果如下：
在这里插入图片描述

二、柱形图显示

QBarSet 是 Qt 中的一个类，用于在柱状图中表示一组相关数据。它通常与 QBarSeries 一起使用，以便将不同的数据集分组显示。

QBarSeries 是 Qt 中的一个类，用于在图表中表示一系列的数据点，以柱状图的形式展示。它继承自 QAbstractSeries 类，提供了绘制柱状图所需的基本功能。

qbarserieswidget.h如下：

#ifndef QBARSERIESWIDGET
#define QBARSERIESWIDGET

#include <QMainWindow>

class QBarSeriesWidget : public QMainWindow
{
    Q_OBJECT
public:
    explicit QBarSeriesWidget(QWidget *parent = nullptr);

protected:
    virtual void paintEvent(QPaintEvent *event);

signals:
};

#endif // QBARSERIESWIDGET

qbarserieswidget.cpp如下：

#include "qbarserieswidget.h"
#include<QtWidgets/QMainWindow>
#include<QtCharts/QChartView>
#include<QtCharts/QBarSeries> // 以按类别分组的竖条表示一系列数据
#include<QtCharts/QBarSet>    // 表示条形图中一组条形图
#include<QtCharts/QLegend>    // 以折线图的形式显示数据
#include<QtCharts/QBarCategoryAxis>  // 将类别添加到图表的轴
#include<QtCharts/QValueAxis>        // 将值添加到图表的轴
#include<QtCharts/QLineSeries>
#include<QChart>
#include<QStringList>


QBarSeriesWidget::QBarSeriesWidget(QWidget *parent)
    : QMainWindow{parent}
{



}

void QBarSeriesWidget::paintEvent(QPaintEvent *event)
{
    QBarSet* pSet0 = new QBarSet("小马云");
    QBarSet* pSet1 = new QBarSet("小化腾");
    QBarSet* pSet2 = new QBarSet("小张磊");
    QBarSet* pSet3 = new QBarSet("小张朝阳");
    QBarSet* pSet4 = new QBarSet("小刘强东");

    // 条形数据
    *pSet0 << 1 << 2 << 3 << 4 << 5 << 6;
    *pSet1 << 5 << 0 << 0 << 4 << 0 << 7;
    *pSet2 << 3 << 5 << 8 << 13 << 8 << 5;
    *pSet3 << 5 << 6 << 7 << 3 << 4 << 5;
    *pSet4 << 9 << 7 << 5 << 3 << 1 << 2;

    // 添加条系列
    QBarSeries* pSeries = new QBarSeries();
    pSeries->append(pSet0);
    pSeries->append(pSet1);
    pSeries->append(pSet2);
    pSeries->append(pSet3);
    pSeries->append(pSet4);
    pSeries->setLabelsVisible(true); // 显示值

    QLineSeries* pLineSeries = new QLineSeries();
    pLineSeries->setName("趋势");
    pLineSeries->setPointsVisible(true);
    // 折线图数据
    pLineSeries->append(QPointF(0,4));
    pLineSeries->append(QPointF(1,15));
    pLineSeries->append(QPointF(2,20));
    pLineSeries->append(QPointF(3,4));
    pLineSeries->append(QPointF(4,12));
    pLineSeries->append(QPointF(5,17));

    // 创建图表
    QChart* pChart = new QChart();
    pChart->addSeries(pSeries);
    pChart->addSeries(pLineSeries);
    pChart->setTitle("线和条形图例");

    // 类别
    QStringList categroiesList;
    categroiesList << "一月"<< "二月"<< "三月"<< "四月"<< "五月"<< "六月";
    // X轴
    QBarCategoryAxis* pAxisX = new QBarCategoryAxis();
    pAxisX->append(categroiesList);
    // 将轴添加到指定的对齐视图
    pChart->addAxis(pAxisX,Qt::AlignBottom);
    pLineSeries->attachAxis(pAxisX);
    pSeries->attachAxis(pAxisX);
    pAxisX->setRange(QString("一月"),QString("六月"));

    // Y轴
    QValueAxis* pAxisY = new QValueAxis();
    pChart->addAxis(pAxisY,Qt::AlignLeft);
    pLineSeries->attachAxis(pAxisY);
    pSeries->attachAxis(pAxisY);
    pAxisY->setRange(0,20);

    // 图例
    pChart->legend()->setVisible(true);
    pChart->legend()->setAlignment(Qt::AlignBottom);

    // 视图
    QChartView* pView = new QChartView(pChart);
    pView->setRenderHint(QPainter::Antialiasing);
    setCentralWidget(pView);
}

柱形图显示效果如下：

在这里插入图片描述