【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博客
相关推荐
xMathematics26 分钟前
计算机图形学实践:结合Qt和OpenGL实现绘制彩色三角形
开发语言·c++·qt·计算机图形学·cmake·opengl
星火撩猿3 小时前
ubantu中下载编译安装qt5.15.3
开发语言·qt
机器视觉知识推荐、就业指导6 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml
꧁坚持很酷꧂9 小时前
Linux Ubuntu18.04下安装Qt Craeator 5.12.9(图文详解)
linux·运维·qt
ChoSeitaku10 小时前
17.QT-Qt窗口-工具栏|状态栏|浮动窗口|设置停靠位置|设置浮动属性|设置移动属性|拉伸系数|添加控件(C++)
c++·qt·命令模式
OpenC++13 小时前
【C++QT】Buttons 按钮控件详解
c++·经验分享·qt·leetcode·microsoft
我真的不会C13 小时前
QT窗口相关控件及其属性
开发语言·qt
云小逸14 小时前
【QQMusic项目界面开发复习笔记】第二章
c++·qt
꧁坚持很酷꧂15 小时前
配置Ubuntu18.04中的Qt Creator为中文(图文详解)
开发语言·qt·ubuntu
快乐飒男16 小时前
Qt基础009(HTTP编程和QJSON)
qt