【Qt】QChart折线图

引言

Qt绘图(Qt Charts)基于Qt的Graphics View架构,其核心组件是QChartViewQChart

  • QChartView是显示图标的视图,基类为QGraphicsView
  • QChart的基类是QGraphicsltem
    可以看作是视图和数据分离,即ViewModel

QChartView

QChartView 是一个独立的小部件,继承于 QGraphicsView 类。它可以直接在用户界面中显示图表。这使得在应用程序中集成图表变得简单,而无需复杂的图形场景设置。

QChart

QChart是继承于QGraphicsWidget,可以在QGraphicsScene上显示,用来管理图表中的数据、图例、坐标轴等。

示例

cpp 复制代码
// .h
#ifndef __WIDGET_H__
#define __WIDGET_H__

#include <QtWidgets/QWidget>

class Widget : public QWidget
{
public:
	Widget();
	~Widget();

public:
	void createLineSeries(const std::pair<QString, std::vector<int>>& pair);

private:
	class Impl;
	std::unique_ptr<Impl> impl_;
};

#endif // __WIDGET_H__

// .cpp
#include "Widget.h"

#include <QtCharts/QLineSeries>
#include <QtCharts/QChartView>
#include <QtCharts/QChart>
#include <QtCharts/QValueAxis>

#include <QVBoxLayout>

#include <algorithm>
#include <vector>

QT_CHARTS_USE_NAMESPACE

class Widget::Impl
{
public:
	Impl();
	~Impl() = default;

public:
	QChart *chart_ = nullptr;
};

Widget::Widget()
	:QWidget(),
	impl_(std::make_unique<Impl>())
{
	setFixedSize(1700, 800);
	setWindowTitle(u8"亮度对比折线图");
	//创建图表框架
	
	QVBoxLayout *lay = new QVBoxLayout;
	setLayout(lay);

	impl_->chart_ = new QChart();
	impl_->chart_->legend()->setAlignment(Qt::AlignRight);

	QChartView *charView = new QChartView(this);
	charView->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
	charView->setChart(impl_->chart_);

	lay->addWidget(charView);
}

Widget::~Widget()
{
}

void Widget::createLineSeries(const std::pair<QString, std::vector<int>> &pair)
{
	QLineSeries *series = new QLineSeries();
	
	series->setName(pair.first);

	for (int i = 0, sz = pair.second.size(); i < sz; i++)
	{
		series->append(i, pair.second[i]);
	}

	impl_->chart_->addSeries(series);
	//impl_->chart_->createDefaultAxes();
	QValueAxis *axisY = new QValueAxis;
	axisY->setRange(50, 200);
	axisY->setTitleText(u8"像素值");
	axisY->setLabelFormat("%i");
	impl_->chart_->addAxis(axisY, Qt::AlignLeft);

	QValueAxis *axisX = new QValueAxis;
	axisX->setRange(0, pair.second.size());
	axisX->setTitleText(u8"序号");
	axisX->setLabelFormat("%i");
	impl_->chart_->addAxis(axisX, Qt::AlignBottom);

	series->attachAxis(axisX);
	series->attachAxis(axisY);

	auto allAxisX = impl_->chart_->axes(Qt::Horizontal);
	auto allAxisY = impl_->chart_->axes(Qt::Vertical);

	for (const auto it : allAxisX)
	{
		it->hide();
	}

	for (const auto it : allAxisY)
	{
		it->hide();
	}

	(*allAxisX.begin())->show();
	(*allAxisY.begin())->show();

	update();
}

Widget::Impl::Impl()
{
}

参考文章

  1. Qt(十三)QChart绘制折线图_qt折线图-CSDN博客
  2. C++ Qt开发:Charts折线图绘制详解_qt折线图-CSDN博客
  3. QT之QCharts的使用(绘制折线图)_qt qcharts折线图-CSDN博客
  4. 学习Qt Charts-创建一个简单的折线图 - 哈拎 - 博客园 (cnblogs.com)
  5. Qt类 | QChartView类详解-CSDN博客
相关推荐
程序员-King.2 小时前
【Qt开源项目】— ModbusScope-day 5
开发语言·qt
老秦包你会2 小时前
QT第五课------QT系统相关------线程
开发语言·qt
淼淼7635 小时前
Qt拖动工具栏控件到图页中均匀展示
开发语言·c++·windows·qt
YouEmbedded6 小时前
解码信号与槽(含 QTimer 应用)
qt·定时器·信号与槽
小灰灰搞电子6 小时前
Qt SCXML 模块详解
开发语言·qt
开始了码7 小时前
UDP 协议详解与 Qt 实战应用
qt·网络协议·udp
深蓝海拓21 小时前
PySide6从0开始学习的笔记(三) 布局管理器与尺寸策略
笔记·python·qt·学习·pyqt
꧁坚持很酷꧂1 天前
Windows安装Qt Creator5.15.2(图文详解)
开发语言·windows·qt
淼淼7631 天前
QT表格与数据
开发语言·qt
小灰灰搞电子1 天前
Qt 实现炫酷锁屏源码分享
开发语言·qt·命令模式